/* ==========================================================================
   THEMES — 5 palettes x 2 brightness modes x 2 contrast levels
   --------------------------------------------------------------------------
   HOW IT WORKS
     index.html holds hidden inputs inside <body>, so `body:has(...)` can
     read them and swap variables. Labels elsewhere flip the inputs.
       th-1 .. th-5   palette
       mode-dark      brightness
       con-2          more contrast

   HOW TO RETHEME
     Touch only the five hex values in each PALETTE block below, plus the two
     ink values that ride with them: --accent-ink-l (what sits on a title bar
     in light mode) and --sel-ink (what sits on a selection). Every surface,
     edge and ink is mixed from those five with color-mix().

   THE FIVE SLOTS
     --dark   deepest value    (text in light mode / ground in dark)
     --deep   mid-dark chroma  (title bars, links, accents)
     --mid    muted middle     (panel tint)
     --light  lightest value   (paper in light mode / text in dark)
     --pop    the loud one     (selection, current item, meters)
   ========================================================================== */


/* --------------------------------------------------------------------------
   PALETTES
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   THE PALETTES — forty schemes in eight families
   --------------------------------------------------------------------------
   Families group by the character the colours share, not by a hue angle: a
   scheme reads as fire or as deep water long before anyone measures it.

     Ember   fire, and everything the fire touches
     Clay    fired earth, brick and dust
     Amber   resin, wax and lamplight
     Moss    growth, damp and green
     Tide    shallow water and salt air
     Abyss   deep water and night
     Bloom   flowers, and the colours they borrow
     Aurora  light doing something unlikely

   The trailing #nn is the number the palette carries in palettes.html, so a
   scheme can be traced back to the sheet it came off.

   Slots go by value: darkest to --dark, lightest to --light, darkest of the
   middle three to --deep because the title bar carries light text, and the
   most saturated of the last two to --pop. Both ink values are picked by
   contrast against the surface they sit on. Palette 1 is on bare `body` so
   it stands as the fallback.
   -------------------------------------------------------------------------- */

/* 1  Ember   Forge        #29 */
body {
  --dark:  #32453C;
  --deep:  #8E0A26;
  --mid:   #D6191C;
  --light: #D8C80D;
  --pop:   #DE7A08;
  --accent-ink-l: #DACA17;
  --sel-ink:      #2D3E36;
}
/* 2  Ember   Flint        #30 */
body:has(#th-2:checked) {
  --dark:  #A71D3D;
  --deep:  #4D8788;
  --mid:   #46B086;
  --light: #F0DA37;
  --pop:   #FE5F35;
  --accent-ink-l: #931A36;
  --sel-ink:      #961A37;
}
/* 3  Ember   Kiln         #41 */
body:has(#th-3:checked) {
  --dark:  #2E363B;
  --deep:  #985940;
  --mid:   #E55D28;
  --light: #F4C55B;
  --pop:   #FBAA23;
  --accent-ink-l: #F4C762;
  --sel-ink:      #293135;
}
/* 4  Ember   Signal       #01 */
body:has(#th-4:checked) {
  --dark:  #14626A;
  --deep:  #DF2E3D;
  --mid:   #238887;
  --light: #F3E18B;
  --pop:   #F7B034;
  --accent-ink-l: #12565D;
  --sel-ink:      #12585F;
}
/* 5  Clay    Adobe        #34 */
body:has(#th-5:checked) {
  --dark:  #393B3D;
  --deep:  #CE3731;
  --mid:   #4D818F;
  --light: #DACDB1;
  --pop:   #D76348;
  --accent-ink-l: #DBCFB4;
  --sel-ink:      #333537;
}
/* 6  Clay    Terracotta   #24 */
body:has(#th-6:checked) {
  --dark:  #3B425E;
  --deep:  #C93959;
  --mid:   #D7B97E;
  --light: #EEEDC0;
  --pop:   #F2765D;
  --accent-ink-l: #EFEEC3;
  --sel-ink:      #353B55;
}
/* 7  Clay    Sandstone    #33 */
body:has(#th-7:checked) {
  --dark:  #2B2C38;
  --deep:  #686C75;
  --mid:   #E26F6F;
  --light: #F7E9CF;
  --pop:   #E09453;
  --accent-ink-l: #F7EAD1;
  --sel-ink:      #272832;
}
/* 8  Clay    Harvest      #25 */
body:has(#th-8:checked) {
  --dark:  #591317;
  --deep:  #486151;
  --mid:   #D9C787;
  --light: #F6EABC;
  --pop:   #BB4232;
  --accent-ink-l: #F6EBBF;
  --sel-ink:      #F7EBC0;
}
/* 9  Clay    Driftwood    #32 */
body:has(#th-9:checked) {
  --dark:  #1C1519;
  --deep:  #313135;
  --mid:   #635759;
  --light: #D9C5B0;
  --pop:   #A38671;
  --accent-ink-l: #DBC7B3;
  --sel-ink:      #191316;
}
/* 10 Amber   Tallow       #35 */
body:has(#th-10:checked) {
  --dark:  #2E2638;
  --deep:  #3E4B42;
  --mid:   #747A62;
  --light: #D2C79D;
  --pop:   #DCC261;
  --accent-ink-l: #D4C9A1;
  --sel-ink:      #292232;
}
/* 11 Amber   Beeswax      #37 */
body:has(#th-11:checked) {
  --dark:  #1A2826;
  --deep:  #42352E;
  --mid:   #92803A;
  --light: #F0E7AD;
  --pop:   #C1B74B;
  --accent-ink-l: #F1E8B0;
  --sel-ink:      #172422;
}
/* 12 Amber   Parchment    #36 */
body:has(#th-12:checked) {
  --dark:  #513130;
  --deep:  #977854;
  --mid:   #A69C7A;
  --light: #F3F6DD;
  --pop:   #C0A972;
  --accent-ink-l: #472B2A;
  --sel-ink:      #492C2B;
}
/* 13 Amber   Vellum       #31 */
body:has(#th-13:checked) {
  --dark:  #4A293F;
  --deep:  #3F4E4C;
  --mid:   #5B6E76;
  --light: #F7EAD4;
  --pop:   #C5A77D;
  --accent-ink-l: #F7EBD6;
  --sel-ink:      #432539;
}
/* 14 Amber   Lantern      #14 */
body:has(#th-14:checked) {
  --dark:  #0A3259;
  --deep:  #14395B;
  --mid:   #323941;
  --light: #EDF2F0;
  --pop:   #EFC05E;
  --accent-ink-l: #EEF3F1;
  --sel-ink:      #092D50;
}
/* 15 Moss    Fernlight    #08 */
body:has(#th-15:checked) {
  --dark:  #343122;
  --deep:  #4F605A;
  --mid:   #81AE7A;
  --light: #E1F28C;
  --pop:   #DAD955;
  --accent-ink-l: #E2F391;
  --sel-ink:      #2F2C1F;
}
/* 16 Moss    Verdigris    #43 */
body:has(#th-16:checked) {
  --dark:  #1C4043;
  --deep:  #E14244;
  --mid:   #E38264;
  --light: #F4DBA8;
  --pop:   #159580;
  --accent-ink-l: #19383B;
  --sel-ink:      #193A3C;
}
/* 17 Moss    Meadow       #12 */
body:has(#th-17:checked) {
  --dark:  #0F7BBE;
  --deep:  #E97760;
  --mid:   #D2CE71;
  --light: #D1F3B7;
  --pop:   #31BA83;
  --accent-ink-l: #0D6CA7;
  --sel-ink:      #0E6FAB;
}
/* 18 Moss    Thistle      #18 */
body:has(#th-18:checked) {
  --dark:  #27243C;
  --deep:  #6C8B2E;
  --mid:   #8682A9;
  --light: #CEADDB;
  --pop:   #86A02C;
  --accent-ink-l: #222035;
  --sel-ink:      #232036;
}
/* 19 Moss    Lichen       #09 */
body:has(#th-19:checked) {
  --dark:  #3C4C51;
  --deep:  #456065;
  --mid:   #A3BBA3;
  --light: #DEE2B3;
  --pop:   #5B8E83;
  --accent-ink-l: #DFE3B6;
  --sel-ink:      #364449;
}
/* 20 Tide    Lagoon       #03 */
body:has(#th-20:checked) {
  --dark:  #324542;
  --deep:  #1E6AA2;
  --mid:   #22C9D7;
  --light: #35EBE8;
  --pop:   #0E8CAF;
  --accent-ink-l: #3DECE9;
  --sel-ink:      #2D3E3B;
}
/* 21 Tide    Harbour      #39 */
body:has(#th-21:checked) {
  --dark:  #111A31;
  --deep:  #0C3F62;
  --mid:   #E93F1F;
  --light: #F4F0E3;
  --pop:   #08AA9B;
  --accent-ink-l: #F4F1E4;
  --sel-ink:      #0F172C;
}
/* 22 Tide    Reef         #38 */
body:has(#th-22:checked) {
  --dark:  #197D9E;
  --deep:  #DA3432;
  --mid:   #E38E17;
  --light: #EDB029;
  --pop:   #0CC4B1;
  --accent-ink-l: #EEB332;
  --sel-ink:      #16708E;
}
/* 23 Tide    Shoal        #17 */
body:has(#th-23:checked) {
  --dark:  #813344;
  --deep:  #5C6F8F;
  --mid:   #5CC1C2;
  --light: #F6DB8C;
  --pop:   #38AFB2;
  --accent-ink-l: #F6DC91;
  --sel-ink:      #742E3D;
}
/* 24 Tide    Seafog       #05 */
body:has(#th-24:checked) {
  --dark:  #071620;
  --deep:  #263F46;
  --mid:   #C6CABB;
  --light: #E0EBE1;
  --pop:   #7F908E;
  --accent-ink-l: #E1ECE2;
  --sel-ink:      #06141D;
}
/* 25 Abyss   Cobalt       #15 */
body:has(#th-25:checked) {
  --dark:  #0B2F89;
  --deep:  #0A4DC8;
  --mid:   #A4AD9F;
  --light: #E2AB32;
  --pop:   #088BE0;
  --accent-ink-l: #E3AE3A;
  --sel-ink:      #0A2A7B;
}
/* 26 Abyss   Twilight     #11 */
body:has(#th-26:checked) {
  --dark:  #0E2D44;
  --deep:  #484B83;
  --mid:   #8F846C;
  --light: #648AB9;
  --pop:   #4E7CC5;
  --accent-ink-l: #6A8FBC;
  --sel-ink:      #0D283D;
}
/* 27 Abyss   Nightwatch   #13 */
body:has(#th-27:checked) {
  --dark:  #192234;
  --deep:  #2B3757;
  --mid:   #C3C6A7;
  --light: #E8C65F;
  --pop:   #477871;
  --accent-ink-l: #E9C865;
  --sel-ink:      #E9C969;
}
/* 28 Abyss   Fathom       #10 */
body:has(#th-28:checked) {
  --dark:  #19354B;
  --deep:  #456874;
  --mid:   #829980;
  --light: #E1E5CF;
  --pop:   #C29D89;
  --accent-ink-l: #E2E6D1;
  --sel-ink:      #163044;
}
/* 29 Abyss   Trawler      #16 */
body:has(#th-29:checked) {
  --dark:  #0C2141;
  --deep:  #084B5A;
  --mid:   #74AC73;
  --light: #EC8543;
  --pop:   #BF2A28;
  --accent-ink-l: #ED8A4B;
  --sel-ink:      #ED8C4E;
}
/* 30 Bloom   Foxglove     #19 */
body:has(#th-30:checked) {
  --dark:  #872F40;
  --deep:  #AB316A;
  --mid:   #537572;
  --light: #E39D73;
  --pop:   #F09291;
  --accent-ink-l: #E4A179;
  --sel-ink:      #7A2A3A;
}
/* 31 Bloom   Heather      #20 */
body:has(#th-31:checked) {
  --dark:  #51414C;
  --deep:  #745761;
  --mid:   #EBA49C;
  --light: #F6E6CC;
  --pop:   #B3727B;
  --accent-ink-l: #F6E7CE;
  --sel-ink:      #493A44;
}
/* 32 Bloom   Mallow       #21 */
body:has(#th-32:checked) {
  --dark:  #494A5C;
  --deep:  #745761;
  --mid:   #B3727B;
  --light: #EFCFC0;
  --pop:   #E491A0;
  --accent-ink-l: #F0D1C3;
  --sel-ink:      #424353;
}
/* 33 Bloom   Peony        #22 */
body:has(#th-33:checked) {
  --dark:  #463E4C;
  --deep:  #8D4451;
  --mid:   #E491A0;
  --light: #EFCFC0;
  --pop:   #CF6D76;
  --accent-ink-l: #F0D1C3;
  --sel-ink:      #3F3844;
}
/* 34 Bloom   Dogrose      #40 */
body:has(#th-34:checked) {
  --dark:  #5F4B53;
  --deep:  #BE4227;
  --mid:   #7F7483;
  --light: #E2B6AD;
  --pop:   #B78683;
  --accent-ink-l: #E3B9B0;
  --sel-ink:      #56444B;
}
/* 35 Aurora  Solstice     #02 */
body:has(#th-35:checked) {
  --dark:  #437775;
  --deep:  #D8636D;
  --mid:   #6EAE95;
  --light: #E2C39C;
  --pop:   #F96566;
  --accent-ink-l: #3B6967;
  --sel-ink:      #3C6B69;
}
/* 36 Aurora  Corona       #04 */
body:has(#th-36:checked) {
  --dark:  #253E48;
  --deep:  #F04250;
  --mid:   #F39C7B;
  --light: #F4DFA0;
  --pop:   #1697A0;
  --accent-ink-l: #21373F;
  --sel-ink:      #213841;
}
/* 37 Aurora  Nebula       #23 */
body:has(#th-37:checked) {
  --dark:  #2F3034;
  --deep:  #58593B;
  --mid:   #F0505C;
  --light: #FEFCF4;
  --pop:   #E62E6A;
  --accent-ink-l: #FEFCF4;
  --sel-ink:      #2A2B2F;
}
/* 38 Aurora  Prism        #26 */
body:has(#th-38:checked) {
  --dark:  #8C4549;
  --deep:  #47897E;
  --mid:   #73C6BC;
  --light: #F0F1F0;
  --pop:   #EB4D3E;
  --accent-ink-l: #7B3D40;
  --sel-ink:      #7E3E42;
}
/* 39 Aurora  Flare        #28 */
body:has(#th-39:checked) {
  --dark:  #52303F;
  --deep:  #A41734;
  --mid:   #1A7C63;
  --light: #F18A1F;
  --pop:   #E51E36;
  --accent-ink-l: #F28F28;
  --sel-ink:      #F2912C;
}


/* --------------------------------------------------------------------------
   ROLES — LIGHT MODE, NORMAL CONTRAST (the default)
   -------------------------------------------------------------------------- */

body {
  /* The surfaces are tints OF THE PAPER, not of --light. Deriving each one
     separately from the raw palette meant they drifted apart: paper was
     corrected to clear 6:1 against the ink while --face-alt, mixed with
     --mid, stayed mid-toned — so the side panes, whose text is --ink on
     --face-alt, measured 2.48:1 in the worst palette. Hanging them off
     --paper makes one correction serve all three surfaces. */
  --paper:     color-mix(in srgb, var(--light) 94%, #ffffff);
  --face:      color-mix(in srgb, var(--paper) 88%, var(--mid));
  --face-alt:  color-mix(in srgb, var(--paper) 78%, var(--mid));

  --ink:       color-mix(in srgb, var(--dark) 94%, #000000);
  --ink-dim:   color-mix(in srgb, var(--dark) 52%, var(--face-alt));

  --edge-lt:   color-mix(in srgb, #ffffff 76%, var(--face));
  --edge-dk:   color-mix(in srgb, var(--dark) 55%, var(--face));
  --line:      color-mix(in srgb, var(--dark) 32%, var(--face));
  --hair:      color-mix(in srgb, var(--dark) 20%, var(--paper));

  --accent-ink: var(--accent-ink-l);
  --accent:    var(--deep);
  --accent-dk: color-mix(in srgb, var(--deep) 66%, var(--dark));
  --sel:       var(--pop);
  --link:      color-mix(in srgb, var(--deep) 15%, var(--ink));
  --shadow:    color-mix(in srgb, var(--dark) 62%, transparent);
}

/* -- PAPER CORRECTIONS ------------------------------------------------------
   --paper is the palette's lightest colour taken almost to white, and --ink
   its darkest taken almost to black. That holds while the palette actually
   contains a near-white and a near-black. Several do not: Reef's lightest is
   #EDB029, a saturated orange, so its paper landed mid-toned and reading text
   measured 2.79:1 — against the 6:1 the palette cull was meant to guarantee.
   Ten palettes sat below that floor.

   Corrected per palette and only where needed, so the twenty-nine that were
   already fine are untouched. POSITION IS LOAD-BEARING: these sit directly
   after the block they correct, so the dark-mode and high-contrast blocks
   below still win where they apply — a correction meant for light mode must
   not follow the dark-mode roles and overwrite them.

   Meadow, Reef and Solstice cannot reach 6:1 in light mode at any tint: their
   darkest colour is mid-toned, so the ink derived from it is not dark, and
   they top out near 5:1 against plain white. They are KEPT, and their tint is
   left where it is rather than pushed to the limit — the last two points of
   contrast cost the paper the last of its hue, and a scheme that reads a
   little quieter is worth more than one fewer scheme to choose from. The line
   that matters is not 6:1, it is whether text can be read at all: 1:1 on the
   title screen was the bug, 5:1 here is a character.
   -------------------------------------------------------------------------- */
body:has(#th-2:checked) { --paper: color-mix(in srgb, var(--light) 76%, #ffffff); }
body:has(#th-4:checked) { --paper: color-mix(in srgb, var(--light) 88%, #ffffff); }
body:has(#th-17:checked) { --paper: color-mix(in srgb, var(--light) 20%, #ffffff); }
body:has(#th-22:checked) { --paper: color-mix(in srgb, var(--light) 12%, #ffffff); }
body:has(#th-26:checked) { --paper: color-mix(in srgb, var(--light) 74%, #ffffff); }
body:has(#th-30:checked) { --paper: color-mix(in srgb, var(--light) 52%, #ffffff); }
body:has(#th-34:checked) { --paper: color-mix(in srgb, var(--light) 62%, #ffffff); }
body:has(#th-35:checked) { --paper: color-mix(in srgb, var(--light) 16%, #ffffff); }
body:has(#th-39:checked) { --paper: color-mix(in srgb, var(--light) 74%, #ffffff); }


/* --------------------------------------------------------------------------
   ROLES — DARK MODE
   -------------------------------------------------------------------------- */

body:has(#mode-dark:checked) {
  --paper:     color-mix(in srgb, var(--dark) 94%, var(--deep));
  --face:      color-mix(in srgb, var(--paper) 88%, var(--deep));
  --face-alt:  color-mix(in srgb, var(--paper) 82%, #000000);

  --ink:       color-mix(in srgb, var(--light) 90%, #ffffff);
  --ink-dim:   color-mix(in srgb, var(--light) 48%, var(--face-alt));

  --edge-lt:   color-mix(in srgb, var(--light) 24%, var(--face));
  --edge-dk:   color-mix(in srgb, #000000 64%, var(--face));
  --line:      color-mix(in srgb, var(--light) 24%, var(--face));
  --hair:      color-mix(in srgb, var(--light) 16%, var(--paper));

  --accent-ink: color-mix(in srgb, var(--light) 94%, #ffffff);
  --accent:    color-mix(in srgb, var(--deep) 74%, var(--dark));
  --accent-dk: color-mix(in srgb, var(--deep) 44%, #000000);
  --sel:       var(--pop);
  --link:      color-mix(in srgb, var(--pop) 15%, var(--ink));
  --shadow:    #000000;
}

/* the same corrections for dark mode; see the note above */
body:has(#mode-dark:checked):has(#th-2:checked) { --paper: color-mix(in srgb, var(--dark) 90%, #000000); }
body:has(#mode-dark:checked):has(#th-4:checked) { --paper: color-mix(in srgb, var(--dark) 90%, #000000); }
body:has(#mode-dark:checked):has(#th-17:checked) { --paper: color-mix(in srgb, var(--dark) 74%, #000000); }
body:has(#mode-dark:checked):has(#th-22:checked) { --paper: color-mix(in srgb, var(--dark) 52%, #000000); }
body:has(#mode-dark:checked):has(#th-25:checked) { --paper: color-mix(in srgb, var(--dark) 90%, #000000); }
body:has(#mode-dark:checked):has(#th-26:checked) { --paper: color-mix(in srgb, var(--dark) 46%, #000000); }
body:has(#mode-dark:checked):has(#th-30:checked) { --paper: color-mix(in srgb, var(--dark) 68%, #000000); }
body:has(#mode-dark:checked):has(#th-34:checked) { --paper: color-mix(in srgb, var(--dark) 80%, #000000); }
body:has(#mode-dark:checked):has(#th-35:checked) { --paper: color-mix(in srgb, var(--dark) 62%, #000000); }
body:has(#mode-dark:checked):has(#th-39:checked) { --paper: color-mix(in srgb, var(--dark) 76%, #000000); }


/* --------------------------------------------------------------------------
   CONTRAST — MORE  (#con-2 checked)
   Pushes the ground darker and the paper lighter, and hardens every edge.
   Written as two overrides rather than a scale factor so each value stays
   readable and adjustable on its own.
   -------------------------------------------------------------------------- */

body:has(#con-2:checked) {
  --face:      color-mix(in srgb, var(--paper) 88%, var(--mid));
  --face-alt:  color-mix(in srgb, var(--light) 60%, var(--mid));
  --paper:     #ffffff;

  --ink:       #000000;
  --ink-dim:   color-mix(in srgb, var(--dark) 78%, var(--face-alt));

  --edge-lt:   #ffffff;
  --edge-dk:   color-mix(in srgb, var(--dark) 82%, #000000);
  --line:      color-mix(in srgb, var(--dark) 62%, var(--face));
  --hair:      color-mix(in srgb, var(--dark) 42%, var(--paper));

  --accent:    color-mix(in srgb, var(--deep) 72%, var(--dark));
  --accent-dk: color-mix(in srgb, var(--deep) 40%, #000000);
  --link:      color-mix(in srgb, var(--deep) 15%, var(--ink));
  --shadow:    #000000;
}

body:has(#mode-dark:checked):has(#con-2:checked) {
  --face:      color-mix(in srgb, var(--paper) 88%, var(--deep));
  --face-alt:  color-mix(in srgb, var(--dark) 34%, #000000);
  --paper:     color-mix(in srgb, var(--dark) 44%, #000000);

  --ink:       #ffffff;
  --ink-dim:   color-mix(in srgb, var(--light) 72%, var(--face-alt));

  --edge-lt:   color-mix(in srgb, var(--light) 52%, var(--face));
  --edge-dk:   #000000;
  --line:      color-mix(in srgb, var(--light) 48%, var(--face));
  --hair:      color-mix(in srgb, var(--light) 34%, var(--paper));

  --accent:    color-mix(in srgb, var(--deep) 62%, #000000);
  --accent-dk: #000000;
  --link:      color-mix(in srgb, var(--pop) 15%, var(--ink));
}


/* --------------------------------------------------------------------------
   THE DESKTOP GROUND
   --------------------------------------------------------------------------
   Kept apart from the role blocks above, and last in the file, so a chosen
   ground always outranks whatever brightness and contrast would have picked.

   The default is deliberately dark and the mark deliberately loud: the tiled
   patterns are the point of the desktop, and a ground mixed too close to its
   own mark hides them. --desk-dot always comes from a different corner of
   the palette than --desk, which is what keeps a pattern readable on any of
   the five grounds.
   -------------------------------------------------------------------------- */

body {                                    /* Default — high contrast */
  --desk-base: var(--dark);
  --desk-dot-base: var(--pop);
}

body:has(#bg-1:checked) {
  --desk-base: var(--dark);
  --desk-dot-base: var(--pop);
}
body:has(#bg-2:checked) {
  --desk-base: var(--deep);
  --desk-dot-base: var(--light);
}
body:has(#bg-3:checked) {
  --desk-base: var(--mid);
  --desk-dot-base: var(--dark);
}
body:has(#bg-4:checked) {
  --desk-base: var(--light);
  --desk-dot-base: var(--dark);
}
body:has(#bg-5:checked) {
  --desk-base: var(--pop);
  --desk-dot-base: var(--dark);
}


/* The darkness slider sits between the chosen colour and the ground actually
   drawn, so any of the six can be taken down without picking a different one.
   The mark is mixed against the finished ground rather than the raw colour,
   which is what keeps a pattern legible at every setting. */
body {
  --bg-darkness: 40%;
  --desk:     color-mix(in srgb, var(--desk-base) calc(100% - var(--bg-darkness)), #000000);
  --desk-dot: color-mix(in srgb, var(--desk-dot-base) 62%, var(--desk));
}