/* Written by Irmak Hakman — 2026-10-15 15:15 (generated by scripts/build_templates.py; edit that, not this) */
/* Copyright (c) 2026 Irmak Hakman — SPDX-License-Identifier: BUSL-1.1 (see LICENSE) */

/* templates.css - the twenty large-text colour templates.

   Each one overrides the design tokens from tokens.css on <html data-template="…">,
   which js/lib/template.js sets from the visitor's choice. With no template the
   attribute is absent and none of this applies - the default look is untouched.
   --fs scales every font size (see tokens.css). Every text colour is AA (4.5:1)
   on all four surfaces of its template. */

/* The template button and its pop-up, in every template including the default. */
.tpl-btn{
  display:inline-grid; place-items:center; flex:none;
  width:32px; height:32px; padding:0; cursor:pointer;
  color:var(--ash); background:transparent;
  border:1px solid var(--rule-hi); border-radius:var(--r-sm);
}
.tpl-btn:hover, .tpl-btn[aria-expanded="true"]{color:var(--bone); background:var(--slate-hi)}
.tpl-btn:focus-visible, .tpl-item:focus-visible{outline:2px solid var(--arc); outline-offset:1px}
.tpl-btn .lt-icon{width:18px; height:18px}
.tpl-btn-float{position:fixed; top:8px; right:8px; z-index:900; background:var(--slate); box-shadow:var(--cast)}
.login-box > .tpl-btn{display:grid; margin:var(--s4) auto 0}

.tpl-pop{
  position:fixed; z-index:10000; width:max-content; min-width:220px;
  max-height:calc(100vh - 16px); overflow-y:auto;
  padding:var(--s1); background:var(--slate);
  border:1px solid var(--rule-hi); border-radius:var(--r-md); box-shadow:var(--cast);
}
.tpl-item{
  display:flex; align-items:center; gap:var(--s2); width:100%;
  padding:6px 10px; min-height:36px; border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--bone); font:inherit; font-size:var(--t-sm);
  text-align:left; cursor:pointer;
}
.tpl-item:hover{background:var(--slate-hi)}
.tpl-item[aria-checked="true"]{background:var(--arc-fill); box-shadow:inset 3px 0 0 var(--arc)}
.tpl-item[aria-checked="true"]::after{content:"\2713"; margin-left:auto; padding-left:var(--s3); color:var(--arc)}
/* Three dots: the template's ground, panel and accent. */
.tpl-sw{display:inline-flex; flex:none; border-radius:var(--r-full); padding:2px; gap:2px; background:var(--ink); border:1px solid var(--rule-hi)}
.tpl-sw i{width:10px; height:10px; border-radius:50%}
.tpl-sw i:nth-child(1){background:var(--slate)}
.tpl-sw i:nth-child(2){background:var(--bone)}
.tpl-sw i:nth-child(3){background:var(--arc)}
/* Six sizes: the label takes its own line above them. */
/* At the top of the pop-up, and stays there while the template list scrolls. */
.tpl-sizes{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:calc(-1 * var(--s1)) calc(-1 * var(--s1)) var(--s1); padding:var(--s2) calc(6px + var(--s1)) var(--s2); border-bottom:1px solid var(--rule); position:sticky; top:calc(-1 * var(--s1)); z-index:1; background:var(--slate); border-radius:var(--r-md) var(--r-md) 0 0}
.tpl-sizes-lbl{flex:1 0 100%; font-size:var(--t-xs); color:var(--ash); padding-bottom:2px; white-space:nowrap}
.tpl-size{
  font:inherit; font-size:var(--t-xs); font-weight:600; color:var(--bone); cursor:pointer;
  min-width:40px; min-height:30px; padding:2px 5px; border:1px solid var(--rule-hi);
  border-radius:var(--r-sm); background:transparent;
}
.tpl-size:hover{background:var(--slate-hi)}
.tpl-size[aria-checked="true"]{background:var(--arc); border-color:var(--arc); color:var(--ink)}
.tpl-size:focus-visible{outline:2px solid var(--arc); outline-offset:1px}
/* Header overflow (js/lib/header-fit.js): on a phone, a header stays on one
   row; buttons that do not fit hide here and appear in the ☰ menu. */
.hf-hidden{display:none!important}
.hf-burger[hidden]{display:none!important}
.hf-menu .tpl-item svg{flex:none; width:1.15em; height:1.15em}
.hf-menu .tpl-item[aria-current="true"]{box-shadow:inset 3px 0 0 var(--arc)}
.hf-menu .tpl-item:disabled{opacity:.45; cursor:default}
.hf-row, .hf-row .cb-group, .hf-row .hdr-left, .hf-row .hdr-right{flex-wrap:nowrap!important}
.hf-row > *, .hf-row .cb-group > *, .hf-row .hdr-right > *{flex-shrink:0}
.hf-row :is(button, a){white-space:nowrap}
.hf-row .hdr-left, .hf-row h1{min-width:0; flex-shrink:1}
.hf-row h1{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hf-row .cb-nav{flex:0 0 auto!important; order:0!important; margin-left:0}
/* A group never shrinks below its contents (the sheet's phone CSS allows it,
   which let its buttons draw over each other); the select inside still can. */
:is(.hf-row, .hf-wrap) :is(.cb-group, .hdr-right){min-width:min-content!important}
/* A select's natural width is its longest option; start it at 8em instead, so
   it can grow into spare room or give way down to 5em. */
html :is(.hf-row, .hf-wrap) select{width:8em; flex:1 1 8em!important; min-width:5em; max-width:none}
/* The map toolbar and the character sheet's bar may use two rows on a phone. */
.hf-wrap{flex-wrap:wrap!important}
.tpl-sw[data-tpl-default]{--ink:#080C15; --slate:#101A2C; --bone:#E6EDF7; --arc:#E0A93F; --rule-hi:#E6EDF733}

/* Metallic Chic — light. Scheme: 3D52A0 7091E6 8697C4 ADBBDA EDE8F5 */
html[data-template="metallic"], .tpl-sw[data-template="metallic"]{
  color-scheme:light;
  --fs:1.2;
  --ink:#EDE8F5; --slate:#F8F6FC; --slate-hi:#DCE1F0; --sunken:#E1DBEE;
  --bone:#1C2550; --ash:#4F5A80; --ash-dim:#717DA5;
  --arc:#3D52A0; --arc-hi:#293B87; --arc-fill:#3D52A024; --arc-line:#3D52A066;
  --blood:#B3261E; --blood-deep:#CF4337; --blood-fill:#B3261E21;
  --verdigris:#057141; --verdigris-fill:#05714121;
  --wash:#1C25500F; --rule:#1C25501F; --rule-hi:#1C255038;
  --scrim:#1A1A2499;
  --lift:#FFFFFFB3;
  --cast:0 1px 2px #0000001F, 0 8px 24px #00000014;
  --txd:#4F5A80;
}

/* Deep Vintage Mood — dark. Scheme: 244855 E64833 874F41 90AEAD FBE9D0 */
html[data-template="vintage"], .tpl-sw[data-template="vintage"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#0E2228; --slate:#173540; --slate-hi:#1F434F; --sunken:#09181D;
  --bone:#FBE9D0; --ash:#92B0AF; --ash-dim:#708F8E;
  --arc:#FC8877; --arc-hi:#FDB2A5; --arc-fill:#FC887724; --arc-line:#FC887766;
  --blood:#FD8694; --blood-deep:#D36170; --blood-fill:#FD869421;
  --verdigris:#5FD39A; --verdigris-fill:#5FD39A21;
  --wash:#FBE9D00F; --rule:#FBE9D01F; --rule-hi:#FBE9D038;
  --scrim:#000000B3;
  --lift:#FBE9D01F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#92B0AF;
}

/* Cool and Collected — dark. Scheme: 003135 024950 964734 0FA4AF AFDDE5 */
html[data-template="cool"], .tpl-sw[data-template="cool"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#002629; --slate:#003135; --slate-hi:#024950; --sunken:#001C1F;
  --bone:#E4F4F7; --ash:#AFDDE5; --ash-dim:#89B6BE;
  --arc:#36BEC9; --arc-hi:#57D8E3; --arc-fill:#36BEC924; --arc-line:#36BEC966;
  --blood:#F89274; --blood-deep:#CF6D50; --blood-fill:#F8927421;
  --verdigris:#5ED6A0; --verdigris-fill:#5ED6A021;
  --wash:#E4F4F70F; --rule:#E4F4F71F; --rule-hi:#E4F4F738;
  --scrim:#000000B3;
  --lift:#E4F4F71F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#AFDDE5;
}

/* Earthy and Serene — dark. Scheme: 3E362E 865D36 93785B AC8968 A69080 */
html[data-template="earthy"], .tpl-sw[data-template="earthy"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#2B251F; --slate:#3E362E; --slate-hi:#4A4137; --sunken:#211C17;
  --bone:#F2E8DA; --ash:#C2AC97; --ash-dim:#A08A75;
  --arc:#CCA97E; --arc-hi:#E6C297; --arc-fill:#CCA97E24; --arc-line:#CCA97E66;
  --blood:#FA957E; --blood-deep:#D1705A; --blood-fill:#FA957E21;
  --verdigris:#8FC79A; --verdigris-fill:#8FC79A21;
  --wash:#F2E8DA0F; --rule:#F2E8DA1F; --rule-hi:#F2E8DA38;
  --scrim:#000000B3;
  --lift:#F2E8DA1F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#C2AC97;
}

/* Texture and Contrast — dark. Scheme: 677A6F 7C97A1 645752 E4E8D8 D89BB5 */
html[data-template="texture"], .tpl-sw[data-template="texture"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#29332E; --slate:#343F39; --slate-hi:#3F4C44; --sunken:#212924;
  --bone:#F4F6EC; --ash:#E4E8D8; --ash-dim:#BDC1B2;
  --arc:#E4A7C1; --arc-hi:#FDC2DB; --arc-fill:#E4A7C124; --arc-line:#E4A7C166;
  --blood:#F2A3A3; --blood-deep:#CA7E7F; --blood-fill:#F2A3A321;
  --verdigris:#B6E6C0; --verdigris-fill:#B6E6C021;
  --wash:#F4F6EC0F; --rule:#F4F6EC1F; --rule-hi:#F4F6EC38;
  --scrim:#000000B3;
  --lift:#F4F6EC1F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#E4E8D8;
}

/* Mechanical and Floaty — dark. Scheme: 141619 2C2E3A 050A44 0A21C0 B3B4BD */
html[data-template="mechanical"], .tpl-sw[data-template="mechanical"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#141619; --slate:#1E2027; --slate-hi:#2C2E3A; --sunken:#0C0D10;
  --bone:#ECEDF2; --ash:#B3B4BD; --ash-dim:#8E8F98;
  --arc:#5B93FF; --arc-hi:#86B0FC; --arc-fill:#5B93FF24; --arc-line:#5B93FF66;
  --blood:#F06B6B; --blood-deep:#C64448; --blood-fill:#F06B6B21;
  --verdigris:#4DD68F; --verdigris-fill:#4DD68F21;
  --wash:#ECEDF20F; --rule:#ECEDF21F; --rule-hi:#ECEDF238;
  --scrim:#000000B3;
  --lift:#ECEDF21F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#B3B4BD;
}

/* Pixel Intensity — dark. Scheme: 000000 8B0E05 3997EB 87B8D2 674B61 */
html[data-template="pixel"], .tpl-sw[data-template="pixel"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#05070D; --slate:#0E1220; --slate-hi:#1A2034; --sunken:#000000;
  --bone:#EAF3FA; --ash:#87B8D2; --ash-dim:#6393AC;
  --arc:#3997EB; --arc-hi:#60B1FE; --arc-fill:#3997EB24; --arc-line:#3997EB66;
  --blood:#DD624A; --blood-deep:#B33C25; --blood-fill:#DD624A21;
  --verdigris:#4DD68F; --verdigris-fill:#4DD68F21;
  --wash:#EAF3FA0F; --rule:#EAF3FA1F; --rule-hi:#EAF3FA38;
  --scrim:#000000B3;
  --lift:#EAF3FA1F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#87B8D2;
}

/* Gradient Pop — dark. Scheme: 141414 273DB4 C50900 F95CA4 ED7845 */
html[data-template="gradient"], .tpl-sw[data-template="gradient"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#141414; --slate:#1F1F24; --slate-hi:#2A2A33; --sunken:#0B0B0B;
  --bone:#F5F5F5; --ash:#B4B9D4; --ash-dim:#8F94AE;
  --arc:#F95CA4; --arc-hi:#FD8FBB; --arc-fill:#F95CA424; --arc-line:#F95CA466;
  --blood:#FE5949; --blood-deep:#D22C22; --blood-fill:#FE594921;
  --verdigris:#4DD68F; --verdigris-fill:#4DD68F21;
  --wash:#F5F5F50F; --rule:#F5F5F51F; --rule-hi:#F5F5F538;
  --scrim:#000000B3;
  --lift:#F5F5F51F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#B4B9D4;
}

/* Cosmic Artistry — dark. Scheme: 212A31 2E3944 124E66 748D92 D3D9D4 */
html[data-template="cosmic"], .tpl-sw[data-template="cosmic"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#212A31; --slate:#2E3944; --slate-hi:#38465A; --sunken:#182027;
  --bone:#E8ECE9; --ash:#97B9BE; --ash-dim:#74969B;
  --arc:#7EB8E4; --arc-hi:#97D2FF; --arc-fill:#7EB8E424; --arc-line:#7EB8E466;
  --blood:#FE9695; --blood-deep:#D47171; --blood-fill:#FE969521;
  --verdigris:#7FD1A8; --verdigris-fill:#7FD1A821;
  --wash:#E8ECE90F; --rule:#E8ECE91F; --rule-hi:#E8ECE938;
  --scrim:#000000B3;
  --lift:#E8ECE91F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#97B9BE;
}

/* Vibrant but Calm — light. Scheme: E43D12 D6536D FFA2B6 EFB11D EBE9E1 */
html[data-template="vibrant"], .tpl-sw[data-template="vibrant"]{
  color-scheme:light;
  --fs:1.2;
  --ink:#EBE9E1; --slate:#F7F6F2; --slate-hi:#E2DFD4; --sunken:#DEDACD;
  --bone:#2B1A12; --ash:#6B5548; --ash-dim:#8D7669;
  --arc:#B32B07; --arc-hi:#8F1E01; --arc-fill:#B32B0724; --arc-line:#B32B0766;
  --blood:#AE2B59; --blood-deep:#CA4670; --blood-fill:#AE2B5921;
  --verdigris:#0F6E3C; --verdigris-fill:#0F6E3C21;
  --wash:#2B1A120F; --rule:#2B1A121F; --rule-hi:#2B1A1238;
  --scrim:#1A1A2499;
  --lift:#FFFFFFB3;
  --cast:0 1px 2px #0000001F, 0 8px 24px #00000014;
  --txd:#6B5548;
}

/* Lively and Inviting — light. Scheme: E7717D C2CAD0 C2B9B0 7E685A AFD275 */
html[data-template="lively"], .tpl-sw[data-template="lively"]{
  color-scheme:light;
  --fs:1.2;
  --ink:#ECEDEF; --slate:#F7F7F8; --slate-hi:#DDE1E5; --sunken:#D8DCE0;
  --bone:#2E2620; --ash:#6A574B; --ash-dim:#8B786C;
  --arc:#A9335E; --arc-hi:#8E1648; --arc-fill:#A9335E24; --arc-line:#A9335E66;
  --blood:#B42D1F; --blood-deep:#D04938; --blood-fill:#B42D1F21;
  --verdigris:#5C6603; --verdigris-fill:#5C660321;
  --wash:#2E26200F; --rule:#2E26201F; --rule-hi:#2E262038;
  --scrim:#1A1A2499;
  --lift:#FFFFFFB3;
  --cast:0 1px 2px #0000001F, 0 8px 24px #00000014;
  --txd:#6A574B;
}

/* Striking and Simple — dark. Scheme: 0B0C10 1F2833 C5C6C7 66FCF1 45A29E */
html[data-template="striking"], .tpl-sw[data-template="striking"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#0B0C10; --slate:#141A22; --slate-hi:#1F2833; --sunken:#06070A;
  --bone:#EDEEEF; --ash:#C5C6C7; --ash-dim:#9FA0A1;
  --arc:#66FCF1; --arc-hi:#EFFFFD; --arc-fill:#66FCF124; --arc-line:#66FCF166;
  --blood:#FF6B6B; --blood-deep:#D44348; --blood-fill:#FF6B6B21;
  --verdigris:#45A29E; --verdigris-fill:#45A29E21;
  --wash:#EDEEEF0F; --rule:#EDEEEF1F; --rule-hi:#EDEEEF38;
  --scrim:#000000B3;
  --lift:#EDEEEF1F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#C5C6C7;
}

/* Red and Lively — light. Scheme: 5D001E E3E2DF E3AFBC 9A1750 EE4C7C */
html[data-template="redlively"], .tpl-sw[data-template="redlively"]{
  color-scheme:light;
  --fs:1.2;
  --ink:#E3E2DF; --slate:#F3F2F0; --slate-hi:#EADADD; --sunken:#D8D6D2;
  --bone:#3A0013; --ash:#6B4A55; --ash-dim:#8F6C77;
  --arc:#9A1750; --arc-hi:#78093C; --arc-fill:#9A175024; --arc-line:#9A175066;
  --blood:#B8181A; --blood-deep:#D43B34; --blood-fill:#B8181A21;
  --verdigris:#056B39; --verdigris-fill:#056B3921;
  --wash:#3A00130F; --rule:#3A00131F; --rule-hi:#3A001338;
  --scrim:#1A1A2499;
  --lift:#FFFFFFB3;
  --cast:0 1px 2px #0000001F, 0 8px 24px #00000014;
  --txd:#6B4A55;
}

/* Artsy and Creative — light. Scheme: D79922 EFE2BA F13C20 4056A1 C5CBE3 */
html[data-template="artsy"], .tpl-sw[data-template="artsy"]{
  color-scheme:light;
  --fs:1.2;
  --ink:#EFE2BA; --slate:#F8F1DC; --slate-hi:#E6D7A8; --sunken:#E4D6AA;
  --bone:#1F2547; --ash:#5E5A4A; --ash-dim:#7E7969;
  --arc:#4056A1; --arc-hi:#2C3F88; --arc-fill:#4056A124; --arc-line:#4056A166;
  --blood:#B42408; --blood-deep:#D04229; --blood-fill:#B4240821;
  --verdigris:#0F6C1B; --verdigris-fill:#0F6C1B21;
  --wash:#1F25470F; --rule:#1F25471F; --rule-hi:#1F254738;
  --scrim:#1A1A2499;
  --lift:#FFFFFFB3;
  --cast:0 1px 2px #0000001F, 0 8px 24px #00000014;
  --txd:#5E5A4A;
}

/* Elegant Yet Approachable — light. Scheme: EDC7B7 EEE2DC BAB2B5 123C69 AC3B61 */
html[data-template="elegant"], .tpl-sw[data-template="elegant"]{
  color-scheme:light;
  --fs:1.2;
  --ink:#EEE2DC; --slate:#F7F0EC; --slate-hi:#F0D6CB; --sunken:#E3D3CB;
  --bone:#0E2A4A; --ash:#5C5257; --ash-dim:#7F7479;
  --arc:#123C69; --arc-hi:#02274E; --arc-fill:#123C6924; --arc-line:#123C6966;
  --blood:#A4335D; --blood-deep:#BF4C74; --blood-fill:#A4335D21;
  --verdigris:#026B49; --verdigris-fill:#026B4921;
  --wash:#0E2A4A0F; --rule:#0E2A4A1F; --rule-hi:#0E2A4A38;
  --scrim:#1A1A2499;
  --lift:#FFFFFFB3;
  --cast:0 1px 2px #0000001F, 0 8px 24px #00000014;
  --txd:#5C5257;
}

/* Sleek and Futuristic — dark. Scheme: 2C3531 116466 D9B08C FFCB9A D1E8E2 */
html[data-template="sleek"], .tpl-sw[data-template="sleek"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#1F2623; --slate:#2C3531; --slate-hi:#36413C; --sunken:#171C1A;
  --bone:#D1E8E2; --ash:#A9BDB7; --ash-dim:#849892;
  --arc:#FFCB9A; --arc-hi:#FFEDDE; --arc-fill:#FFCB9A24; --arc-line:#FFCB9A66;
  --blood:#F48E7E; --blood-deep:#CB695A; --blood-fill:#F48E7E21;
  --verdigris:#4FC3B0; --verdigris-fill:#4FC3B021;
  --wash:#D1E8E20F; --rule:#D1E8E21F; --rule-hi:#D1E8E238;
  --scrim:#000000B3;
  --lift:#D1E8E21F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#A9BDB7;
}

/* Innovative and Audacious — dark. Scheme: 272727 747474 FF652F FFE400 14A76C */
html[data-template="audacious"], .tpl-sw[data-template="audacious"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#1C1C1C; --slate:#272727; --slate-hi:#333333; --sunken:#121212;
  --bone:#F2F2F2; --ash:#A8A8A8; --ash-dim:#838383;
  --arc:#FFE400; --arc-hi:#FFFDF0; --arc-fill:#FFE40024; --arc-line:#FFE40066;
  --blood:#FF6D3C; --blood-deep:#D44504; --blood-fill:#FF6D3C21;
  --verdigris:#25B171; --verdigris-fill:#25B17121;
  --wash:#F2F2F20F; --rule:#F2F2F21F; --rule-hi:#F2F2F238;
  --scrim:#000000B3;
  --lift:#F2F2F21F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#A8A8A8;
}

/* Texturized and Dynamic — dark. Scheme: 2F4454 2E151B DA7B93 376E6F 1C3334 */
html[data-template="texturized"], .tpl-sw[data-template="texturized"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#142526; --slate:#22323E; --slate-hi:#2B3E4D; --sunken:#0E1A1B;
  --bone:#F1E4E8; --ash:#A9BFC9; --ash-dim:#8499A3;
  --arc:#EA8BA3; --arc-hi:#FDA9BD; --arc-fill:#EA8BA324; --arc-line:#EA8BA366;
  --blood:#FF8A8A; --blood-deep:#D56566; --blood-fill:#FF8A8A21;
  --verdigris:#6FC2B0; --verdigris-fill:#6FC2B021;
  --wash:#F1E4E80F; --rule:#F1E4E81F; --rule-hi:#F1E4E838;
  --scrim:#000000B3;
  --lift:#F1E4E81F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#A9BFC9;
}

/* Minimal Yet Warm — light. Scheme: EAE7DC D8C3A5 8E8D8A E98074 E85A4F */
html[data-template="minimal"], .tpl-sw[data-template="minimal"]{
  color-scheme:light;
  --fs:1.2;
  --ink:#EAE7DC; --slate:#F5F3EC; --slate-hi:#E2D8C4; --sunken:#DDD8C8;
  --bone:#2F2B26; --ash:#5F5E5B; --ash-dim:#7B7A76;
  --arc:#B42635; --arc-hi:#950622; --arc-fill:#B4263524; --arc-line:#B4263566;
  --blood:#B3261E; --blood-deep:#CF4337; --blood-fill:#B3261E21;
  --verdigris:#0C6D3A; --verdigris-fill:#0C6D3A21;
  --wash:#2F2B260F; --rule:#2F2B261F; --rule-hi:#2F2B2638;
  --scrim:#1A1A2499;
  --lift:#FFFFFFB3;
  --cast:0 1px 2px #0000001F, 0 8px 24px #00000014;
  --txd:#5F5E5B;
}

/* Vivid and Sharp — dark. Scheme: D83F87 2A1B3D 44318D 8265A7 A4B3B6 */
html[data-template="vivid"], .tpl-sw[data-template="vivid"]{
  color-scheme:dark;
  --fs:1.2;
  --ink:#1E132C; --slate:#2A1B3D; --slate-hi:#3A2A55; --sunken:#150D20;
  --bone:#F2EEF7; --ash:#A4B3B6; --ash-dim:#808E91;
  --arc:#FC63A9; --arc-hi:#FD97C0; --arc-fill:#FC63A924; --arc-line:#FC63A966;
  --blood:#FF6B6B; --blood-deep:#D44348; --blood-fill:#FF6B6B21;
  --verdigris:#5ED6A0; --verdigris-fill:#5ED6A021;
  --wash:#F2EEF70F; --rule:#F2EEF71F; --rule-hi:#F2EEF738;
  --scrim:#000000B3;
  --lift:#F2EEF71F;
  --cast:0 1px 2px #0000006B, 0 10px 28px #00000047;
  --txd:#A4B3B6;
}