/* Taskboard — theme tokens, background animation and the handful of rules that cannot
   be written inline (keyframes, pseudo-elements, the rich-text editor's own markup). */

html[data-tt-theme="dark"] {
  --bg:#0d0915; --chrome:#1b1723; --chrome2:#17141e; --surface:#1d1926; --surface2:#181521;
  --pop:#24202e; --panel:#1b1724; --scroll:#2e2545;
  --ink:#f5f3f6; --ink2:#e5e3e8; --ink3:#cbc8d0; --muted:#b4aebc; --muted2:#a29daa; --faint:#a29daa; --faint2:#98939f; --faint3:#98939f;
  --faint:#988fae; --faint2:#8f86a5; --faint3:#8f86a5;
  --teal-solid:#b794f6; --teal-bright:#d6bcfa; --on-teal:#ffffff;
  --hi:#f87171; --mid:#fde047; --mid-text:#e2d38a; --lo:#64748b; --red-text:#f9a8a8;
  --done:#d6bcfa; --done-rgb:183,148,246; --on-done:#1a1226; --donedot:#62508c;
  --color-accent:#b794f6; --bg-accent:#b794f6;
  --slate:163,153,187; --teal:183,148,246; --red:248,113,113; --amber:253,224,71; --shadow:0,0,0;
  color-scheme: dark;
}
html[data-tt-theme="light"] {
  --bg:#eceff5; --chrome:#ffffff; --chrome2:#f5f7fb; --surface:#ffffff; --surface2:#f3f6fa;
  --pop:#ffffff; --panel:#ffffff; --scroll:#c6cedb;
  --ink:#201d25; --ink2:#3a3540; --ink3:#56505e; --muted:#655f6d; --muted2:#6f6977; --faint:#676170; --faint2:#6d6774; --faint3:#6d6774;
  --faint:#57677b; --faint2:#5c6b80; --faint3:#5c6b80;
  --teal-solid:#8b5cf6; --teal-bright:#8b5cf6; --on-teal:#ffffff;
  --hi:#e11d48; --mid:#f59e0b; --mid-text:#8a6f3d; --lo:#94a3b8; --red-text:#a4133c;
  --done:#8b5cf6; --done-rgb:139,92,246; --on-done:#1a1226; --donedot:#a89dc4;
  --color-accent:#8b5cf6; --bg-accent:#7c4ddb;
  --slate:100,116,139; --teal:139,92,246; --red:225,29,72; --amber:245,158,11; --shadow:15,23,42;
  color-scheme: light;
}
/* Ground and containers are chosen independently, so each owns its own attribute and
   touches only its own tokens. One hue table drives every option: the lightness ladder is
   fixed and only hue and saturation move, so no combination can break the contrast
   between layers. --bg-accent is the ink for the animated background, which follows the
   page-background choice rather than the highlight. */
html[data-tt-theme="dark"][data-tt-ground="charcoal"] { --bg:#0d0e0f; --bg-accent:#929caa; }
html[data-tt-theme="light"][data-tt-ground="charcoal"] { --bg:#eeeff1; --bg-accent:#6e7d91; }
html[data-tt-theme="dark"][data-tt-ground="slate"] { --bg:#0b0e11; --bg-accent:#5a93e2; }
html[data-tt-theme="light"][data-tt-ground="slate"] { --bg:#eceff4; --bg-accent:#3673c9; }
html[data-tt-theme="dark"][data-tt-ground="indigo"] { --bg:#0b0b11; --bg-accent:#615ae2; }
html[data-tt-theme="light"][data-tt-ground="indigo"] { --bg:#ececf4; --bg-accent:#3d36c9; }
html[data-tt-theme="dark"][data-tt-ground="purple"] { --bg:#0e0b11; --bg-accent:#935ae2; }
html[data-tt-theme="light"][data-tt-ground="purple"] { --bg:#efecf4; --bg-accent:#7336c9; }
html[data-tt-theme="dark"][data-tt-ground="magenta"] { --bg:#110b11; --bg-accent:#e25ae2; }
html[data-tt-theme="light"][data-tt-ground="magenta"] { --bg:#f4ecf4; --bg-accent:#c936c9; }
html[data-tt-theme="dark"][data-tt-ground="rose"] { --bg:#110b0d; --bg-accent:#e25a87; }
html[data-tt-theme="light"][data-tt-ground="rose"] { --bg:#f4ecee; --bg-accent:#c93667; }
html[data-tt-theme="dark"][data-tt-ground="red"] { --bg:#110c0b; --bg-accent:#e2685a; }
html[data-tt-theme="light"][data-tt-ground="red"] { --bg:#f4edec; --bg-accent:#c94436; }
html[data-tt-theme="dark"][data-tt-ground="amber"] { --bg:#110f0b; --bg-accent:#e2ac5a; }
html[data-tt-theme="light"][data-tt-ground="amber"] { --bg:#f4f0ec; --bg-accent:#c98e36; }
html[data-tt-theme="dark"][data-tt-ground="olive"] { --bg:#0f110b; --bg-accent:#b9e25a; }
html[data-tt-theme="light"][data-tt-ground="olive"] { --bg:#f1f4ec; --bg-accent:#9dc936; }
html[data-tt-theme="dark"][data-tt-ground="green"] { --bg:#0b110e; --bg-accent:#5ae295; }
html[data-tt-theme="light"][data-tt-ground="green"] { --bg:#ecf4ef; --bg-accent:#36c976; }
html[data-tt-theme="dark"][data-tt-ground="teal"] { --bg:#0b1111; --bg-accent:#5ae2e2; }
html[data-tt-theme="light"][data-tt-ground="teal"] { --bg:#ecf4f4; --bg-accent:#36c9c9; }
html[data-tt-theme="dark"][data-tt-ground="cyan"] { --bg:#0b0f11; --bg-accent:#5abee2; }
html[data-tt-theme="light"][data-tt-ground="cyan"] { --bg:#ecf2f4; --bg-accent:#36a2c9; }
html[data-tt-theme="dark"][data-tt-panels="charcoal"] {
  --chrome:#1b1c1d; --chrome2:#161718; --surface:#1d1e20; --surface2:#191b1c;
  --pop:#242628; --panel:#1c1d1f; --scroll:#323539; --slate:161,167,175;
}
html[data-tt-theme="light"][data-tt-panels="charcoal"] {
  --chrome:#ffffff; --chrome2:#f8f9f9; --surface:#ffffff; --surface2:#f7f7f8;
  --pop:#ffffff; --panel:#ffffff; --scroll:#c2c6cb; --slate:110,118,129;
}
html[data-tt-theme="dark"][data-tt-panels="slate"] {
  --chrome:#181b21; --chrome2:#13161b; --surface:#1a1e23; --surface2:#161a1f;
  --pop:#20252c; --panel:#191d22; --scroll:#283343; --slate:151,165,186;
}
html[data-tt-theme="light"][data-tt-panels="slate"] {
  --chrome:#ffffff; --chrome2:#f7f8fb; --surface:#ffffff; --surface2:#f5f7fa;
  --pop:#ffffff; --panel:#ffffff; --scroll:#bbc5d3; --slate:101,117,139;
}
html[data-tt-theme="dark"][data-tt-panels="indigo"] {
  --chrome:#181821; --chrome2:#14131b; --surface:#1a1a23; --surface2:#17161f;
  --pop:#21202c; --panel:#191922; --scroll:#292843; --slate:153,151,186;
}
html[data-tt-theme="light"][data-tt-panels="indigo"] {
  --chrome:#ffffff; --chrome2:#f7f7fb; --surface:#ffffff; --surface2:#f5f5fa;
  --pop:#ffffff; --panel:#ffffff; --scroll:#bcbbd3; --slate:103,101,139;
}
html[data-tt-theme="dark"][data-tt-panels="purple"] {
  --chrome:#1b1821; --chrome2:#16131b; --surface:#1e1a23; --surface2:#1a161f;
  --pop:#25202c; --panel:#1d1922; --scroll:#332843; --slate:165,151,186;
}
html[data-tt-theme="light"][data-tt-panels="purple"] {
  --chrome:#ffffff; --chrome2:#f8f7fb; --surface:#ffffff; --surface2:#f7f5fa;
  --pop:#ffffff; --panel:#ffffff; --scroll:#c5bbd3; --slate:117,101,139;
}
html[data-tt-theme="dark"][data-tt-panels="magenta"] {
  --chrome:#211821; --chrome2:#1b131b; --surface:#231a23; --surface2:#1f161f;
  --pop:#2c202c; --panel:#221922; --scroll:#432843; --slate:186,151,186;
}
html[data-tt-theme="light"][data-tt-panels="magenta"] {
  --chrome:#ffffff; --chrome2:#fbf7fb; --surface:#ffffff; --surface2:#faf5fa;
  --pop:#ffffff; --panel:#ffffff; --scroll:#d3bbd3; --slate:139,101,139;
}
html[data-tt-theme="dark"][data-tt-panels="rose"] {
  --chrome:#21181b; --chrome2:#1b1316; --surface:#231a1d; --surface2:#1f1619;
  --pop:#2c2024; --panel:#22191c; --scroll:#432831; --slate:186,151,163;
}
html[data-tt-theme="light"][data-tt-panels="rose"] {
  --chrome:#ffffff; --chrome2:#fbf7f8; --surface:#ffffff; --surface2:#faf5f7;
  --pop:#ffffff; --panel:#ffffff; --scroll:#d3bbc3; --slate:139,101,113;
}
html[data-tt-theme="dark"][data-tt-panels="red"] {
  --chrome:#211818; --chrome2:#1b1413; --surface:#231b1a; --surface2:#1f1716;
  --pop:#2c2120; --panel:#221a19; --scroll:#432a28; --slate:186,154,151;
}
html[data-tt-theme="light"][data-tt-panels="red"] {
  --chrome:#ffffff; --chrome2:#fbf7f7; --surface:#ffffff; --surface2:#faf6f5;
  --pop:#ffffff; --panel:#ffffff; --scroll:#d3bdbb; --slate:139,105,101;
}
html[data-tt-theme="dark"][data-tt-panels="amber"] {
  --chrome:#211d18; --chrome2:#1b1813; --surface:#23201a; --surface2:#1f1c16;
  --pop:#2c2720; --panel:#221e19; --scroll:#433828; --slate:186,172,151;
}
html[data-tt-theme="light"][data-tt-panels="amber"] {
  --chrome:#ffffff; --chrome2:#fbf9f7; --surface:#ffffff; --surface2:#faf8f5;
  --pop:#ffffff; --panel:#ffffff; --scroll:#d3c9bb; --slate:139,124,101;
}
html[data-tt-theme="dark"][data-tt-panels="olive"] {
  --chrome:#1e2118; --chrome2:#181b13; --surface:#21231a; --surface2:#1c1f16;
  --pop:#292c20; --panel:#1f2219; --scroll:#3b4328; --slate:175,186,151;
}
html[data-tt-theme="light"][data-tt-panels="olive"] {
  --chrome:#ffffff; --chrome2:#f9fbf7; --surface:#ffffff; --surface2:#f8faf5;
  --pop:#ffffff; --panel:#ffffff; --scroll:#ccd3bb; --slate:128,139,101;
}
html[data-tt-theme="dark"][data-tt-panels="green"] {
  --chrome:#18211b; --chrome2:#131b16; --surface:#1a231e; --surface2:#161f1a;
  --pop:#202c25; --panel:#19221d; --scroll:#284334; --slate:151,186,166;
}
html[data-tt-theme="light"][data-tt-panels="green"] {
  --chrome:#ffffff; --chrome2:#f7fbf8; --surface:#ffffff; --surface2:#f5faf7;
  --pop:#ffffff; --panel:#ffffff; --scroll:#bbd3c5; --slate:101,139,117;
}
html[data-tt-theme="dark"][data-tt-panels="teal"] {
  --chrome:#182121; --chrome2:#131b1b; --surface:#1a2323; --surface2:#161f1f;
  --pop:#202c2c; --panel:#192222; --scroll:#284343; --slate:151,186,186;
}
html[data-tt-theme="light"][data-tt-panels="teal"] {
  --chrome:#ffffff; --chrome2:#f7fbfb; --surface:#ffffff; --surface2:#f5fafa;
  --pop:#ffffff; --panel:#ffffff; --scroll:#bbd3d3; --slate:101,139,139;
}
html[data-tt-theme="dark"][data-tt-panels="cyan"] {
  --chrome:#181e21; --chrome2:#13191b; --surface:#1a2123; --surface2:#161d1f;
  --pop:#20292c; --panel:#192022; --scroll:#283c43; --slate:151,176,186;
}
html[data-tt-theme="light"][data-tt-panels="cyan"] {
  --chrome:#ffffff; --chrome2:#f7fafb; --surface:#ffffff; --surface2:#f5f8fa;
  --pop:#ffffff; --panel:#ffffff; --scroll:#bbcdd3; --slate:101,129,139;
}
/* Highlight palettes. Purple is the default and lives in the base blocks above; each of
   these restates only the accent family, so surfaces, ink and the priority colours are
   untouched. Dark keeps the accent light against the ground, light keeps it dark enough
   to read as body-adjacent text on white. */
html[data-tt-theme="dark"][data-tt-accent="charcoal"] {
  --ink:#f4f5f5; --ink2:#e5e5e6; --ink3:#cbcccd; --muted:#b3b5b7; --muted2:#a1a3a5; --faint:#a1a3a5; --faint2:#97999b; --faint3:#97999b;
  --teal-solid:#b3bbc6; --teal-bright:#d0d5dd; --on-teal:#15191e; --donedot:#5e6978;
  --teal:179,187,198; --done:#d0d5dd; --done-rgb:179,187,198; --on-done:#15191e; --color-accent:#b3bbc6;
}
html[data-tt-theme="light"][data-tt-accent="charcoal"] {
  --ink:#202122; --ink2:#393a3c; --ink3:#555658; --muted:#646668; --muted2:#6e7072; --faint:#66686b; --faint2:#6b6d70; --faint3:#6b6d70;
  --teal-solid:#586474; --teal-bright:#586474; --on-teal:#ffffff; --donedot:#abb1ba;
  --teal:88,100,116; --done:#586474; --done-rgb:88,100,116; --on-done:#ffffff; --color-accent:#586474;
}
html[data-tt-theme="dark"][data-tt-accent="slate"] {
  --ink:#f3f5f6; --ink2:#e3e5e8; --ink3:#c8cbd0; --muted:#aeb4bc; --muted2:#9da2aa; --faint:#9da2aa; --faint2:#93989f; --faint3:#93989f;
  --teal-solid:#85b3f4; --teal-bright:#b2d0fa; --on-teal:#0f1824; --donedot:#4f6687;
  --teal:133,179,244; --done:#b2d0fa; --done-rgb:133,179,244; --on-done:#0f1824; --color-accent:#85b3f4;
}
html[data-tt-theme="light"][data-tt-accent="slate"] {
  --ink:#1d2025; --ink2:#353a40; --ink3:#50565e; --muted:#5f656d; --muted2:#696f77; --faint:#616770; --faint2:#676d74; --faint3:#676d74;
  --teal-solid:#1d5aaf; --teal-bright:#1d5aaf; --on-teal:#ffffff; --donedot:#a5b0c0;
  --teal:29,90,175; --done:#1d5aaf; --done-rgb:29,90,175; --on-done:#ffffff; --color-accent:#1d5aaf;
}
html[data-tt-theme="dark"][data-tt-accent="indigo"] {
  --ink:#f4f3f6; --ink2:#e3e3e8; --ink3:#c8c8d0; --muted:#afaebc; --muted2:#9d9daa; --faint:#9d9daa; --faint2:#93939f; --faint3:#93939f;
  --teal-solid:#8b85f4; --teal-bright:#b6b2fa; --on-teal:#100f24; --donedot:#524f87;
  --teal:139,133,244; --done:#b6b2fa; --done-rgb:139,133,244; --on-done:#100f24; --color-accent:#8b85f4;
}
html[data-tt-theme="light"][data-tt-accent="indigo"] {
  --ink:#1e1d25; --ink2:#363540; --ink3:#50505e; --muted:#605f6d; --muted2:#6a6977; --faint:#626170; --faint2:#686774; --faint3:#686774;
  --teal-solid:#241daf; --teal-bright:#241daf; --on-teal:#ffffff; --donedot:#a6a5c0;
  --teal:36,29,175; --done:#241daf; --done-rgb:36,29,175; --on-done:#ffffff; --color-accent:#241daf;
}
html[data-tt-theme="dark"][data-tt-accent="magenta"] {
  --ink:#f6f3f6; --ink2:#e8e3e8; --ink3:#d0c8d0; --muted:#bcaebc; --muted2:#aa9daa; --faint:#aa9daa; --faint2:#9f939f; --faint3:#9f939f;
  --teal-solid:#f485f4; --teal-bright:#fab2fa; --on-teal:#240f24; --donedot:#874f87;
  --teal:244,133,244; --done:#fab2fa; --done-rgb:244,133,244; --on-done:#240f24; --color-accent:#f485f4;
}
html[data-tt-theme="light"][data-tt-accent="magenta"] {
  --ink:#251d25; --ink2:#403540; --ink3:#5e505e; --muted:#6d5f6d; --muted2:#776977; --faint:#706170; --faint2:#746774; --faint3:#746774;
  --teal-solid:#af1daf; --teal-bright:#af1daf; --on-teal:#ffffff; --donedot:#c0a5c0;
  --teal:175,29,175; --done:#af1daf; --done-rgb:175,29,175; --on-done:#ffffff; --color-accent:#af1daf;
}
html[data-tt-theme="dark"][data-tt-accent="rose"] {
  --ink:#f6f3f4; --ink2:#e8e3e5; --ink3:#d0c8cb; --muted:#bcaeb3; --muted2:#aa9da1; --faint:#aa9da1; --faint2:#9f9397; --faint3:#9f9397;
  --teal-solid:#f485aa; --teal-bright:#fab2ca; --on-teal:#240f16; --donedot:#874f62;
  --teal:244,133,170; --done:#fab2ca; --done-rgb:244,133,170; --on-done:#240f16; --color-accent:#f485aa;
}
html[data-tt-theme="light"][data-tt-accent="rose"] {
  --ink:#251d20; --ink2:#403539; --ink3:#5e5054; --muted:#6d5f64; --muted2:#77696e; --faint:#706166; --faint2:#74676b; --faint3:#74676b;
  --teal-solid:#af1d4e; --teal-bright:#af1d4e; --on-teal:#ffffff; --donedot:#c0a5ae;
  --teal:175,29,78; --done:#af1d4e; --done-rgb:175,29,78; --on-done:#ffffff; --color-accent:#af1d4e;
}
html[data-tt-theme="dark"][data-tt-accent="red"] {
  --ink:#f6f4f3; --ink2:#e8e3e3; --ink3:#d0c9c8; --muted:#bcb0ae; --muted2:#aa9e9d; --faint:#aa9e9d; --faint2:#9f9493; --faint3:#9f9493;
  --teal-solid:#f49085; --teal-bright:#fab9b2; --on-teal:#24110f; --donedot:#87554f;
  --teal:244,144,133; --done:#fab9b2; --done-rgb:244,144,133; --on-done:#24110f; --color-accent:#f49085;
}
html[data-tt-theme="light"][data-tt-accent="red"] {
  --ink:#251e1d; --ink2:#403635; --ink3:#5e5150; --muted:#6d605f; --muted2:#776b69; --faint:#706361; --faint2:#746867; --faint3:#746867;
  --teal-solid:#af2b1d; --teal-bright:#af2b1d; --on-teal:#ffffff; --donedot:#c0a7a5;
  --teal:175,43,29; --done:#af2b1d; --done-rgb:175,43,29; --on-done:#ffffff; --color-accent:#af2b1d;
}
html[data-tt-theme="dark"][data-tt-accent="amber"] {
  --ink:#f6f5f3; --ink2:#e8e6e3; --ink3:#d0cdc8; --muted:#bcb6ae; --muted2:#aaa49d; --faint:#aaa49d; --faint2:#9f9a93; --faint3:#9f9a93;
  --teal-solid:#f4c885; --teal-bright:#faddb2; --on-teal:#241c0f; --donedot:#87714f;
  --teal:244,200,133; --done:#faddb2; --done-rgb:244,200,133; --on-done:#241c0f; --color-accent:#f4c885;
}
html[data-tt-theme="light"][data-tt-accent="amber"] {
  --ink:#25221d; --ink2:#403c35; --ink3:#5e5850; --muted:#6d675f; --muted2:#777269; --faint:#706a61; --faint2:#746f67; --faint3:#746f67;
  --teal-solid:#af751d; --teal-bright:#af751d; --on-teal:#ffffff; --donedot:#c0b5a5;
  --teal:175,117,29; --done:#af751d; --done-rgb:175,117,29; --on-done:#ffffff; --color-accent:#af751d;
}
html[data-tt-theme="dark"][data-tt-accent="olive"] {
  --ink:#f5f6f3; --ink2:#e7e8e3; --ink3:#ced0c8; --muted:#b8bcae; --muted2:#a6aa9d; --faint:#a6aa9d; --faint2:#9b9f93; --faint3:#9b9f93;
  --teal-solid:#d3f485; --teal-bright:#e5fab2; --on-teal:#1e240f; --donedot:#76874f;
  --teal:211,244,133; --done:#e5fab2; --done-rgb:211,244,133; --on-done:#1e240f; --color-accent:#d3f485;
}
html[data-tt-theme="light"][data-tt-accent="olive"] {
  --ink:#23251d; --ink2:#3d4035; --ink3:#595e50; --muted:#696d5f; --muted2:#737769; --faint:#6b7061; --faint2:#707467; --faint3:#707467;
  --teal-solid:#83af1d; --teal-bright:#83af1d; --on-teal:#ffffff; --donedot:#b8c0a5;
  --teal:131,175,29; --done:#83af1d; --done-rgb:131,175,29; --on-done:#ffffff; --color-accent:#83af1d;
}
html[data-tt-theme="dark"][data-tt-accent="green"] {
  --ink:#f3f6f5; --ink2:#e3e8e5; --ink3:#c8d0cb; --muted:#aebcb4; --muted2:#9daaa2; --faint:#9daaa2; --faint2:#939f98; --faint3:#939f98;
  --teal-solid:#85f4b5; --teal-bright:#b2fad1; --on-teal:#0f2418; --donedot:#4f8767;
  --teal:133,244,181; --done:#b2fad1; --done-rgb:133,244,181; --on-done:#0f2418; --color-accent:#85f4b5;
}
html[data-tt-theme="light"][data-tt-accent="green"] {
  --ink:#1d2521; --ink2:#35403a; --ink3:#505e56; --muted:#5f6d65; --muted2:#69776f; --faint:#617068; --faint2:#67746d; --faint3:#67746d;
  --teal-solid:#1daf5c; --teal-bright:#1daf5c; --on-teal:#ffffff; --donedot:#a5c0b1;
  --teal:29,175,92; --done:#1daf5c; --done-rgb:29,175,92; --on-done:#ffffff; --color-accent:#1daf5c;
}
html[data-tt-theme="dark"][data-tt-accent="teal"] {
  --ink:#f3f6f6; --ink2:#e3e8e8; --ink3:#c8d0d0; --muted:#aebcbc; --muted2:#9daaaa; --faint:#9daaaa; --faint2:#939f9f; --faint3:#939f9f;
  --teal-solid:#85f4f4; --teal-bright:#b2fafa; --on-teal:#0f2424; --donedot:#4f8787;
  --teal:133,244,244; --done:#b2fafa; --done-rgb:133,244,244; --on-done:#0f2424; --color-accent:#85f4f4;
}
html[data-tt-theme="light"][data-tt-accent="teal"] {
  --ink:#1d2525; --ink2:#354040; --ink3:#505e5e; --muted:#5f6d6d; --muted2:#697777; --faint:#617070; --faint2:#677474; --faint3:#677474;
  --teal-solid:#1dafaf; --teal-bright:#1dafaf; --on-teal:#ffffff; --donedot:#a5c0c0;
  --teal:29,175,175; --done:#1dafaf; --done-rgb:29,175,175; --on-done:#ffffff; --color-accent:#1dafaf;
}
html[data-tt-theme="dark"][data-tt-accent="cyan"] {
  --ink:#f3f5f6; --ink2:#e3e7e8; --ink3:#c8ced0; --muted:#aeb8bc; --muted2:#9da6aa; --faint:#9da6aa; --faint2:#939c9f; --faint3:#939c9f;
  --teal-solid:#85d7f4; --teal-bright:#b2e7fa; --on-teal:#0f1e24; --donedot:#4f7887;
  --teal:133,215,244; --done:#b2e7fa; --done-rgb:133,215,244; --on-done:#0f1e24; --color-accent:#85d7f4;
}
html[data-tt-theme="light"][data-tt-accent="cyan"] {
  --ink:#1d2325; --ink2:#353d40; --ink3:#505a5e; --muted:#5f696d; --muted2:#697377; --faint:#616c70; --faint2:#677174; --faint3:#677174;
  --teal-solid:#1d88af; --teal-bright:#1d88af; --on-teal:#ffffff; --donedot:#a5b9c0;
  --teal:29,136,175; --done:#1d88af; --done-rgb:29,136,175; --on-done:#ffffff; --color-accent:#1d88af;
}
html[data-tt-theme="dark"][data-tt-accent="blue"] {
  --ink:#f3f5f6; --ink2:#e3e5e8; --ink3:#c8ccd0; --muted:#aeb5bc; --muted2:#9da3aa; --faint:#9da3aa; --faint2:#93999f; --faint3:#93999f;
  --teal-solid:#85b9f4; --teal-bright:#b2d4fa; --on-teal:#0f1924; --donedot:#4f6987;
  --teal:133,185,244; --done:#b2d4fa; --done-rgb:133,185,244; --on-done:#0f1924; --color-accent:#85b9f4;
}
html[data-tt-theme="light"][data-tt-accent="blue"] {
  --ink:#1d2125; --ink2:#353a40; --ink3:#50565e; --muted:#5f666d; --muted2:#697077; --faint:#616870; --faint2:#676d74; --faint3:#676d74;
  --teal-solid:#1d61af; --teal-bright:#1d61af; --on-teal:#ffffff; --donedot:#a5b2c0;
  --teal:29,97,175; --done:#1d61af; --done-rgb:29,97,175; --on-done:#ffffff; --color-accent:#1d61af;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body { margin:0; padding:0; background:var(--bg); }
body {
  color: var(--ink);
  font: 14px/1.45 'Helvetica Neue', Helvetica, -apple-system, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--teal-solid); text-decoration: none; }
a:hover { color: var(--teal-bright); }
::placeholder { color: var(--faint2); }
input, textarea, select, button { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: 1px solid rgba(var(--teal),0.55); outline-offset: 0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; }
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
html[data-tt-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.9); }

/* ---------------------------------------------------------------- background */
#tb-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  transition: background .3s ease-in-out;
  background:
    radial-gradient(120% 80% at 88% -10%, color-mix(in srgb, var(--bg-accent) 13%, transparent) 0%, transparent 58%),
    radial-gradient(95% 70% at 3% 108%, color-mix(in srgb, var(--bg-accent) 30%, transparent) 0%, transparent 62%);
}
html[data-tt-theme="light"] #tb-bg {
  background:
    radial-gradient(120% 80% at 88% -10%, color-mix(in srgb, var(--bg-accent) 16%, transparent) 0%, transparent 58%),
    radial-gradient(90% 70% at 5% 105%, color-mix(in srgb, var(--bg-accent) 12%, transparent) 0%, transparent 62%);
}
#tb-caustics > div {
  position: fixed; inset: -10%; pointer-events: none; z-index: 0;
  transition: background .3s ease-in-out;
}
[data-caustic="1"] { background: radial-gradient(120% 85% at 78% 8%,  color-mix(in srgb, var(--bg-accent) 15%, transparent) 0%, transparent 62%); animation: omCaustic1 38s ease-in-out infinite; }
[data-caustic="2"] { background: radial-gradient(90% 70% at 18% 82%,  color-mix(in srgb, var(--bg-accent) 22%, transparent) 0%, transparent 62%); animation: omCaustic2 53s ease-in-out infinite; animation-delay: -9s; }
[data-caustic="3"] { background: radial-gradient(80% 60% at 62% 68%,  color-mix(in srgb, var(--bg-accent) 12%, transparent) 0%, transparent 62%); animation: omCaustic3 67s ease-in-out infinite; animation-delay: -23s; }
[data-caustic="4"] { background: radial-gradient(100% 75% at 30% 20%, color-mix(in srgb, var(--bg-accent) 10%, transparent) 0%, transparent 62%); animation: omCaustic4 83s ease-in-out infinite; animation-delay: -41s; }
#om-particles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#om-stars     { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
body[data-tb-motion="off"] #tb-caustics,
body[data-tb-motion="off"] #om-particles,
body[data-tb-motion="off"] #om-stars { display: none; }

/* translate / scale / opacity are separate animatable properties, so drift, breathing and
   twinkle compose on ONE element instead of three nested ones per particle. */
@keyframes omDriftA { 0% { translate:0 0 } 35% { translate:-16vw 22vh } 60% { translate:-38vw 40vh } 100% { translate:-64vw 82vh } }
@keyframes omDriftB { 0% { translate:0 0 } 30% { translate:-14vw 18vh } 55% { translate:-22vw 44vh } 100% { translate:-56vw 86vh } }
@keyframes omDriftC { 0% { translate:0 0 } 40% { translate:-26vw 20vh } 65% { translate:-30vw 48vh } 100% { translate:-60vw 90vh } }
@keyframes omScaleA { 0%,100% { scale:.45 } 30% { scale:1.25 } 62% { scale:.7 } }
@keyframes omScaleB { 0%,100% { scale:1.15 } 25% { scale:.5 } 70% { scale:1.6 } }
@keyframes omScaleC { 0%,100% { scale:.8 } 40% { scale:1.9 } 75% { scale:.55 } }
/* The plateaus at each end matter: the twinkle period divides the drift period exactly and
   shares its delay, so a particle is always invisible when the drift loop wraps it back. */
@keyframes omTwinkle { 0%,6% { opacity:0 } 22% { opacity:1 } 45% { opacity:.3 } 68% { opacity:1 } 86% { opacity:.18 } 96%,100% { opacity:0 } }
@keyframes omCaustic1 { 0%,100% { opacity:.30; transform:translate3d(0,0,0) scale(1) } 33% { opacity:.72; transform:translate3d(3vw,-2vh,0) scale(1.14) } 66% { opacity:.46; transform:translate3d(-2vw,3vh,0) scale(.94) } }
@keyframes omCaustic2 { 0%,100% { opacity:.58; transform:translate3d(0,0,0) scale(1.06) } 40% { opacity:.22; transform:translate3d(-4vw,2vh,0) scale(.9) } 72% { opacity:.68; transform:translate3d(2vw,-3vh,0) scale(1.18) } }
@keyframes omCaustic3 { 0%,100% { opacity:.24; transform:translate3d(0,0,0) scale(.96) } 45% { opacity:.60; transform:translate3d(4vw,3vh,0) scale(1.2) } 78% { opacity:.34; transform:translate3d(-3vw,-2vh,0) scale(1.02) } }
@keyframes omCaustic4 { 0%,100% { opacity:.40; transform:translate3d(0,0,0) scale(1.1) } 28% { opacity:.16; transform:translate3d(2vw,4vh,0) scale(.92) } 61% { opacity:.64; transform:translate3d(-4vw,-1vh,0) scale(1.16) } }
/* Travel is one uninterrupted interpolation; the trail grows on its own element so the two
   can have different timing without the easing restarting mid-flight. */
@keyframes omShoot  { 0% { opacity:0; transform:translate3d(0,0,0) } 12% { opacity:var(--so) } 72% { opacity:var(--so) } 100% { opacity:0; transform:translate3d(var(--sx),var(--sy),0) } }
@keyframes omStreak { 0% { transform:rotate(var(--sa)) scaleX(.05) } 100% { transform:rotate(var(--sa)) scaleX(1.3) } }
@keyframes tbPop       { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:none } }
@keyframes tbFade    { from { opacity:0 } to { opacity:1 } }
@keyframes tbPageOut { from { opacity:1; transform:none } to { opacity:0; transform:translateX(-22px) } }
@keyframes tbPageIn  { from { opacity:0; transform:translateX(26px) } to { opacity:1; transform:none } }
@keyframes tbPopCenter { from { opacity:0; transform:translate(-50%,-50%) scale(.985) } to { opacity:1; transform:translate(-50%,-50%) scale(1) } }

@media (prefers-reduced-motion: reduce) {
  #tb-caustics > div, #om-particles *, #om-stars * { animation: none !important; }
}
/* A modal backdrop carries a blur: anything animating behind it forces the whole blurred
   region to re-render every frame, so the field stands down while one is open. */
body:has(.tb-backdrop) #om-particles,
body:has(.tb-backdrop) #om-stars { visibility: hidden; }
body:has(.tb-backdrop) #om-particles *,
body:has(.tb-backdrop) #om-stars *,
body:has(.tb-backdrop) #tb-caustics > div { animation-play-state: paused !important; }

/* --------------------------------------------------------- cursor panel glow */
[data-glow] { position: relative; }
[data-glow]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: var(--glow-o, 0); transition: opacity .12s linear;
  background: radial-gradient(190px circle at var(--glow-x, 50%) var(--glow-y, 50%),
              color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 62%);
}

/* ------------------------------------------------------------------- shared */
.tb-input, .tb-select {
  width: 100%; background: var(--surface2); color: var(--ink);
  border: 1px solid rgba(var(--slate),0.26); border-radius: 7px;
  font-size: 13px; padding: 9px 11px;
}
.tb-field-label {
  display: block; font-size: 10px; letter-spacing: .03em;
  color: var(--faint); margin: 14px 0 6px;
}
.tb-btn-primary {
  padding: 9px 16px; background: var(--teal-solid); border: none; color: var(--on-teal);
  border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
}
.tb-btn-primary:hover { background: var(--teal-bright); }
.tb-btn-block { display: block; width: 100%; margin-top: 18px; padding: 11px 16px; font-size: 13.5px; }
.tb-btn {
  padding: 9px 14px; background: transparent; border: 1px solid rgba(var(--slate),0.3);
  color: var(--ink3); border-radius: 7px; font-size: 13px; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
}
.tb-btn:hover { color: var(--teal-bright); border-color: rgba(var(--teal),0.4); }
.tb-btn-danger { border-color: rgba(var(--red),0.35); color: var(--red-text); }
.tb-btn-danger:hover { background: rgba(var(--red),0.12); border-color: rgba(var(--red),0.5); color: var(--red-text); }
.tb-btn-done { background: rgba(var(--done-rgb),0.12); border-color: rgba(var(--done-rgb),0.38); color: var(--done); }
.tb-btn-done:hover { background: rgba(var(--done-rgb),0.22); color: var(--done); }
.tb-btn:disabled, .tb-btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }

/* --------------------------------------------------------------- login page */
.tb-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 22px; position: relative; z-index: 2; }
.tb-login-card {
  width: min(380px, 100%); background: var(--surface);
  border: 1px solid rgba(var(--slate),0.3); border-radius: 12px;
  box-shadow: 0 30px 70px rgba(var(--shadow),0.35); padding: 28px;
}
.tb-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.tb-login-brand span { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.tb-login-lede { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.tb-login-error {
  margin-top: 14px; padding: 9px 11px; background: rgba(var(--red),0.1);
  border: 1px solid rgba(var(--red),0.3); border-radius: 7px;
  font-size: 12px; color: var(--red-text); line-height: 1.5;
}
.tb-login-notice { margin-top: 14px; font-size: 12px; color: var(--teal-bright); }
.tb-login-foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(var(--slate),0.2); font-size: 11.5px; color: var(--faint); }

/* ------------------------------------------------- rich-text editor internals */
.rt-e h3 { font-size: 16px; margin: 8px 0 4px; font-weight: 600; }
.rt-e h4 { font-size: 14px; margin: 8px 0 4px; font-weight: 600; }
.rt-e p { margin: 0 0 7px; }
.rt-e ul, .rt-e ol { margin: 6px 0; padding-left: 22px; }
.rt-e li { margin: 2px 0; }
.rt-e blockquote { margin: 7px 0; padding-left: 11px; border-left: 2px solid rgba(var(--teal),0.5); color: var(--ink3); }
.rt-e pre { margin: 7px 0; padding: 8px 10px; background: var(--surface2); border-radius: 6px; font-size: 12px; overflow-x: auto; }
.rt-e hr { border: none; border-top: 1px solid rgba(var(--slate),0.25); margin: 10px 0; }
.rt-e a { color: var(--teal-solid); text-decoration: underline; }

@media print {
  #tb-bg, #tb-caustics, #om-particles, #om-stars { display: none !important; }
}