/* Written by familydb/web/fallback.py from themes.css and style.css: do not edit by hand.
   Plain day and night colours for a browser without light-dark(). */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --glass: #0E1312;
    --glass-2: #161D1B;
    --glass-line: #2A3632;
    --cursor-glow: rgb(27 154 85 / .35);
    --vs-halo: rgb(27 154 85 / .35);
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-mode="light"])) {
      --glass: #070A09;
      --glass-2: #0E1312;
      --glass-line: #2B3B34;
      --cursor-glow: rgb(109 255 156 / .55);
      --vs-halo: rgb(109 255 156 / .45);
    }
  }
  :root:where([data-mode="dark"]) {
    --glass: #070A09;
    --glass-2: #0E1312;
    --glass-line: #2B3B34;
    --cursor-glow: rgb(109 255 156 / .55);
    --vs-halo: rgb(109 255 156 / .45);
  }
  [data-theme] {
    --p1-soft: #E3EAF5;
    --p1-ink: #2F5D9B;
    --p1-mark: #2F5D9B;
    --p2-soft: #F0E6F4;
    --p2-ink: #7B4790;
    --p2-mark: #7B4790;
    --p3-soft: #F6E3EF;
    --p3-ink: #9C3777;
    --p3-mark: #A83C80;
    --p4-soft: #F6E8D8;
    --p4-ink: #93500E;
    --p4-mark: #A2560E;
    --p5-soft: #DDEFF3;
    --p5-ink: #0A6178;
    --p5-mark: #0B6A84;
    --p6-soft: #E8E6F7;
    --p6-ink: #5448B0;
    --p6-mark: #5448B0;
    --p7-soft: #ECEFD9;
    --p7-ink: #525E17;
    --p7-mark: #59661A;
    --p8-soft: #F1E8E0;
    --p8-ink: #6F4E37;
    --p8-mark: #6F4E37;
    --everyone: #596263;
    --everyone-soft: #ECE8E0;
    --everyone-ink: #4B5657;
    --everyone-mark: #8A806C;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme]:where(:not([data-mode="light"])) {
      --p1-soft: #18243A;
      --p1-ink: #9DBBE8;
      --p1-mark: #9DBBE8;
      --p2-soft: #261D33;
      --p2-ink: #D2A8E2;
      --p2-mark: #D2A8E2;
      --p3-soft: #2E1A28;
      --p3-ink: #EBA6D3;
      --p3-mark: #EBA6D3;
      --p4-soft: #2E2218;
      --p4-ink: #EDB67C;
      --p4-mark: #EDB67C;
      --p5-soft: #12272C;
      --p5-ink: #8DD0E0;
      --p5-mark: #8DD0E0;
      --p6-soft: #201F38;
      --p6-ink: #B5AEF0;
      --p6-mark: #B5AEF0;
      --p7-soft: #212614;
      --p7-ink: #C3D27A;
      --p7-mark: #C3D27A;
      --p8-soft: #2A221B;
      --p8-ink: #D9B79C;
      --p8-mark: #D9B79C;
      --everyone: #5E6A66;
      --everyone-soft: #1C2422;
      --everyone-ink: #CBC5B6;
      --everyone-mark: #A3A69E;
    }
  }
  [data-theme]:where([data-mode="dark"]) {
    --p1-soft: #18243A;
    --p1-ink: #9DBBE8;
    --p1-mark: #9DBBE8;
    --p2-soft: #261D33;
    --p2-ink: #D2A8E2;
    --p2-mark: #D2A8E2;
    --p3-soft: #2E1A28;
    --p3-ink: #EBA6D3;
    --p3-mark: #EBA6D3;
    --p4-soft: #2E2218;
    --p4-ink: #EDB67C;
    --p4-mark: #EDB67C;
    --p5-soft: #12272C;
    --p5-ink: #8DD0E0;
    --p5-mark: #8DD0E0;
    --p6-soft: #201F38;
    --p6-ink: #B5AEF0;
    --p6-mark: #B5AEF0;
    --p7-soft: #212614;
    --p7-ink: #C3D27A;
    --p7-mark: #C3D27A;
    --p8-soft: #2A221B;
    --p8-ink: #D9B79C;
    --p8-mark: #D9B79C;
    --everyone: #5E6A66;
    --everyone-soft: #1C2422;
    --everyone-ink: #CBC5B6;
    --everyone-mark: #A3A69E;
  }
  [data-theme="kitchen"] {
    --paper: #F6F1E7;
    --paper-2: #EFE7D7;
    --card: #FFFCF6;
    --field: #FFFFFF;
    --line: #E2D8C4;
    --line-2: #D3C6AC;
    --edge: #8A806C;
    --ink: #1D2526;
    --ink-2: #4B5657;
    --ink-3: #596263;
    --band: #EFE7D7;
    --band-hi: #FFFCF6;
    --band-line: #E2D8C4;
    --on-band: #1D2526;
    --on-band-2: #4B5657;
    --here: #FFFCF6;
    --on-here: #1D2526;
    --here-icon: #1E5C4F;
    --here-pill: #DCEAE2;
    --link: #1E5C4F;
    --primary: #1E5C4F;
    --primary-hover: #164539;
    --focus: #1D2526;
    --lit: #1E5C4F;
    --today: #1E5C4F;
    --on-today: #FFFFFF;
    --today-rule: #1E5C4F;
    --today-wash: #DCEAE2;
    --ok: #2B7148;
    --amber: #7E5108;
    --red: #B3381F;
    --error-ink: #B3381F;
    --vera: #1E5C4F;
    --vera-bg: #1E5C4F;
    --cursor: #1B9A55;
    --ask-bg: #12382F;
    --lilac: #5448B0;
    --cyan: #0A6178;
    --lemon: #525E17;
    --pink: #9C3777;
    --orange: #93500E;
    --on-bright: #FFFFFF;
    --glow: 0 1px 0 rgb(60 45 20 / .12);
    --glow-hover: 0 4px 12px -4px rgb(60 45 20 / .35);
    --shadow: 0 1px 0 rgb(60 45 20 / .05);
    --pop: 0 8px 22px -14px rgb(60 45 20 / .45);
    --pop-up: 0 -8px 24px -16px rgb(60 45 20 / .5);
    --band-link: #1E5C4F;
    --ok-soft: #DDEFE2;
    --ok-line: #BFDCC8;
    --amber-soft: #FBEFD0;
    --amber-line: #EBD69B;
    --red-soft: #F9E1D9;
    --red-line: #EFC3B6;
    --on-red: #FFFFFF;
    --on-vera: #FFFFFF;
    --vera-soft: #DCEAE2;
    --vera-line: #B9D3C6;
    --ask-ink: #FFFFFF;
    --ask-ink-2: #D2E3DA;
    --ask-rim: inset 0 0 0 1px rgb(255 255 255 / .06), inset 0 0 0 1.5px transparent, inset 0 0 28px transparent, 0 0 26px -10px transparent;
    --ask-edge: transparent;
    --send: #F2C14E;
    --send-2: #E5B035;
    --on-send: #1D2526;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="kitchen"]:where(:not([data-mode="light"])) {
      --paper: #0C100F;
      --paper-2: #121816;
      --card: #161D1B;
      --field: #1B2321;
      --line: #24302C;
      --line-2: #33413C;
      --edge: #7E8C86;
      --ink: #EEE8DA;
      --ink-2: #CBC5B6;
      --ink-3: #A3A69E;
      --band: #121816;
      --band-hi: #161D1B;
      --band-line: #24302C;
      --on-band: #EEE8DA;
      --on-band-2: #CBC5B6;
      --here: #161D1B;
      --on-here: #EEE8DA;
      --here-icon: #6DFF9C;
      --here-pill: #10241A;
      --link: #8BD3B4;
      --primary: #2D7462;
      --primary-hover: #24604F;
      --focus: #EEE8DA;
      --lit: #6DFF9C;
      --today: #6DFF9C;
      --on-today: #0C100F;
      --today-rule: #6DFF9C;
      --today-wash: #10241A;
      --ok: #7FE3A5;
      --amber: #F5B94A;
      --red: #FF8B74;
      --error-ink: #FF8B74;
      --vera: #6DFF9C;
      --vera-bg: #4FE08A;
      --cursor: #6DFF9C;
      --ask-bg: #0F2A22;
      --lilac: #B5AEF0;
      --cyan: #8DD0E0;
      --lemon: #C3D27A;
      --pink: #EBA6D3;
      --orange: #EDB67C;
      --on-bright: #0C100F;
      --glow: 0 1px 0 rgb(0 0 0 / .5);
      --glow-hover: 0 4px 12px -4px rgb(0 0 0 / .7);
      --shadow: 0 1px 0 rgb(0 0 0 / .4);
      --pop: 0 8px 22px -14px rgb(0 0 0 / .9);
      --pop-up: 0 -8px 24px -16px rgb(0 0 0 / .8);
      --band-link: #8BD3B4;
      --ok-soft: #11261B;
      --ok-line: #24503A;
      --amber-soft: #2A2112;
      --amber-line: #5E4620;
      --red-soft: #33191A;
      --red-line: #5C2E2B;
      --on-red: #0C100F;
      --on-vera: #0C100F;
      --vera-soft: #10241A;
      --vera-line: #22513A;
      --ask-ink: #EEE8DA;
      --ask-ink-2: #C3D2CA;
      --ask-rim: inset 0 0 0 1px transparent, inset 0 0 0 1.5px #3E8A66, inset 0 0 28px rgb(109 255 156 / .08), 0 0 26px -10px rgb(109 255 156 / .45);
      --ask-edge: #7E8C86;
      --send: #E0B04A;
      --send-2: #F0C35C;
      --on-send: #0C100F;
    }
  }
  [data-theme="kitchen"]:where([data-mode="dark"]) {
    --paper: #0C100F;
    --paper-2: #121816;
    --card: #161D1B;
    --field: #1B2321;
    --line: #24302C;
    --line-2: #33413C;
    --edge: #7E8C86;
    --ink: #EEE8DA;
    --ink-2: #CBC5B6;
    --ink-3: #A3A69E;
    --band: #121816;
    --band-hi: #161D1B;
    --band-line: #24302C;
    --on-band: #EEE8DA;
    --on-band-2: #CBC5B6;
    --here: #161D1B;
    --on-here: #EEE8DA;
    --here-icon: #6DFF9C;
    --here-pill: #10241A;
    --link: #8BD3B4;
    --primary: #2D7462;
    --primary-hover: #24604F;
    --focus: #EEE8DA;
    --lit: #6DFF9C;
    --today: #6DFF9C;
    --on-today: #0C100F;
    --today-rule: #6DFF9C;
    --today-wash: #10241A;
    --ok: #7FE3A5;
    --amber: #F5B94A;
    --red: #FF8B74;
    --error-ink: #FF8B74;
    --vera: #6DFF9C;
    --vera-bg: #4FE08A;
    --cursor: #6DFF9C;
    --ask-bg: #0F2A22;
    --lilac: #B5AEF0;
    --cyan: #8DD0E0;
    --lemon: #C3D27A;
    --pink: #EBA6D3;
    --orange: #EDB67C;
    --on-bright: #0C100F;
    --glow: 0 1px 0 rgb(0 0 0 / .5);
    --glow-hover: 0 4px 12px -4px rgb(0 0 0 / .7);
    --shadow: 0 1px 0 rgb(0 0 0 / .4);
    --pop: 0 8px 22px -14px rgb(0 0 0 / .9);
    --pop-up: 0 -8px 24px -16px rgb(0 0 0 / .8);
    --band-link: #8BD3B4;
    --ok-soft: #11261B;
    --ok-line: #24503A;
    --amber-soft: #2A2112;
    --amber-line: #5E4620;
    --red-soft: #33191A;
    --red-line: #5C2E2B;
    --on-red: #0C100F;
    --on-vera: #0C100F;
    --vera-soft: #10241A;
    --vera-line: #22513A;
    --ask-ink: #EEE8DA;
    --ask-ink-2: #C3D2CA;
    --ask-rim: inset 0 0 0 1px transparent, inset 0 0 0 1.5px #3E8A66, inset 0 0 28px rgb(109 255 156 / .08), 0 0 26px -10px rgb(109 255 156 / .45);
    --ask-edge: #7E8C86;
    --send: #E0B04A;
    --send-2: #F0C35C;
    --on-send: #0C100F;
  }
  :root[data-theme="phosphor"] {
    --glass: #070A09;
    --glass-2: #0E1312;
    --glass-line: #2B3B34;
    --cursor-glow: rgb(109 255 156 / .55);
    --vs-halo: rgb(109 255 156 / .45);
  }
  [data-theme="phosphor"] {
    --p1-soft: #18243A;
    --p1-ink: #9DBBE8;
    --p1-mark: #9DBBE8;
    --p2-soft: #261D33;
    --p2-ink: #D2A8E2;
    --p2-mark: #D2A8E2;
    --p3-soft: #2E1A28;
    --p3-ink: #EBA6D3;
    --p3-mark: #EBA6D3;
    --p4-soft: #2E2218;
    --p4-ink: #EDB67C;
    --p4-mark: #EDB67C;
    --p5-soft: #12272C;
    --p5-ink: #8DD0E0;
    --p5-mark: #8DD0E0;
    --p6-soft: #201F38;
    --p6-ink: #B5AEF0;
    --p6-mark: #B5AEF0;
    --p7-soft: #212614;
    --p7-ink: #C3D27A;
    --p7-mark: #C3D27A;
    --p8-soft: #2A221B;
    --p8-ink: #D9B79C;
    --p8-mark: #D9B79C;
    --everyone: #5E6A66;
    --everyone-soft: #1C2422;
    --everyone-ink: #CBC5B6;
    --everyone-mark: #A3A69E;
  }
  :root[data-theme="afterglow"] {
    --glass: #070A09;
    --glass-2: #0E1312;
    --glass-line: #2B3B34;
    --cursor-glow: rgb(109 255 156 / .55);
    --vs-halo: rgb(109 255 156 / .45);
  }
  [data-theme="afterglow"] {
    --p1-soft: #18243A;
    --p1-ink: #9DBBE8;
    --p1-mark: #9DBBE8;
    --p2-soft: #261D33;
    --p2-ink: #D2A8E2;
    --p2-mark: #D2A8E2;
    --p3-soft: #2E1A28;
    --p3-ink: #EBA6D3;
    --p3-mark: #EBA6D3;
    --p4-soft: #2E2218;
    --p4-ink: #EDB67C;
    --p4-mark: #EDB67C;
    --p5-soft: #12272C;
    --p5-ink: #8DD0E0;
    --p5-mark: #8DD0E0;
    --p6-soft: #201F38;
    --p6-ink: #B5AEF0;
    --p6-mark: #B5AEF0;
    --p7-soft: #212614;
    --p7-ink: #C3D27A;
    --p7-mark: #C3D27A;
    --p8-soft: #2A221B;
    --p8-ink: #D9B79C;
    --p8-mark: #D9B79C;
    --everyone: #5E6A66;
    --everyone-soft: #1C2422;
    --everyone-ink: #CBC5B6;
    --everyone-mark: #A3A69E;
  }
  [data-theme="rail"] {
    --paper: #F5F6F8;
    --paper-2: #E7EAEF;
    --card: #FFFFFF;
    --field: #FFFFFF;
    --line: #C9CFD8;
    --line-2: #A9B2C0;
    --edge: #6C7789;
    --ink: #0E1726;
    --ink-2: #344054;
    --ink-3: #535E70;
    --band: #0B2C69;
    --band-hi: #17397A;
    --band-line: #26478A;
    --on-band: #FFFFFF;
    --on-band-2: #BCC8E2;
    --here: #FFC917;
    --on-here: #0E1726;
    --here-icon: #0E1726;
    --here-pill: #FFC917;
    --lilac: #532CA8;
    --cyan: #1A5DAE;
    --lemon: #6E5A2C;
    --amber: #A1430B;
    --pink: #844C79;
    --orange: #9E4700;
    --red: #B42318;
    --on-bright: #FFFFFF;
    --ok: #17703F;
    --vera: #0A6A4B;
    --vera-bg: #0B8457;
    --cursor: #12945A;
    --link: #163F8E;
    --primary: #1747A3;
    --on-primary: #FFFFFF;
    --focus: #1E58C8;
    --lit: #1E58C8;
    --today: #FFC917;
    --on-today: #0E1726;
    --today-rule: #7F5F00;
    --today-wash: #FFF5CF;
    --person: #256FC8;
    --on-person: #FFFFFF;
    --error-ink: #B42318;
    --primary-hover: color-mix(in srgb, var(--primary) 86%, #000);
    --glow: 0 1px 0 rgb(14 23 38 / 0.12);
    --glow-hover: 0 4px 12px -4px rgb(14 23 38 / 0.35);
    --shadow: 0 1px 0 rgb(14 23 38 / 0.04), 0 10px 26px -20px rgb(14 23 38 / 0.3);
    --pop: 0 20px 40px -16px rgb(14 23 38 / 0.35);
    --pop-up: 0 -6px 24px rgb(14 23 38 / 0.14);
    --hi: transparent;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="rail"]:where(:not([data-mode="light"])) {
      --paper: #0D1420;
      --paper-2: #182233;
      --card: #131C28;
      --field: #162031;
      --line: #283347;
      --line-2: #3B4758;
      --edge: #7E899C;
      --ink: #EEF1F6;
      --ink-2: #C2CAD7;
      --ink-3: #9AA4B6;
      --band: #13336F;
      --band-hi: #1E4183;
      --band-line: #2D4F90;
      --on-band: #F4F6FA;
      --on-band-2: #C3CEE6;
      --here: #FFD23A;
      --on-here: #0D1420;
      --here-icon: #0D1420;
      --here-pill: #FFD23A;
      --lilac: #CFB6FE;
      --cyan: #A8C0FE;
      --lemon: #DCC291;
      --amber: #FFA766;
      --pink: #EDB1DD;
      --orange: #FEB383;
      --red: #FF8B74;
      --on-bright: #0D1420;
      --ok: #7FE3A5;
      --vera: #6DFF9C;
      --vera-bg: #4FE08A;
      --cursor: #6DFF9C;
      --link: #A9C3FF;
      --primary: #A9C3FF;
      --on-primary: #0D1420;
      --focus: #A9C3FF;
      --lit: #A9C3FF;
      --today: #FFD23A;
      --on-today: #0D1420;
      --today-rule: #FFD23A;
      --today-wash: #262112;
      --person: #7888D1;
      --on-person: #0D1420;
      --error-ink: #FF8B74;
      --primary-hover: color-mix(in srgb, var(--primary) 84%, #fff);
      --glow: 0 1px 0 rgb(0 0 0 / 0.5);
      --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
      --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
      --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
      --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
      --hi: rgb(255 255 255 / 0.04);
    }
  }
  [data-theme="rail"]:where([data-mode="dark"]) {
    --paper: #0D1420;
    --paper-2: #182233;
    --card: #131C28;
    --field: #162031;
    --line: #283347;
    --line-2: #3B4758;
    --edge: #7E899C;
    --ink: #EEF1F6;
    --ink-2: #C2CAD7;
    --ink-3: #9AA4B6;
    --band: #13336F;
    --band-hi: #1E4183;
    --band-line: #2D4F90;
    --on-band: #F4F6FA;
    --on-band-2: #C3CEE6;
    --here: #FFD23A;
    --on-here: #0D1420;
    --here-icon: #0D1420;
    --here-pill: #FFD23A;
    --lilac: #CFB6FE;
    --cyan: #A8C0FE;
    --lemon: #DCC291;
    --amber: #FFA766;
    --pink: #EDB1DD;
    --orange: #FEB383;
    --red: #FF8B74;
    --on-bright: #0D1420;
    --ok: #7FE3A5;
    --vera: #6DFF9C;
    --vera-bg: #4FE08A;
    --cursor: #6DFF9C;
    --link: #A9C3FF;
    --primary: #A9C3FF;
    --on-primary: #0D1420;
    --focus: #A9C3FF;
    --lit: #A9C3FF;
    --today: #FFD23A;
    --on-today: #0D1420;
    --today-rule: #FFD23A;
    --today-wash: #262112;
    --person: #7888D1;
    --on-person: #0D1420;
    --error-ink: #FF8B74;
    --primary-hover: color-mix(in srgb, var(--primary) 84%, #fff);
    --glow: 0 1px 0 rgb(0 0 0 / 0.5);
    --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
    --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
    --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
    --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
    --hi: rgb(255 255 255 / 0.04);
  }
  [data-theme="enamel"] {
    --paper: #ECE9E5;
    --paper-2: #DFDCD7;
    --card: #FAF9F7;
    --field: #FAF9F7;
    --line: #C9C5C0;
    --line-2: #B0ACA6;
    --edge: #797570;
    --ink: #162025;
    --ink-2: #414B51;
    --ink-3: #586065;
    --band: #0D2D40;
    --band-hi: #1D3D50;
    --band-line: #2B495C;
    --on-band-2: #BCCBD6;
    --on-here: #0D2D40;
    --here-icon: #0D2D40;
    --lilac: #59508F;
    --cyan: #3B5993;
    --lemon: #6C5901;
    --amber: #84571A;
    --pink: #7A4474;
    --orange: #7F4E07;
    --red: #AF3126;
    --on-bright: #FAF9F7;
    --ok: #276C3F;
    --vera: #0A6A4B;
    --vera-bg: #0B8457;
    --cursor: #12945A;
    --link: #162025;
    --primary: #162025;
    --on-primary: #FAF9F7;
    --focus: #162025;
    --today: #0B8457;
    --on-today: #FFFFFF;
    --today-rule: #0A6A4B;
    --today-wash: #D6EDDF;
    --on-person: #162025;
    --error-ink: #AF3126;
    --primary-hover: color-mix(in srgb, var(--primary) 86%, #000);
    --glow: 0 1px 0 rgb(14 23 38 / 0.12);
    --glow-hover: 0 4px 12px -4px rgb(14 23 38 / 0.35);
    --shadow: 0 1px 0 rgb(14 23 38 / 0.04), 0 10px 26px -20px rgb(14 23 38 / 0.3);
    --pop: 0 20px 40px -16px rgb(14 23 38 / 0.35);
    --pop-up: 0 -6px 24px rgb(14 23 38 / 0.14);
    --hi: transparent;
    --on-vera: #FFFFFF;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="enamel"]:where(:not([data-mode="light"])) {
      --paper: #161513;
      --paper-2: #22201E;
      --card: #1C1B19;
      --field: #1C1B19;
      --line: #34312E;
      --line-2: #484440;
      --edge: #847F7A;
      --ink: #F0ECE7;
      --ink-2: #CECAC4;
      --ink-3: #AEAAA5;
      --band: #143344;
      --band-hi: #234153;
      --band-line: #304D5F;
      --on-band-2: #BFCFD9;
      --on-here: #143344;
      --here-icon: #143344;
      --lilac: #BBB7EC;
      --cyan: #A4BEEF;
      --lemon: #CDBE86;
      --amber: #EDBB64;
      --pink: #D3B1CE;
      --orange: #DEB58A;
      --red: #F58D79;
      --on-bright: #161513;
      --ok: #85E3A0;
      --vera: #6DFF9C;
      --vera-bg: #4FE08A;
      --cursor: #6DFF9C;
      --link: #F0ECE7;
      --primary: #F0ECE7;
      --on-primary: #161513;
      --focus: #F0ECE7;
      --today: #6DFF9C;
      --on-today: #102719;
      --today-rule: #6DFF9C;
      --today-wash: #102719;
      --on-person: #161513;
      --error-ink: #F58D79;
      --primary-hover: color-mix(in srgb, var(--primary) 84%, #fff);
      --glow: 0 1px 0 rgb(0 0 0 / 0.5);
      --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
      --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
      --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
      --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
      --hi: rgb(255 255 255 / 0.04);
      --on-vera: #161513;
    }
  }
  [data-theme="enamel"]:where([data-mode="dark"]) {
    --paper: #161513;
    --paper-2: #22201E;
    --card: #1C1B19;
    --field: #1C1B19;
    --line: #34312E;
    --line-2: #484440;
    --edge: #847F7A;
    --ink: #F0ECE7;
    --ink-2: #CECAC4;
    --ink-3: #AEAAA5;
    --band: #143344;
    --band-hi: #234153;
    --band-line: #304D5F;
    --on-band-2: #BFCFD9;
    --on-here: #143344;
    --here-icon: #143344;
    --lilac: #BBB7EC;
    --cyan: #A4BEEF;
    --lemon: #CDBE86;
    --amber: #EDBB64;
    --pink: #D3B1CE;
    --orange: #DEB58A;
    --red: #F58D79;
    --on-bright: #161513;
    --ok: #85E3A0;
    --vera: #6DFF9C;
    --vera-bg: #4FE08A;
    --cursor: #6DFF9C;
    --link: #F0ECE7;
    --primary: #F0ECE7;
    --on-primary: #161513;
    --focus: #F0ECE7;
    --today: #6DFF9C;
    --on-today: #102719;
    --today-rule: #6DFF9C;
    --today-wash: #102719;
    --on-person: #161513;
    --error-ink: #F58D79;
    --primary-hover: color-mix(in srgb, var(--primary) 84%, #fff);
    --glow: 0 1px 0 rgb(0 0 0 / 0.5);
    --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
    --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
    --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
    --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
    --hi: rgb(255 255 255 / 0.04);
    --on-vera: #161513;
  }
  [data-theme="fjord"] {
    --paper: #EEF2F6;
    --paper-2: #DFE6ED;
    --card: #FFFFFF;
    --field: #FFFFFF;
    --line: #C3CDD7;
    --line-2: #A6B2BF;
    --edge: #6B7886;
    --ink: #161C24;
    --ink-2: #37424F;
    --ink-3: #52606E;
    --band: #252B4A;
    --band-hi: #323A60;
    --band-line: #3B4268;
    --on-band: #FFFFFF;
    --here: #FFFFFF;
    --on-here: #252B4A;
    --here-icon: #252B4A;
    --here-pill: #FFFFFF;
    --lilac: #525FA0;
    --cyan: #1867BC;
    --lemon: #6C691F;
    --amber: #7A4D00;
    --pink: #775C8A;
    --orange: #9D5400;
    --red: #B42318;
    --on-bright: #FFFFFF;
    --ok: #17703F;
    --vera: #0A6A4B;
    --vera-bg: #0B8457;
    --cursor: #12945A;
    --link: #2A3C8F;
    --primary: #2C3A80;
    --on-primary: #FFFFFF;
    --focus: #2F55D4;
    --lit: #2F55D4;
    --today: #0B8457;
    --on-today: #FFFFFF;
    --today-rule: #0A6A4B;
    --today-wash: #E3F3EA;
    --on-person: #161C24;
    --error-ink: #B42318;
    --primary-hover: color-mix(in srgb, var(--primary) 86%, #000);
    --glow: 0 1px 0 rgb(14 23 38 / 0.12);
    --glow-hover: 0 4px 12px -4px rgb(14 23 38 / 0.35);
    --shadow: 0 1px 0 rgb(14 23 38 / 0.04), 0 10px 26px -20px rgb(14 23 38 / 0.3);
    --pop: 0 20px 40px -16px rgb(14 23 38 / 0.35);
    --pop-up: 0 -6px 24px rgb(14 23 38 / 0.14);
    --hi: transparent;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="fjord"]:where(:not([data-mode="light"])) {
      --paper: #0F141B;
      --paper-2: #1A212B;
      --card: #161C25;
      --field: #161C25;
      --line: #2A323D;
      --line-2: #3C4652;
      --edge: #7A8796;
      --ink: #E6ECF2;
      --ink-2: #BCC6D1;
      --ink-3: #94A0AD;
      --band: #272E52;
      --band-hi: #333B66;
      --band-line: #3C4472;
      --on-band: #F2F4FA;
      --here: #F2F4FA;
      --on-here: #272E52;
      --here-icon: #272E52;
      --here-pill: #F2F4FA;
      --lilac: #A2ACF4;
      --cyan: #8BB0FF;
      --lemon: #BAB365;
      --amber: #F2BA55;
      --pink: #C3A6D8;
      --orange: #F49C4D;
      --red: #FF8B74;
      --on-bright: #0F141B;
      --ok: #7FE3A5;
      --vera: #6DFF9C;
      --vera-bg: #4FE08A;
      --cursor: #6DFF9C;
      --link: #AFC0FF;
      --primary: #B4C3FF;
      --on-primary: #0F141B;
      --focus: #9FB6FF;
      --lit: #9FB6FF;
      --today: #6DFF9C;
      --on-today: #11241A;
      --today-rule: #6DFF9C;
      --today-wash: #11241A;
      --on-person: #0F141B;
      --error-ink: #FF8B74;
      --primary-hover: color-mix(in srgb, var(--primary) 84%, #fff);
      --glow: 0 1px 0 rgb(0 0 0 / 0.5);
      --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
      --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
      --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
      --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
      --hi: rgb(255 255 255 / 0.04);
    }
  }
  [data-theme="fjord"]:where([data-mode="dark"]) {
    --paper: #0F141B;
    --paper-2: #1A212B;
    --card: #161C25;
    --field: #161C25;
    --line: #2A323D;
    --line-2: #3C4652;
    --edge: #7A8796;
    --ink: #E6ECF2;
    --ink-2: #BCC6D1;
    --ink-3: #94A0AD;
    --band: #272E52;
    --band-hi: #333B66;
    --band-line: #3C4472;
    --on-band: #F2F4FA;
    --here: #F2F4FA;
    --on-here: #272E52;
    --here-icon: #272E52;
    --here-pill: #F2F4FA;
    --lilac: #A2ACF4;
    --cyan: #8BB0FF;
    --lemon: #BAB365;
    --amber: #F2BA55;
    --pink: #C3A6D8;
    --orange: #F49C4D;
    --red: #FF8B74;
    --on-bright: #0F141B;
    --ok: #7FE3A5;
    --vera: #6DFF9C;
    --vera-bg: #4FE08A;
    --cursor: #6DFF9C;
    --link: #AFC0FF;
    --primary: #B4C3FF;
    --on-primary: #0F141B;
    --focus: #9FB6FF;
    --lit: #9FB6FF;
    --today: #6DFF9C;
    --on-today: #11241A;
    --today-rule: #6DFF9C;
    --today-wash: #11241A;
    --on-person: #0F141B;
    --error-ink: #FF8B74;
    --primary-hover: color-mix(in srgb, var(--primary) 84%, #fff);
    --glow: 0 1px 0 rgb(0 0 0 / 0.5);
    --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
    --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
    --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
    --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
    --hi: rgb(255 255 255 / 0.04);
  }
  [data-theme="ink"] {
    --paper: #FFFFFF;
    --paper-2: #F0F0F0;
    --card: #FFFFFF;
    --field: #FFFFFF;
    --line: #D0D0D0;
    --line-2: #ABABAB;
    --edge: #767676;
    --ink: #000000;
    --ink-2: #333333;
    --ink-3: #5C5C5C;
    --band-hi: #1A1A1A;
    --band-line: #333333;
    --lilac: #7B35E8;
    --cyan: #2A16D6;
    --lemon: #6F5900;
    --amber: #000000;
    --pink: #6B0781;
    --orange: #9E4D00;
    --red: #D60000;
    --on-bright: #FFFFFF;
    --ok: #000000;
    --vera: #0A6A4B;
    --vera-bg: #0B8457;
    --cursor: #12945A;
    --link: #000000;
    --primary: #000000;
    --on-primary: #FFFFFF;
    --focus: #000000;
    --lit: #2A16D6;
    --today: #0B8457;
    --on-today: #FFFFFF;
    --today-rule: #0A6A4B;
    --today-wash: #E3F3EA;
    --person: #2A16D6;
    --error-ink: #D60000;
    --primary-hover: #333333;
    --glow: 0 1px 0 rgb(14 23 38 / 0.12);
    --glow-hover: 0 4px 12px -4px rgb(14 23 38 / 0.35);
    --shadow: 0 1px 0 rgb(14 23 38 / 0.04), 0 10px 26px -20px rgb(14 23 38 / 0.3);
    --pop: 0 20px 40px -16px rgb(14 23 38 / 0.35);
    --pop-up: 0 -6px 24px rgb(14 23 38 / 0.14);
    --hi: transparent;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="ink"]:where(:not([data-mode="light"])) {
      --paper: #121212;
      --paper-2: #1F1F1F;
      --card: #1A1A1A;
      --field: #1C1C1C;
      --line: #333333;
      --line-2: #4D4D4D;
      --edge: #8A8A8A;
      --ink: #FFFFFF;
      --ink-2: #CCCCCC;
      --ink-3: #A3A3A3;
      --band-hi: #1C1C1C;
      --band-line: #3D3D3D;
      --lilac: #C2A6FF;
      --cyan: #A9B4FF;
      --lemon: #FFD84F;
      --amber: #FFFFFF;
      --pink: #DDA4F0;
      --orange: #FFA868;
      --red: #FF5A4F;
      --on-bright: #000000;
      --ok: #FFFFFF;
      --vera: #6DFF9C;
      --vera-bg: #4FE08A;
      --cursor: #6DFF9C;
      --link: #FFFFFF;
      --primary: #FFFFFF;
      --on-primary: #000000;
      --focus: #FFFFFF;
      --lit: #A9B4FF;
      --today: #6DFF9C;
      --on-today: #121212;
      --today-rule: #6DFF9C;
      --today-wash: #11241A;
      --person: #5A49E2;
      --error-ink: #FF5A4F;
      --primary-hover: #E0E0E0;
      --glow: 0 1px 0 rgb(0 0 0 / 0.5);
      --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
      --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
      --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
      --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
      --hi: rgb(255 255 255 / 0.04);
    }
  }
  [data-theme="ink"]:where([data-mode="dark"]) {
    --paper: #121212;
    --paper-2: #1F1F1F;
    --card: #1A1A1A;
    --field: #1C1C1C;
    --line: #333333;
    --line-2: #4D4D4D;
    --edge: #8A8A8A;
    --ink: #FFFFFF;
    --ink-2: #CCCCCC;
    --ink-3: #A3A3A3;
    --band-hi: #1C1C1C;
    --band-line: #3D3D3D;
    --lilac: #C2A6FF;
    --cyan: #A9B4FF;
    --lemon: #FFD84F;
    --amber: #FFFFFF;
    --pink: #DDA4F0;
    --orange: #FFA868;
    --red: #FF5A4F;
    --on-bright: #000000;
    --ok: #FFFFFF;
    --vera: #6DFF9C;
    --vera-bg: #4FE08A;
    --cursor: #6DFF9C;
    --link: #FFFFFF;
    --primary: #FFFFFF;
    --on-primary: #000000;
    --focus: #FFFFFF;
    --lit: #A9B4FF;
    --today: #6DFF9C;
    --on-today: #121212;
    --today-rule: #6DFF9C;
    --today-wash: #11241A;
    --person: #5A49E2;
    --error-ink: #FF5A4F;
    --primary-hover: #E0E0E0;
    --glow: 0 1px 0 rgb(0 0 0 / 0.5);
    --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
    --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
    --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
    --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
    --hi: rgb(255 255 255 / 0.04);
  }
  [data-theme="homecomputer"] {
    --paper: #E3E1DC;
    --paper-2: #D4D1CA;
    --card: #F6F5F2;
    --field: #F8F7F4;
    --line: #BAB6AE;
    --line-2: #A29D94;
    --edge: #6C665E;
    --ink: #1D1915;
    --ink-2: #3D3731;
    --ink-3: #575049;
    --band: #231C17;
    --band-hi: #322921;
    --band-line: #3C3229;
    --on-band: #F3F0EA;
    --on-band-2: #C4BBAF;
    --here: #F07C1E;
    --on-here: #1D1915;
    --here-icon: #1D1915;
    --here-pill: #F07C1E;
    --lilac: #6A47A0;
    --cyan: #2452C2;
    --lemon: #7C4F00;
    --amber: #8F3E00;
    --pink: #4E2A6E;
    --orange: #8F3E00;
    --red: #B0241A;
    --on-bright: #F6F5F2;
    --ok: #17703F;
    --vera: #0A6A4B;
    --vera-bg: #0B8457;
    --cursor: #12945A;
    --link: #1D1915;
    --primary: #F07C1E;
    --on-primary: #1D1915;
    --focus: #1D1915;
    --lit: #F07C1E;
    --today: #F07C1E;
    --on-today: #1D1915;
    --today-rule: #9A4300;
    --today-wash: #EDD8C0;
    --person: #2F5FD0;
    --error-ink: #B0241A;
    --primary-hover: #F69540;
    --glow: 0 1px 0 rgb(14 23 38 / 0.12);
    --glow-hover: 0 4px 12px -4px rgb(14 23 38 / 0.35);
    --shadow: 0 1px 0 rgb(14 23 38 / 0.04), 0 10px 26px -20px rgb(14 23 38 / 0.3);
    --pop: 0 20px 40px -16px rgb(14 23 38 / 0.35);
    --pop-up: 0 -6px 24px rgb(14 23 38 / 0.14);
    --hi: transparent;
    --on-vera: #FFFFFF;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="homecomputer"]:where(:not([data-mode="light"])) {
      --paper: #171513;
      --paper-2: #23201C;
      --card: #1E1B18;
      --field: #211E1A;
      --line: #37322C;
      --line-2: #4B453E;
      --edge: #8A8378;
      --ink: #EEEAE3;
      --ink-2: #CBC4BA;
      --ink-3: #A59D92;
      --band: #2E251E;
      --band-hi: #3B3027;
      --band-line: #463A30;
      --on-band: #F5F1EA;
      --on-band-2: #C9BFB2;
      --here: #F57F22;
      --on-here: #171513;
      --here-icon: #171513;
      --here-pill: #F57F22;
      --lilac: #CDB5FA;
      --cyan: #9EBBFF;
      --lemon: #EBC15A;
      --amber: #FF9B4D;
      --pink: #C9B0E6;
      --orange: #FF9B4D;
      --red: #FF8B74;
      --on-bright: #171513;
      --ok: #7FE3A5;
      --vera: #6DFF9C;
      --vera-bg: #4FE08A;
      --cursor: #6DFF9C;
      --link: #EEEAE3;
      --primary: #F57F22;
      --on-primary: #171513;
      --focus: #EEEAE3;
      --lit: #F57F22;
      --today: #F57F22;
      --on-today: #171513;
      --today-rule: #F57F22;
      --today-wash: #2B1F12;
      --person: #3565D7;
      --error-ink: #FF8B74;
      --primary-hover: #FF9A4A;
      --glow: 0 1px 0 rgb(0 0 0 / 0.5);
      --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
      --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
      --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
      --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
      --hi: rgb(255 255 255 / 0.04);
      --on-vera: #171513;
    }
  }
  [data-theme="homecomputer"]:where([data-mode="dark"]) {
    --paper: #171513;
    --paper-2: #23201C;
    --card: #1E1B18;
    --field: #211E1A;
    --line: #37322C;
    --line-2: #4B453E;
    --edge: #8A8378;
    --ink: #EEEAE3;
    --ink-2: #CBC4BA;
    --ink-3: #A59D92;
    --band: #2E251E;
    --band-hi: #3B3027;
    --band-line: #463A30;
    --on-band: #F5F1EA;
    --on-band-2: #C9BFB2;
    --here: #F57F22;
    --on-here: #171513;
    --here-icon: #171513;
    --here-pill: #F57F22;
    --lilac: #CDB5FA;
    --cyan: #9EBBFF;
    --lemon: #EBC15A;
    --amber: #FF9B4D;
    --pink: #C9B0E6;
    --orange: #FF9B4D;
    --red: #FF8B74;
    --on-bright: #171513;
    --ok: #7FE3A5;
    --vera: #6DFF9C;
    --vera-bg: #4FE08A;
    --cursor: #6DFF9C;
    --link: #EEEAE3;
    --primary: #F57F22;
    --on-primary: #171513;
    --focus: #EEEAE3;
    --lit: #F57F22;
    --today: #F57F22;
    --on-today: #171513;
    --today-rule: #F57F22;
    --today-wash: #2B1F12;
    --person: #3565D7;
    --error-ink: #FF8B74;
    --primary-hover: #FF9A4A;
    --glow: 0 1px 0 rgb(0 0 0 / 0.5);
    --glow-hover: 0 4px 12px -4px rgb(0 0 0 / 0.7);
    --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
    --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
    --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
    --hi: rgb(255 255 255 / 0.04);
    --on-vera: #171513;
  }
  [data-theme="midnight"] {
    --paper: #EEF1F7;
    --paper-2: #E0E4EE;
    --card: #FFFFFF;
    --field: #FFFFFF;
    --line: #C4CAD8;
    --line-2: #A8B0C3;
    --edge: #6C7489;
    --ink: #0B1020;
    --ink-2: #353D52;
    --ink-3: #4E576D;
    --band: #0A0F1E;
    --band-hi: #182036;
    --band-line: #222A42;
    --on-band: #FFFFFF;
    --on-band-2: #AEB7CC;
    --here: #FFFFFF;
    --on-here: #0A0F1E;
    --here-icon: #0A0F1E;
    --here-pill: #FFFFFF;
    --lilac: #5144A0;
    --cyan: #425FA7;
    --lemon: #7D5C04;
    --amber: #8A4B00;
    --pink: #614978;
    --orange: #8D5320;
    --red: #B42318;
    --on-bright: #FFFFFF;
    --ok: #17703F;
    --vera: #0A6A4B;
    --vera-bg: #0B8457;
    --cursor: #12945A;
    --link: #0B1020;
    --primary: #0B1020;
    --on-primary: #FFFFFF;
    --focus: #2D4FC4;
    --lit: #2D4FC4;
    --today: #0B8457;
    --on-today: #FFFFFF;
    --today-rule: #0A6A4B;
    --today-wash: #E1F2E8;
    --error-ink: #B42318;
    --primary-hover: #252E48;
    --shadow: 0 1px 0 rgb(14 23 38 / 0.04), 0 10px 26px -20px rgb(14 23 38 / 0.3);
    --pop: 0 20px 40px -16px rgb(14 23 38 / 0.35);
    --pop-up: 0 -6px 24px rgb(14 23 38 / 0.14);
    --hi: transparent;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="midnight"]:where(:not([data-mode="light"])) {
      --paper: #0B1020;
      --paper-2: #161D30;
      --card: #121A2B;
      --field: #0E1526;
      --line: #262F47;
      --line-2: #36405C;
      --edge: #7884A3;
      --ink: #E3E8F3;
      --ink-2: #B7C0D5;
      --ink-3: #939DB6;
      --band: #04060D;
      --band-hi: #121829;
      --band-line: #1C2338;
      --on-band: #EEF1F8;
      --on-band-2: #A6B0C8;
      --here: #EEF1F8;
      --on-here: #04060D;
      --here-icon: #04060D;
      --here-pill: #EEF1F8;
      --lilac: #C5C4FE;
      --cyan: #B2CAFF;
      --lemon: #F5C250;
      --amber: #F6B04A;
      --pink: #D9BCF6;
      --orange: #F6BD92;
      --red: #FF7369;
      --on-bright: #0B1020;
      --ok: #7FE3A5;
      --vera: #6DFF9C;
      --vera-bg: #4FE08A;
      --cursor: #6DFF9C;
      --link: #E3E8F3;
      --primary: #E3E8F3;
      --on-primary: #0B1020;
      --focus: #9DB9FF;
      --lit: #9DB9FF;
      --today: #6DFF9C;
      --on-today: #0B1020;
      --today-rule: #6DFF9C;
      --today-wash: #0E2219;
      --error-ink: #FF7369;
      --primary-hover: #FFFFFF;
      --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
      --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
      --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
      --hi: rgb(255 255 255 / 0.04);
    }
  }
  [data-theme="midnight"]:where([data-mode="dark"]) {
    --paper: #0B1020;
    --paper-2: #161D30;
    --card: #121A2B;
    --field: #0E1526;
    --line: #262F47;
    --line-2: #36405C;
    --edge: #7884A3;
    --ink: #E3E8F3;
    --ink-2: #B7C0D5;
    --ink-3: #939DB6;
    --band: #04060D;
    --band-hi: #121829;
    --band-line: #1C2338;
    --on-band: #EEF1F8;
    --on-band-2: #A6B0C8;
    --here: #EEF1F8;
    --on-here: #04060D;
    --here-icon: #04060D;
    --here-pill: #EEF1F8;
    --lilac: #C5C4FE;
    --cyan: #B2CAFF;
    --lemon: #F5C250;
    --amber: #F6B04A;
    --pink: #D9BCF6;
    --orange: #F6BD92;
    --red: #FF7369;
    --on-bright: #0B1020;
    --ok: #7FE3A5;
    --vera: #6DFF9C;
    --vera-bg: #4FE08A;
    --cursor: #6DFF9C;
    --link: #E3E8F3;
    --primary: #E3E8F3;
    --on-primary: #0B1020;
    --focus: #9DB9FF;
    --lit: #9DB9FF;
    --today: #6DFF9C;
    --on-today: #0B1020;
    --today-rule: #6DFF9C;
    --today-wash: #0E2219;
    --error-ink: #FF7369;
    --primary-hover: #FFFFFF;
    --shadow: 0 1px 0 rgb(255 255 255 / 0.03), 0 10px 26px -20px rgb(0 0 0 / 0.9);
    --pop: 0 20px 40px -16px rgb(0 0 0 / 0.9);
    --pop-up: 0 -6px 24px rgb(0 0 0 / 0.45);
    --hi: rgb(255 255 255 / 0.04);
  }
}