/* BILLION UI 1.1.0-design.1 local design candidate; not a product release. Generated from billion-tokens.json. */
.bx-root[data-bx-skin="konjo"],
.bx-root:not([data-bx-skin]) {
  --bx-primary: #087568;
  --bx-nav: #FFFFFF;
  --bx-canvas: #F4F7FA;
  --bx-surface: #FFFFFF;
  --bx-text: #1D2D3D;
  --bx-muted: #526578;
  --bx-nav-text: #1D2D3D;
  --bx-nav-muted: #526578;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #E9F3F9;
  --bx-feature-end: #E1EDF5;
  --bx-feature-border: #D3E3ED;
  --bx-feature-accent: #9DBFCF;
  --bx-nav-selected: #E9F3F9;
  --bx-nav-hover: #F3F8FC;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F7F9FC;
  --bx-hover: #F0F7F6;
  --bx-selected: #E6F1F0;
  --bx-border: #CDD1D4;
  --bx-primary-hover: #076A5F;
  --bx-primary-active: #076156;
  --bx-disabled-bg: #F1F2F3;
  --bx-focus: #087568;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #529E95;
  --bx-primary-light-5: #84BAB4;
  --bx-primary-light-7: #B5D6D2;
  --bx-primary-light-8: #CEE3E1;
  --bx-primary-light-9: #E6F1F0;
}

.bx-root[data-bx-skin="konjo"][data-bx-mode="dark"],
.bx-root:not([data-bx-skin])[data-bx-mode="dark"] {
  --bx-primary: #8AD5C4;
  --bx-nav: #111D2D;
  --bx-canvas: #132032;
  --bx-surface: #1C2B3F;
  --bx-text: #ECF2F8;
  --bx-muted: #B6C6D8;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #233C4E;
  --bx-feature-end: #294758;
  --bx-feature-border: #456071;
  --bx-feature-accent: #507F86;
  --bx-nav-hover: #1A2B38;
  --bx-nav-selected: #233944;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #243246;
  --bx-subtle: #162336;
  --bx-hover: #233547;
  --bx-selected: #273C4C;
  --bx-border: #4A5768;
  --bx-primary-hover: #95D9C9;
  --bx-primary-active: #9EDCCE;
  --bx-disabled-bg: #28374A;
  --bx-focus: #8AD5C4;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #69A29C;
  --bx-primary-light-5: #538082;
  --bx-primary-light-7: #3D5E67;
  --bx-primary-light-8: #324D5A;
  --bx-primary-light-9: #273C4C;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="konjo"]:is([data-bx-mode="system"], :not([data-bx-mode])),
.bx-root:not([data-bx-skin]):is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #8AD5C4;
  --bx-nav: #111D2D;
  --bx-canvas: #132032;
  --bx-surface: #1C2B3F;
  --bx-text: #ECF2F8;
  --bx-muted: #B6C6D8;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #233C4E;
  --bx-feature-end: #294758;
  --bx-feature-border: #456071;
  --bx-feature-accent: #507F86;
  --bx-nav-hover: #1A2B38;
  --bx-nav-selected: #233944;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #243246;
  --bx-subtle: #162336;
  --bx-hover: #233547;
  --bx-selected: #273C4C;
  --bx-border: #4A5768;
  --bx-primary-hover: #95D9C9;
  --bx-primary-active: #9EDCCE;
  --bx-disabled-bg: #28374A;
  --bx-focus: #8AD5C4;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #69A29C;
  --bx-primary-light-5: #538082;
  --bx-primary-light-7: #3D5E67;
  --bx-primary-light-8: #324D5A;
  --bx-primary-light-9: #273C4C;
}
}

.bx-root[data-bx-skin="hakuji"] {
  --bx-primary: #4C6070;
  --bx-nav: #FFFFFF;
  --bx-canvas: #F6F7F5;
  --bx-surface: #FFFFFF;
  --bx-text: #29343C;
  --bx-muted: #5C6870;
  --bx-nav-text: #29343C;
  --bx-nav-muted: #5C6870;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #EFF4F1;
  --bx-feature-end: #E8F0EE;
  --bx-feature-border: #DAE5DF;
  --bx-feature-accent: #ABBCB5;
  --bx-nav-selected: #EFF4F1;
  --bx-nav-hover: #F6F9F7;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F9F9F8;
  --bx-hover: #F4F5F6;
  --bx-selected: #EDEFF1;
  --bx-border: #D0D2D4;
  --bx-primary-hover: #455766;
  --bx-primary-active: #3F505D;
  --bx-disabled-bg: #F2F3F3;
  --bx-focus: #4C6070;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #82909B;
  --bx-primary-light-5: #A6B0B8;
  --bx-primary-light-7: #C9CFD4;
  --bx-primary-light-8: #DBDFE2;
  --bx-primary-light-9: #EDEFF1;
}

.bx-root[data-bx-skin="hakuji"][data-bx-mode="dark"] {
  --bx-primary: #C0D1DB;
  --bx-nav: #1C2328;
  --bx-canvas: #1A2126;
  --bx-surface: #252E34;
  --bx-text: #EDF2F3;
  --bx-muted: #BECBD0;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #303E43;
  --bx-feature-end: #39494F;
  --bx-feature-border: #506269;
  --bx-feature-accent: #739497;
  --bx-nav-hover: #283035;
  --bx-nav-selected: #353D43;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #2D353B;
  --bx-subtle: #1D252A;
  --bx-hover: #2E383E;
  --bx-selected: #353E45;
  --bx-border: #51595E;
  --bx-primary-hover: #C6D5DE;
  --bx-primary-active: #CBD9E1;
  --bx-disabled-bg: #313A3F;
  --bx-focus: #C0D1DB;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #91A0A9;
  --bx-primary-light-5: #728088;
  --bx-primary-light-7: #545F66;
  --bx-primary-light-8: #444F55;
  --bx-primary-light-9: #343E45;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="hakuji"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #C0D1DB;
  --bx-nav: #1C2328;
  --bx-canvas: #1A2126;
  --bx-surface: #252E34;
  --bx-text: #EDF2F3;
  --bx-muted: #BECBD0;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #303E43;
  --bx-feature-end: #39494F;
  --bx-feature-border: #506269;
  --bx-feature-accent: #739497;
  --bx-nav-hover: #283035;
  --bx-nav-selected: #353D43;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #2D353B;
  --bx-subtle: #1D252A;
  --bx-hover: #2E383E;
  --bx-selected: #353E45;
  --bx-border: #51595E;
  --bx-primary-hover: #C6D5DE;
  --bx-primary-active: #CBD9E1;
  --bx-disabled-bg: #313A3F;
  --bx-focus: #C0D1DB;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #91A0A9;
  --bx-primary-light-5: #728088;
  --bx-primary-light-7: #545F66;
  --bx-primary-light-8: #444F55;
  --bx-primary-light-9: #343E45;
}
}

.bx-root[data-bx-skin="shinsui"] {
  --bx-primary: #37745A;
  --bx-nav: #FFFFFF;
  --bx-canvas: #F4F7F8;
  --bx-surface: #FFFFFF;
  --bx-text: #24352E;
  --bx-muted: #54695E;
  --bx-nav-text: #24352E;
  --bx-nav-muted: #54695E;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #EAF4ED;
  --bx-feature-end: #E1EFE6;
  --bx-feature-border: #D3E4D9;
  --bx-feature-accent: #A4C5B1;
  --bx-nav-selected: #EAF4ED;
  --bx-nav-hover: #F3F9F5;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F7F9FA;
  --bx-hover: #F3F7F5;
  --bx-selected: #EBF1EE;
  --bx-border: #CFD3D1;
  --bx-primary-hover: #326A52;
  --bx-primary-active: #2E604B;
  --bx-disabled-bg: #F2F3F2;
  --bx-focus: #37745A;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #739E8C;
  --bx-primary-light-5: #9BBAAC;
  --bx-primary-light-7: #C3D5CE;
  --bx-primary-light-8: #D7E3DE;
  --bx-primary-light-9: #EBF1EE;
}

.bx-root[data-bx-skin="shinsui"][data-bx-mode="dark"] {
  --bx-primary: #8CD3BC;
  --bx-nav: #14251F;
  --bx-canvas: #182A23;
  --bx-surface: #22372E;
  --bx-text: #EDF4EF;
  --bx-muted: #B7CDBE;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #263E34;
  --bx-feature-end: #2E4B3D;
  --bx-feature-border: #486355;
  --bx-feature-accent: #638C77;
  --bx-nav-hover: #1D322B;
  --bx-nav-selected: #263F37;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #2A3E35;
  --bx-subtle: #1B2E26;
  --bx-hover: #284037;
  --bx-selected: #2D473C;
  --bx-border: #4F6158;
  --bx-primary-hover: #96D7C2;
  --bx-primary-active: #A0DAC7;
  --bx-disabled-bg: #2E423A;
  --bx-focus: #8CD3BC;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #6CA491;
  --bx-primary-light-5: #578575;
  --bx-primary-light-7: #426659;
  --bx-primary-light-8: #37564A;
  --bx-primary-light-9: #2D473C;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="shinsui"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #8CD3BC;
  --bx-nav: #14251F;
  --bx-canvas: #182A23;
  --bx-surface: #22372E;
  --bx-text: #EDF4EF;
  --bx-muted: #B7CDBE;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #263E34;
  --bx-feature-end: #2E4B3D;
  --bx-feature-border: #486355;
  --bx-feature-accent: #638C77;
  --bx-nav-hover: #1D322B;
  --bx-nav-selected: #263F37;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #2A3E35;
  --bx-subtle: #1B2E26;
  --bx-hover: #284037;
  --bx-selected: #2D473C;
  --bx-border: #4F6158;
  --bx-primary-hover: #96D7C2;
  --bx-primary-active: #A0DAC7;
  --bx-disabled-bg: #2E423A;
  --bx-focus: #8CD3BC;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #6CA491;
  --bx-primary-light-5: #578575;
  --bx-primary-light-7: #426659;
  --bx-primary-light-8: #37564A;
  --bx-primary-light-9: #2D473C;
}
}

.bx-root[data-bx-skin="fuji"] {
  --bx-primary: #694C91;
  --bx-nav: #FFFFFF;
  --bx-canvas: #F7F6FA;
  --bx-surface: #FFFFFF;
  --bx-text: #302A3A;
  --bx-muted: #685C76;
  --bx-nav-text: #302A3A;
  --bx-nav-muted: #685C76;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #F1ECFA;
  --bx-feature-end: #EAE3F5;
  --bx-feature-border: #E0D6EF;
  --bx-feature-accent: #BFAAD8;
  --bx-nav-selected: #F1ECFA;
  --bx-nav-hover: #F7F5FC;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F9F9FC;
  --bx-hover: #F6F4F8;
  --bx-selected: #F0EDF4;
  --bx-border: #D1D0D4;
  --bx-primary-hover: #604584;
  --bx-primary-active: #573F78;
  --bx-disabled-bg: #F3F2F3;
  --bx-focus: #694C91;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #9682B2;
  --bx-primary-light-5: #B4A6C8;
  --bx-primary-light-7: #D2C9DE;
  --bx-primary-light-8: #E1DBE9;
  --bx-primary-light-9: #F0EDF4;
}

.bx-root[data-bx-skin="fuji"][data-bx-mode="dark"] {
  --bx-primary: #CFB9EE;
  --bx-nav: #211B2C;
  --bx-canvas: #251E31;
  --bx-surface: #332A41;
  --bx-text: #F1EDF7;
  --bx-muted: #CBC0D9;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #3A304D;
  --bx-feature-end: #443856;
  --bx-feature-border: #625372;
  --bx-feature-accent: #937CAA;
  --bx-nav-hover: #2E273B;
  --bx-nav-selected: #3B3349;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #3A3148;
  --bx-subtle: #292236;
  --bx-hover: #3C334B;
  --bx-selected: #433852;
  --bx-border: #5D5569;
  --bx-primary-hover: #D3BFF0;
  --bx-primary-active: #D7C5F1;
  --bx-disabled-bg: #3E364C;
  --bx-focus: #CFB9EE;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #A08EBA;
  --bx-primary-light-5: #817298;
  --bx-primary-light-7: #625575;
  --bx-primary-light-8: #524764;
  --bx-primary-light-9: #433852;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="fuji"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #CFB9EE;
  --bx-nav: #211B2C;
  --bx-canvas: #251E31;
  --bx-surface: #332A41;
  --bx-text: #F1EDF7;
  --bx-muted: #CBC0D9;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #3A304D;
  --bx-feature-end: #443856;
  --bx-feature-border: #625372;
  --bx-feature-accent: #937CAA;
  --bx-nav-hover: #2E273B;
  --bx-nav-selected: #3B3349;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #3A3148;
  --bx-subtle: #292236;
  --bx-hover: #3C334B;
  --bx-selected: #433852;
  --bx-border: #5D5569;
  --bx-primary-hover: #D3BFF0;
  --bx-primary-active: #D7C5F1;
  --bx-disabled-bg: #3E364C;
  --bx-focus: #CFB9EE;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #A08EBA;
  --bx-primary-light-5: #817298;
  --bx-primary-light-7: #625575;
  --bx-primary-light-8: #524764;
  --bx-primary-light-9: #433852;
}
}

.bx-root[data-bx-skin="tensei"] {
  --bx-primary: #096A8A;
  --bx-nav: #FFFFFF;
  --bx-canvas: #F3F8FA;
  --bx-surface: #FFFFFF;
  --bx-text: #20323D;
  --bx-muted: #536A77;
  --bx-nav-text: #20323D;
  --bx-nav-muted: #536A77;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #E7F4FA;
  --bx-feature-end: #DFF0F7;
  --bx-feature-border: #CFE5EF;
  --bx-feature-accent: #9BC5D7;
  --bx-nav-selected: #E7F4FA;
  --bx-nav-hover: #F2F9FC;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F7FAFC;
  --bx-hover: #F0F6F8;
  --bx-selected: #E6F0F3;
  --bx-border: #CED2D4;
  --bx-primary-hover: #08607E;
  --bx-primary-active: #075873;
  --bx-disabled-bg: #F2F3F3;
  --bx-focus: #096A8A;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #5397AD;
  --bx-primary-light-5: #84B4C4;
  --bx-primary-light-7: #B5D2DC;
  --bx-primary-light-8: #CEE1E8;
  --bx-primary-light-9: #E6F0F3;
}

.bx-root[data-bx-skin="tensei"][data-bx-mode="dark"] {
  --bx-primary: #90D4E9;
  --bx-nav: #122630;
  --bx-canvas: #172D38;
  --bx-surface: #213C48;
  --bx-text: #EAF5F8;
  --bx-muted: #B6CFD9;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #26434F;
  --bx-feature-end: #2E4F5B;
  --bx-feature-border: #466574;
  --bx-feature-accent: #5C91A1;
  --bx-nav-hover: #1B333E;
  --bx-nav-selected: #25404C;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #29434E;
  --bx-subtle: #1A323D;
  --bx-hover: #284552;
  --bx-selected: #2C4B58;
  --bx-border: #4D656F;
  --bx-primary-hover: #9AD8EB;
  --bx-primary-active: #A3DBED;
  --bx-disabled-bg: #2D4753;
  --bx-focus: #90D4E9;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #6FA6B9;
  --bx-primary-light-5: #588898;
  --bx-primary-light-7: #426A78;
  --bx-primary-light-8: #375A68;
  --bx-primary-light-9: #2C4B58;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="tensei"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #90D4E9;
  --bx-nav: #122630;
  --bx-canvas: #172D38;
  --bx-surface: #213C48;
  --bx-text: #EAF5F8;
  --bx-muted: #B6CFD9;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #26434F;
  --bx-feature-end: #2E4F5B;
  --bx-feature-border: #466574;
  --bx-feature-accent: #5C91A1;
  --bx-nav-hover: #1B333E;
  --bx-nav-selected: #25404C;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #29434E;
  --bx-subtle: #1A323D;
  --bx-hover: #284552;
  --bx-selected: #2C4B58;
  --bx-border: #4D656F;
  --bx-primary-hover: #9AD8EB;
  --bx-primary-active: #A3DBED;
  --bx-disabled-bg: #2D4753;
  --bx-focus: #90D4E9;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #6FA6B9;
  --bx-primary-light-5: #588898;
  --bx-primary-light-7: #426A78;
  --bx-primary-light-8: #375A68;
  --bx-primary-light-9: #2C4B58;
}
}

.bx-root[data-bx-skin="yonagi"] {
  --bx-primary: #385D91;
  --bx-nav: #FFFFFF;
  --bx-canvas: #F5F7FB;
  --bx-surface: #FFFFFF;
  --bx-text: #223149;
  --bx-muted: #546780;
  --bx-nav-text: #223149;
  --bx-nav-muted: #546780;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #EBF1FB;
  --bx-feature-end: #E2EBF8;
  --bx-feature-border: #D2E0F2;
  --bx-feature-accent: #A4BCDE;
  --bx-nav-selected: #EBF1FB;
  --bx-nav-hover: #F4F7FD;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F8F9FC;
  --bx-hover: #F3F5F8;
  --bx-selected: #EBEFF4;
  --bx-border: #CED2D7;
  --bx-primary-hover: #335584;
  --bx-primary-active: #2E4D78;
  --bx-disabled-bg: #F2F3F4;
  --bx-focus: #385D91;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #748EB2;
  --bx-primary-light-5: #9CAEC8;
  --bx-primary-light-7: #C3CEDE;
  --bx-primary-light-8: #D7DFE9;
  --bx-primary-light-9: #EBEFF4;
}

.bx-root[data-bx-skin="yonagi"][data-bx-mode="dark"] {
  --bx-primary: #A5C7F2;
  --bx-nav: #0C1424;
  --bx-canvas: #101B2F;
  --bx-surface: #1A2840;
  --bx-text: #EDF2FA;
  --bx-muted: #B9C8DD;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #253A55;
  --bx-feature-end: #2D4663;
  --bx-feature-border: #435E7B;
  --bx-feature-accent: #668BB2;
  --bx-nav-hover: #172133;
  --bx-nav-selected: #232F43;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #223047;
  --bx-subtle: #131F34;
  --bx-hover: #22324B;
  --bx-selected: #283852;
  --bx-border: #485469;
  --bx-primary-hover: #ADCCF3;
  --bx-primary-active: #B4D1F4;
  --bx-disabled-bg: #27344B;
  --bx-focus: #A5C7F2;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #7B97BD;
  --bx-primary-light-5: #607899;
  --bx-primary-light-7: #445875;
  --bx-primary-light-8: #364864;
  --bx-primary-light-9: #283852;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="yonagi"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #A5C7F2;
  --bx-nav: #0C1424;
  --bx-canvas: #101B2F;
  --bx-surface: #1A2840;
  --bx-text: #EDF2FA;
  --bx-muted: #B9C8DD;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #253A55;
  --bx-feature-end: #2D4663;
  --bx-feature-border: #435E7B;
  --bx-feature-accent: #668BB2;
  --bx-nav-hover: #172133;
  --bx-nav-selected: #232F43;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #223047;
  --bx-subtle: #131F34;
  --bx-hover: #22324B;
  --bx-selected: #283852;
  --bx-border: #485469;
  --bx-primary-hover: #ADCCF3;
  --bx-primary-active: #B4D1F4;
  --bx-disabled-bg: #27344B;
  --bx-focus: #A5C7F2;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #7B97BD;
  --bx-primary-light-5: #607899;
  --bx-primary-light-7: #445875;
  --bx-primary-light-8: #364864;
  --bx-primary-light-9: #283852;
}
}

.bx-root[data-bx-skin="dark"] {
  --bx-primary: #33685D;
  --bx-nav: #FFFFFF;
  --bx-canvas: #F4F7F6;
  --bx-surface: #FFFFFF;
  --bx-text: #273332;
  --bx-muted: #5C6B67;
  --bx-nav-text: #273332;
  --bx-nav-muted: #5C6B67;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #E9F2F0;
  --bx-feature-end: #E1EDE9;
  --bx-feature-border: #D1E2DB;
  --bx-feature-accent: #A0C3B6;
  --bx-nav-selected: #E9F2F0;
  --bx-nav-hover: #F3F8F7;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F7F9F9;
  --bx-hover: #F3F6F5;
  --bx-selected: #EBF0EF;
  --bx-border: #CFD2D2;
  --bx-primary-hover: #2E5F55;
  --bx-primary-active: #2A564D;
  --bx-disabled-bg: #F2F3F3;
  --bx-focus: #33685D;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #70958E;
  --bx-primary-light-5: #99B4AE;
  --bx-primary-light-7: #C2D2CE;
  --bx-primary-light-8: #D6E1DF;
  --bx-primary-light-9: #EBF0EF;
}

.bx-root[data-bx-skin="dark"][data-bx-mode="dark"] {
  --bx-primary: #8CD9C3;
  --bx-nav: #101819;
  --bx-canvas: #161F20;
  --bx-surface: #222D2E;
  --bx-text: #EAF2EF;
  --bx-muted: #BDCEC7;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #2A403C;
  --bx-feature-end: #334C46;
  --bx-feature-border: #4B635B;
  --bx-feature-accent: #6B9985;
  --bx-nav-hover: #192626;
  --bx-nav-selected: #233532;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #2A3435;
  --bx-subtle: #1A2324;
  --bx-hover: #283737;
  --bx-selected: #2D3E3D;
  --bx-border: #4E5858;
  --bx-primary-hover: #96DCC8;
  --bx-primary-active: #A0DFCD;
  --bx-disabled-bg: #2E393A;
  --bx-focus: #8CD9C3;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #6CA596;
  --bx-primary-light-5: #578378;
  --bx-primary-light-7: #42615B;
  --bx-primary-light-8: #374F4C;
  --bx-primary-light-9: #2D3E3D;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="dark"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #8CD9C3;
  --bx-nav: #101819;
  --bx-canvas: #161F20;
  --bx-surface: #222D2E;
  --bx-text: #EAF2EF;
  --bx-muted: #BDCEC7;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #2A403C;
  --bx-feature-end: #334C46;
  --bx-feature-border: #4B635B;
  --bx-feature-accent: #6B9985;
  --bx-nav-hover: #192626;
  --bx-nav-selected: #233532;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #2A3435;
  --bx-subtle: #1A2324;
  --bx-hover: #283737;
  --bx-selected: #2D3E3D;
  --bx-border: #4E5858;
  --bx-primary-hover: #96DCC8;
  --bx-primary-active: #A0DFCD;
  --bx-disabled-bg: #2E393A;
  --bx-focus: #8CD9C3;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #6CA596;
  --bx-primary-light-5: #578378;
  --bx-primary-light-7: #42615B;
  --bx-primary-light-8: #374F4C;
  --bx-primary-light-9: #2D3E3D;
}
}

.bx-root[data-bx-skin="shakudo"] {
  --bx-primary: #865536;
  --bx-nav: #FFFFFF;
  --bx-canvas: #FAF7F3;
  --bx-surface: #FFFFFF;
  --bx-text: #3A3029;
  --bx-muted: #746357;
  --bx-nav-text: #3A3029;
  --bx-nav-muted: #746357;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #FBF0E6;
  --bx-feature-end: #F6E8DC;
  --bx-feature-border: #EDD9C8;
  --bx-feature-accent: #D2AF90;
  --bx-nav-selected: #FBF0E6;
  --bx-nav-hover: #FDF7F1;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #FCF9F7;
  --bx-hover: #F8F5F3;
  --bx-selected: #F3EEEB;
  --bx-border: #D4D1D0;
  --bx-primary-hover: #7A4D31;
  --bx-primary-active: #6F472D;
  --bx-disabled-bg: #F3F3F2;
  --bx-focus: #865536;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #AA8872;
  --bx-primary-light-5: #C2AA9A;
  --bx-primary-light-7: #DBCCC3;
  --bx-primary-light-8: #E7DDD7;
  --bx-primary-light-9: #F3EEEB;
}

.bx-root[data-bx-skin="shakudo"][data-bx-mode="dark"] {
  --bx-primary: #E7B995;
  --bx-nav: #271F1A;
  --bx-canvas: #2A221D;
  --bx-surface: #3A2E26;
  --bx-text: #F5EEE6;
  --bx-muted: #D4C3B1;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #46372A;
  --bx-feature-end: #51402F;
  --bx-feature-border: #6D5740;
  --bx-feature-accent: #A1805D;
  --bx-nav-hover: #352B23;
  --bx-nav-selected: #44362C;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #41352E;
  --bx-subtle: #2F2620;
  --bx-hover: #44362D;
  --bx-selected: #4B3C31;
  --bx-border: #635850;
  --bx-primary-hover: #E9BF9F;
  --bx-primary-active: #EBC5A7;
  --bx-disabled-bg: #453A32;
  --bx-focus: #E7B995;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #B38F74;
  --bx-primary-light-5: #90745E;
  --bx-primary-light-7: #6E5847;
  --bx-primary-light-8: #5D4A3C;
  --bx-primary-light-9: #4B3C31;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="shakudo"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #E7B995;
  --bx-nav: #271F1A;
  --bx-canvas: #2A221D;
  --bx-surface: #3A2E26;
  --bx-text: #F5EEE6;
  --bx-muted: #D4C3B1;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #46372A;
  --bx-feature-end: #51402F;
  --bx-feature-border: #6D5740;
  --bx-feature-accent: #A1805D;
  --bx-nav-hover: #352B23;
  --bx-nav-selected: #44362C;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #41352E;
  --bx-subtle: #2F2620;
  --bx-hover: #44362D;
  --bx-selected: #4B3C31;
  --bx-border: #635850;
  --bx-primary-hover: #E9BF9F;
  --bx-primary-active: #EBC5A7;
  --bx-disabled-bg: #453A32;
  --bx-focus: #E7B995;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #B38F74;
  --bx-primary-light-5: #90745E;
  --bx-primary-light-7: #6E5847;
  --bx-primary-light-8: #5D4A3C;
  --bx-primary-light-9: #4B3C31;
}
}

.bx-root[data-bx-skin="highcontrast"] {
  --bx-primary: #003F75;
  --bx-nav: #FFFFFF;
  --bx-canvas: #F7F9FC;
  --bx-surface: #FFFFFF;
  --bx-text: #081A2B;
  --bx-muted: #2D4053;
  --bx-nav-text: #081A2B;
  --bx-nav-muted: #2D4053;
  --bx-control-border: #304A64;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #EAF3FF;
  --bx-feature-end: #E1EDFA;
  --bx-feature-border: #CADCEE;
  --bx-feature-accent: #8DACC9;
  --bx-nav-selected: #EAF3FF;
  --bx-nav-hover: #F3F8FF;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F9FBFD;
  --bx-hover: #F0F3F7;
  --bx-selected: #E6ECF1;
  --bx-border: #304A64;
  --bx-primary-hover: #00396A;
  --bx-primary-active: #003461;
  --bx-disabled-bg: #F0F1F2;
  --bx-focus: #003F75;
  --bx-shadow: none;
  --bx-scheme: light;
  --bx-primary-light-3: #4C799E;
  --bx-primary-light-5: #809FBA;
  --bx-primary-light-7: #B2C5D6;
  --bx-primary-light-8: #CCD9E3;
  --bx-primary-light-9: #E6ECF1;
}

.bx-root[data-bx-skin="highcontrast"][data-bx-mode="dark"] {
  --bx-primary: #CEE8FF;
  --bx-nav: #000000;
  --bx-canvas: #060C14;
  --bx-surface: #0D1825;
  --bx-text: #FFFFFF;
  --bx-muted: #D9E6F2;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #BCD0E3;
  --bx-on-primary: #13232B;
  --bx-feature: #21354C;
  --bx-feature-end: #2A425C;
  --bx-feature-border: #526A82;
  --bx-feature-accent: #678EB4;
  --bx-nav-hover: #0F1113;
  --bx-nav-selected: #1F2326;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #15202D;
  --bx-subtle: #081019;
  --bx-hover: #192432;
  --bx-selected: #202D3B;
  --bx-border: #BCD0E3;
  --bx-primary-hover: #D2EAFF;
  --bx-primary-active: #D6ECFF;
  --bx-disabled-bg: #1C2632;
  --bx-focus: #CEE8FF;
  --bx-shadow: none;
  --bx-scheme: dark;
  --bx-primary-light-3: #94AABE;
  --bx-primary-light-5: #6E8092;
  --bx-primary-light-7: #475666;
  --bx-primary-light-8: #344251;
  --bx-primary-light-9: #202D3B;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="highcontrast"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #CEE8FF;
  --bx-nav: #000000;
  --bx-canvas: #060C14;
  --bx-surface: #0D1825;
  --bx-text: #FFFFFF;
  --bx-muted: #D9E6F2;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #BCD0E3;
  --bx-on-primary: #13232B;
  --bx-feature: #21354C;
  --bx-feature-end: #2A425C;
  --bx-feature-border: #526A82;
  --bx-feature-accent: #678EB4;
  --bx-nav-hover: #0F1113;
  --bx-nav-selected: #1F2326;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #15202D;
  --bx-subtle: #081019;
  --bx-hover: #192432;
  --bx-selected: #202D3B;
  --bx-border: #BCD0E3;
  --bx-primary-hover: #D2EAFF;
  --bx-primary-active: #D6ECFF;
  --bx-disabled-bg: #1C2632;
  --bx-focus: #CEE8FF;
  --bx-shadow: none;
  --bx-scheme: dark;
  --bx-primary-light-3: #94AABE;
  --bx-primary-light-5: #6E8092;
  --bx-primary-light-7: #475666;
  --bx-primary-light-8: #344251;
  --bx-primary-light-9: #202D3B;
}
}

.bx-root[data-bx-skin="sumi"] {
  --bx-primary: #50624A;
  --bx-nav: #FFFFFC;
  --bx-canvas: #F8F7F1;
  --bx-surface: #FFFFFC;
  --bx-text: #34382D;
  --bx-muted: #666B5A;
  --bx-nav-text: #34382D;
  --bx-nav-muted: #666B5A;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-feature: #F5F1E4;
  --bx-feature-end: #EEEAD8;
  --bx-feature-border: #E2DDC4;
  --bx-feature-accent: #BBB68B;
  --bx-nav-selected: #F5F1E4;
  --bx-nav-hover: #FAF7EF;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFC;
  --bx-subtle: #FAF9F4;
  --bx-hover: #F4F6F1;
  --bx-selected: #EEEFEA;
  --bx-border: #D2D3CE;
  --bx-primary-hover: #495943;
  --bx-primary-active: #42513D;
  --bx-disabled-bg: #F3F3F0;
  --bx-focus: #50624A;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #84917F;
  --bx-primary-light-5: #A8B0A3;
  --bx-primary-light-7: #CAD0C7;
  --bx-primary-light-8: #DCE0D8;
  --bx-primary-light-9: #EEEFEA;
}

.bx-root[data-bx-skin="sumi"][data-bx-mode="dark"] {
  --bx-primary: #C3D2AA;
  --bx-nav: #1D221B;
  --bx-canvas: #24281F;
  --bx-surface: #30372A;
  --bx-text: #F0F3E8;
  --bx-muted: #C8CFB7;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #3A4130;
  --bx-feature-end: #444C38;
  --bx-feature-border: #5C664C;
  --bx-feature-accent: #879A6A;
  --bx-nav-hover: #292F26;
  --bx-nav-selected: #363C30;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #373E31;
  --bx-subtle: #282C22;
  --bx-hover: #394032;
  --bx-selected: #3F4637;
  --bx-border: #5A6054;
  --bx-primary-hover: #C8D6B2;
  --bx-primary-active: #CDDAB8;
  --bx-disabled-bg: #3C4235;
  --bx-focus: #C3D2AA;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #97A484;
  --bx-primary-light-5: #7A846A;
  --bx-primary-light-7: #5C6650;
  --bx-primary-light-8: #4D5644;
  --bx-primary-light-9: #3F4637;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="sumi"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #C3D2AA;
  --bx-nav: #1D221B;
  --bx-canvas: #24281F;
  --bx-surface: #30372A;
  --bx-text: #F0F3E8;
  --bx-muted: #C8CFB7;
  --bx-nav-text: #F2F5F9;
  --bx-nav-muted: #C1CDDA;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-feature: #3A4130;
  --bx-feature-end: #444C38;
  --bx-feature-border: #5C664C;
  --bx-feature-accent: #879A6A;
  --bx-nav-hover: #292F26;
  --bx-nav-selected: #363C30;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #373E31;
  --bx-subtle: #282C22;
  --bx-hover: #394032;
  --bx-selected: #3F4637;
  --bx-border: #5A6054;
  --bx-primary-hover: #C8D6B2;
  --bx-primary-active: #CDDAB8;
  --bx-disabled-bg: #3C4235;
  --bx-focus: #C3D2AA;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #97A484;
  --bx-primary-light-5: #7A846A;
  --bx-primary-light-7: #5C6650;
  --bx-primary-light-8: #4D5644;
  --bx-primary-light-9: #3F4637;
}
}

.bx-root[data-bx-skin="ruri"] {
  --bx-primary: #295E9A;
  --bx-canvas: #F4F8FC;
  --bx-text: #233449;
  --bx-muted: #52667E;
  --bx-feature: #E5F1FF;
  --bx-feature-end: #DBEAFD;
  --bx-feature-border: #CDDEF4;
  --bx-feature-accent: #8FB5E3;
  --bx-nav: #FFFFFF;
  --bx-surface: #FFFFFF;
  --bx-nav-text: #233449;
  --bx-nav-muted: #52667E;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-nav-selected: #E5F1FF;
  --bx-nav-hover: #F1F7FF;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F7FAFD;
  --bx-hover: #F2F5F9;
  --bx-selected: #EAEFF5;
  --bx-border: #CFD2D7;
  --bx-primary-hover: #25568C;
  --bx-primary-active: #224E80;
  --bx-disabled-bg: #F2F3F4;
  --bx-focus: #295E9A;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #698EB8;
  --bx-primary-light-5: #94AECC;
  --bx-primary-light-7: #BFCFE1;
  --bx-primary-light-8: #D4DFEB;
  --bx-primary-light-9: #EAEFF5;
}

.bx-root[data-bx-skin="ruri"][data-bx-mode="dark"] {
  --bx-primary: #A3CCFA;
  --bx-nav: #111F30;
  --bx-canvas: #17283B;
  --bx-surface: #21364C;
  --bx-text: #ECF4FD;
  --bx-muted: #B9CCE1;
  --bx-feature: #294666;
  --bx-feature-end: #304F71;
  --bx-feature-border: #4F7195;
  --bx-feature-accent: #689BCF;
  --bx-nav-text: #ECF4FD;
  --bx-nav-muted: #B9CCE1;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #1C2C3F;
  --bx-nav-selected: #27394E;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #293D52;
  --bx-subtle: #1A2C40;
  --bx-hover: #293F56;
  --bx-selected: #2E455D;
  --bx-border: #4E6073;
  --bx-primary-hover: #ABD1FA;
  --bx-primary-active: #B3D5FB;
  --bx-disabled-bg: #2D4157;
  --bx-focus: #A3CCFA;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #7C9FC6;
  --bx-primary-light-5: #6281A3;
  --bx-primary-light-7: #486380;
  --bx-primary-light-8: #3B546F;
  --bx-primary-light-9: #2E455D;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="ruri"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #A3CCFA;
  --bx-nav: #111F30;
  --bx-canvas: #17283B;
  --bx-surface: #21364C;
  --bx-text: #ECF4FD;
  --bx-muted: #B9CCE1;
  --bx-feature: #294666;
  --bx-feature-end: #304F71;
  --bx-feature-border: #4F7195;
  --bx-feature-accent: #689BCF;
  --bx-nav-text: #ECF4FD;
  --bx-nav-muted: #B9CCE1;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #1C2C3F;
  --bx-nav-selected: #27394E;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #293D52;
  --bx-subtle: #1A2C40;
  --bx-hover: #293F56;
  --bx-selected: #2E455D;
  --bx-border: #4E6073;
  --bx-primary-hover: #ABD1FA;
  --bx-primary-active: #B3D5FB;
  --bx-disabled-bg: #2D4157;
  --bx-focus: #A3CCFA;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #7C9FC6;
  --bx-primary-light-5: #6281A3;
  --bx-primary-light-7: #486380;
  --bx-primary-light-8: #3B546F;
  --bx-primary-light-9: #2E455D;
}
}

.bx-root[data-bx-skin="wakaba"] {
  --bx-primary: #45662F;
  --bx-canvas: #F7F9F3;
  --bx-text: #2F3928;
  --bx-muted: #5A684E;
  --bx-feature: #EFF6DF;
  --bx-feature-end: #E6F0D3;
  --bx-feature-border: #D7E5C1;
  --bx-feature-accent: #AFC58A;
  --bx-nav: #FFFFFF;
  --bx-surface: #FFFFFF;
  --bx-nav-text: #2F3928;
  --bx-nav-muted: #5A684E;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-nav-selected: #EFF6DF;
  --bx-nav-hover: #F6FAED;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F9FBF7;
  --bx-hover: #F4F6F3;
  --bx-selected: #ECF0EA;
  --bx-border: #D1D3D0;
  --bx-primary-hover: #3F5D2B;
  --bx-primary-active: #395527;
  --bx-disabled-bg: #F3F3F2;
  --bx-focus: #45662F;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #7D946D;
  --bx-primary-light-5: #A2B297;
  --bx-primary-light-7: #C7D1C1;
  --bx-primary-light-8: #DAE0D5;
  --bx-primary-light-9: #ECF0EA;
}

.bx-root[data-bx-skin="wakaba"][data-bx-mode="dark"] {
  --bx-primary: #C0DDA0;
  --bx-nav: #1B2418;
  --bx-canvas: #252F20;
  --bx-surface: #313E29;
  --bx-text: #F0F5E9;
  --bx-muted: #C4D1B3;
  --bx-feature: #3B4A2D;
  --bx-feature-end: #465633;
  --bx-feature-border: #63774D;
  --bx-feature-accent: #8DA76A;
  --bx-nav-text: #F0F5E9;
  --bx-nav-muted: #C4D1B3;
  --bx-control-border: #94A3B5;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #273222;
  --bx-nav-selected: #34402C;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #384530;
  --bx-subtle: #293423;
  --bx-hover: #3A4830;
  --bx-selected: #3F4E35;
  --bx-border: #5B6653;
  --bx-primary-hover: #C6E0A9;
  --bx-primary-active: #CBE3B0;
  --bx-disabled-bg: #3C4935;
  --bx-focus: #C0DDA0;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #95AD7C;
  --bx-primary-light-5: #788E64;
  --bx-primary-light-7: #5C6E4D;
  --bx-primary-light-8: #4E5E41;
  --bx-primary-light-9: #3F4E35;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="wakaba"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #C0DDA0;
  --bx-nav: #1B2418;
  --bx-canvas: #252F20;
  --bx-surface: #313E29;
  --bx-text: #F0F5E9;
  --bx-muted: #C4D1B3;
  --bx-feature: #3B4A2D;
  --bx-feature-end: #465633;
  --bx-feature-border: #63774D;
  --bx-feature-accent: #8DA76A;
  --bx-nav-text: #F0F5E9;
  --bx-nav-muted: #C4D1B3;
  --bx-control-border: #94A3B5;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #273222;
  --bx-nav-selected: #34402C;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #384530;
  --bx-subtle: #293423;
  --bx-hover: #3A4830;
  --bx-selected: #3F4E35;
  --bx-border: #5B6653;
  --bx-primary-hover: #C6E0A9;
  --bx-primary-active: #CBE3B0;
  --bx-disabled-bg: #3C4935;
  --bx-focus: #C0DDA0;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #95AD7C;
  --bx-primary-light-5: #788E64;
  --bx-primary-light-7: #5C6E4D;
  --bx-primary-light-8: #4E5E41;
  --bx-primary-light-9: #3F4E35;
}
}

.bx-root[data-bx-skin="kohaku"] {
  --bx-primary: #7F6115;
  --bx-canvas: #FAF8F1;
  --bx-text: #3D3625;
  --bx-muted: #6F6247;
  --bx-feature: #FFF5D7;
  --bx-feature-end: #FBECC0;
  --bx-feature-border: #EDDFB4;
  --bx-feature-accent: #CCB773;
  --bx-nav: #FFFFFF;
  --bx-surface: #FFFFFF;
  --bx-nav-text: #3D3625;
  --bx-nav-muted: #6F6247;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-nav-selected: #FFF5D7;
  --bx-nav-hover: #FFFAE9;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #FCFAF5;
  --bx-hover: #F7F6F1;
  --bx-selected: #F2EFE8;
  --bx-border: #D4D3CF;
  --bx-primary-hover: #745813;
  --bx-primary-active: #695111;
  --bx-disabled-bg: #F3F3F2;
  --bx-focus: #7F6115;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #A5905B;
  --bx-primary-light-5: #BFB08A;
  --bx-primary-light-7: #D9D0B9;
  --bx-primary-light-8: #E5DFD0;
  --bx-primary-light-9: #F2EFE8;
}

.bx-root[data-bx-skin="kohaku"][data-bx-mode="dark"] {
  --bx-primary: #E5CB83;
  --bx-nav: #282315;
  --bx-canvas: #2D291C;
  --bx-surface: #3D3623;
  --bx-text: #F8F1DE;
  --bx-muted: #D7CBA9;
  --bx-feature: #484024;
  --bx-feature-end: #53492B;
  --bx-feature-border: #726443;
  --bx-feature-accent: #A79257;
  --bx-nav-text: #F8F1DE;
  --bx-nav-muted: #D7CBA9;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #36301D;
  --bx-nav-selected: #443C26;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #443D2B;
  --bx-subtle: #322D1E;
  --bx-hover: #473F29;
  --bx-selected: #4E452D;
  --bx-border: #665F4C;
  --bx-primary-hover: #E7D08E;
  --bx-primary-active: #E9D498;
  --bx-disabled-bg: #48412E;
  --bx-focus: #E5CB83;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #B39E66;
  --bx-primary-light-5: #918053;
  --bx-primary-light-7: #6F6340;
  --bx-primary-light-8: #5F5436;
  --bx-primary-light-9: #4E452D;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="kohaku"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #E5CB83;
  --bx-nav: #282315;
  --bx-canvas: #2D291C;
  --bx-surface: #3D3623;
  --bx-text: #F8F1DE;
  --bx-muted: #D7CBA9;
  --bx-feature: #484024;
  --bx-feature-end: #53492B;
  --bx-feature-border: #726443;
  --bx-feature-accent: #A79257;
  --bx-nav-text: #F8F1DE;
  --bx-nav-muted: #D7CBA9;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #36301D;
  --bx-nav-selected: #443C26;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #443D2B;
  --bx-subtle: #322D1E;
  --bx-hover: #473F29;
  --bx-selected: #4E452D;
  --bx-border: #665F4C;
  --bx-primary-hover: #E7D08E;
  --bx-primary-active: #E9D498;
  --bx-disabled-bg: #48412E;
  --bx-focus: #E5CB83;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #B39E66;
  --bx-primary-light-5: #918053;
  --bx-primary-light-7: #6F6340;
  --bx-primary-light-8: #5F5436;
  --bx-primary-light-9: #4E452D;
}
}

.bx-root[data-bx-skin="sakura"] {
  --bx-primary: #8A4A65;
  --bx-canvas: #FAF7F9;
  --bx-text: #3E2F39;
  --bx-muted: #755C6A;
  --bx-feature: #FCEEF5;
  --bx-feature-end: #F7E3EE;
  --bx-feature-border: #EFD4E2;
  --bx-feature-accent: #D1A4BA;
  --bx-nav: #FFFFFF;
  --bx-surface: #FFFFFF;
  --bx-nav-text: #3E2F39;
  --bx-nav-muted: #755C6A;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-nav-selected: #FCEEF5;
  --bx-nav-hover: #FDF6FA;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #FCF9FB;
  --bx-hover: #F8F4F6;
  --bx-selected: #F3EDF0;
  --bx-border: #D5D1D3;
  --bx-primary-hover: #7E435C;
  --bx-primary-active: #733D54;
  --bx-disabled-bg: #F3F3F3;
  --bx-focus: #8A4A65;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #AD8093;
  --bx-primary-light-5: #C4A4B2;
  --bx-primary-light-7: #DCC9D1;
  --bx-primary-light-8: #E8DBE0;
  --bx-primary-light-9: #F3EDF0;
}

.bx-root[data-bx-skin="sakura"][data-bx-mode="dark"] {
  --bx-primary: #E7B4CD;
  --bx-nav: #291D26;
  --bx-canvas: #2E232B;
  --bx-surface: #402D39;
  --bx-text: #FAEEF4;
  --bx-muted: #D7BFCC;
  --bx-feature: #4B3242;
  --bx-feature-end: #573C4C;
  --bx-feature-border: #755568;
  --bx-feature-accent: #AC7A95;
  --bx-nav-text: #FAEEF4;
  --bx-nav-muted: #D7BFCC;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #372833;
  --bx-nav-selected: #46343F;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #473440;
  --bx-subtle: #33262F;
  --bx-hover: #4A3542;
  --bx-selected: #513A48;
  --bx-border: #695762;
  --bx-primary-hover: #E9BBD2;
  --bx-primary-active: #EBC1D6;
  --bx-disabled-bg: #4B3944;
  --bx-focus: #E7B4CD;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #B58CA1;
  --bx-primary-light-5: #947083;
  --bx-primary-light-7: #725665;
  --bx-primary-light-8: #614857;
  --bx-primary-light-9: #513A48;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="sakura"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #E7B4CD;
  --bx-nav: #291D26;
  --bx-canvas: #2E232B;
  --bx-surface: #402D39;
  --bx-text: #FAEEF4;
  --bx-muted: #D7BFCC;
  --bx-feature: #4B3242;
  --bx-feature-end: #573C4C;
  --bx-feature-border: #755568;
  --bx-feature-accent: #AC7A95;
  --bx-nav-text: #FAEEF4;
  --bx-nav-muted: #D7BFCC;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #372833;
  --bx-nav-selected: #46343F;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #473440;
  --bx-subtle: #33262F;
  --bx-hover: #4A3542;
  --bx-selected: #513A48;
  --bx-border: #695762;
  --bx-primary-hover: #E9BBD2;
  --bx-primary-active: #EBC1D6;
  --bx-disabled-bg: #4B3944;
  --bx-focus: #E7B4CD;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #B58CA1;
  --bx-primary-light-5: #947083;
  --bx-primary-light-7: #725665;
  --bx-primary-light-8: #614857;
  --bx-primary-light-9: #513A48;
}
}

.bx-root[data-bx-skin="sango"] {
  --bx-primary: #95503A;
  --bx-canvas: #FCF8F5;
  --bx-text: #423128;
  --bx-muted: #775F53;
  --bx-feature: #FFF0E8;
  --bx-feature-end: #FCE3D7;
  --bx-feature-border: #F0D3C4;
  --bx-feature-accent: #D9AB92;
  --bx-nav: #FFFFFF;
  --bx-surface: #FFFFFF;
  --bx-nav-text: #423128;
  --bx-nav-muted: #775F53;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-nav-selected: #FFF0E8;
  --bx-nav-hover: #FFF7F2;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #FDFAF8;
  --bx-hover: #F9F4F3;
  --bx-selected: #F4EEEB;
  --bx-border: #D5D2D0;
  --bx-primary-hover: #884935;
  --bx-primary-active: #7C4230;
  --bx-disabled-bg: #F4F3F2;
  --bx-focus: #95503A;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #B58475;
  --bx-primary-light-5: #CAA89C;
  --bx-primary-light-7: #DFCAC4;
  --bx-primary-light-8: #EADCD8;
  --bx-primary-light-9: #F4EEEB;
}

.bx-root[data-bx-skin="sango"][data-bx-mode="dark"] {
  --bx-primary: #EFB9A1;
  --bx-nav: #2B201B;
  --bx-canvas: #31261F;
  --bx-surface: #42332A;
  --bx-text: #FBEFE7;
  --bx-muted: #DBBFB0;
  --bx-feature: #4C392E;
  --bx-feature-end: #594336;
  --bx-feature-border: #795A47;
  --bx-feature-accent: #B18367;
  --bx-nav-text: #FBEFE7;
  --bx-nav-muted: #DBBFB0;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #3A2B25;
  --bx-nav-selected: #48372F;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #493A31;
  --bx-subtle: #362A22;
  --bx-hover: #4C3B31;
  --bx-selected: #534036;
  --bx-border: #6B5C54;
  --bx-primary-hover: #F0BFA9;
  --bx-primary-active: #F2C5B1;
  --bx-disabled-bg: #4D3E35;
  --bx-focus: #EFB9A1;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #BB917D;
  --bx-primary-light-5: #987666;
  --bx-primary-light-7: #765B4E;
  --bx-primary-light-8: #654E42;
  --bx-primary-light-9: #534036;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="sango"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #EFB9A1;
  --bx-nav: #2B201B;
  --bx-canvas: #31261F;
  --bx-surface: #42332A;
  --bx-text: #FBEFE7;
  --bx-muted: #DBBFB0;
  --bx-feature: #4C392E;
  --bx-feature-end: #594336;
  --bx-feature-border: #795A47;
  --bx-feature-accent: #B18367;
  --bx-nav-text: #FBEFE7;
  --bx-nav-muted: #DBBFB0;
  --bx-control-border: #8E9DB0;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #3A2B25;
  --bx-nav-selected: #48372F;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #493A31;
  --bx-subtle: #362A22;
  --bx-hover: #4C3B31;
  --bx-selected: #534036;
  --bx-border: #6B5C54;
  --bx-primary-hover: #F0BFA9;
  --bx-primary-active: #F2C5B1;
  --bx-disabled-bg: #4D3E35;
  --bx-focus: #EFB9A1;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #BB917D;
  --bx-primary-light-5: #987666;
  --bx-primary-light-7: #765B4E;
  --bx-primary-light-8: #654E42;
  --bx-primary-light-9: #534036;
}
}

.bx-root[data-bx-skin="sumire"] {
  --bx-primary: #515F9D;
  --bx-canvas: #F7F7FC;
  --bx-text: #2C3249;
  --bx-muted: #5E6480;
  --bx-feature: #EEEDFF;
  --bx-feature-end: #E3E4FC;
  --bx-feature-border: #D7D9F1;
  --bx-feature-accent: #AFB4DD;
  --bx-nav: #FFFFFF;
  --bx-surface: #FFFFFF;
  --bx-nav-text: #2C3249;
  --bx-nav-muted: #5E6480;
  --bx-control-border: #748294;
  --bx-on-primary: #FFFFFF;
  --bx-nav-selected: #EEEDFF;
  --bx-nav-hover: #F6F5FF;
  --bx-success: #176842;
  --bx-success-soft: #EAF6ED;
  --bx-warning: #805100;
  --bx-warning-soft: #FFF3DC;
  --bx-danger: #A8243B;
  --bx-danger-soft: #FFEDF0;
  --bx-info: #185D99;
  --bx-info-soft: #EDF5FF;
  --bx-raised: #FFFFFF;
  --bx-subtle: #F9F9FD;
  --bx-hover: #F5F5F9;
  --bx-selected: #EEEFF5;
  --bx-border: #D1D2D7;
  --bx-primary-hover: #4A568F;
  --bx-primary-active: #434F82;
  --bx-disabled-bg: #F2F3F4;
  --bx-focus: #515F9D;
  --bx-shadow: 0 8px 28px #173A5E14;
  --bx-scheme: light;
  --bx-primary-light-3: #858FBA;
  --bx-primary-light-5: #A8AFCE;
  --bx-primary-light-7: #CBCFE2;
  --bx-primary-light-8: #DCDFEB;
  --bx-primary-light-9: #EEEFF5;
}

.bx-root[data-bx-skin="sumire"][data-bx-mode="dark"] {
  --bx-primary: #BCC9F7;
  --bx-nav: #1D2235;
  --bx-canvas: #242B3E;
  --bx-surface: #313B50;
  --bx-text: #EFF1FE;
  --bx-muted: #C3C9E2;
  --bx-feature: #3B455E;
  --bx-feature-end: #454F6C;
  --bx-feature-border: #606B8B;
  --bx-feature-accent: #8896C8;
  --bx-nav-text: #EFF1FE;
  --bx-nav-muted: #C3C9E2;
  --bx-control-border: #94A3B5;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #292F44;
  --bx-nav-selected: #353B52;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #384256;
  --bx-subtle: #283043;
  --bx-hover: #39445A;
  --bx-selected: #3F4961;
  --bx-border: #5B6376;
  --bx-primary-hover: #C2CEF8;
  --bx-primary-active: #C7D2F8;
  --bx-disabled-bg: #3C465A;
  --bx-focus: #BCC9F7;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #929EC5;
  --bx-primary-light-5: #7682A4;
  --bx-primary-light-7: #5B6682;
  --bx-primary-light-8: #4D5771;
  --bx-primary-light-9: #3F4961;
}

@media (prefers-color-scheme: dark) {
.bx-root[data-bx-skin="sumire"]:is([data-bx-mode="system"], :not([data-bx-mode])) {
  --bx-primary: #BCC9F7;
  --bx-nav: #1D2235;
  --bx-canvas: #242B3E;
  --bx-surface: #313B50;
  --bx-text: #EFF1FE;
  --bx-muted: #C3C9E2;
  --bx-feature: #3B455E;
  --bx-feature-end: #454F6C;
  --bx-feature-border: #606B8B;
  --bx-feature-accent: #8896C8;
  --bx-nav-text: #EFF1FE;
  --bx-nav-muted: #C3C9E2;
  --bx-control-border: #94A3B5;
  --bx-on-primary: #13232B;
  --bx-nav-hover: #292F44;
  --bx-nav-selected: #353B52;
  --bx-success: #96DFB3;
  --bx-success-soft: #193C2C;
  --bx-warning: #F1D293;
  --bx-warning-soft: #43351F;
  --bx-danger: #F4B3C0;
  --bx-danger-soft: #452934;
  --bx-info: #ACD3FC;
  --bx-info-soft: #1D3853;
  --bx-raised: #384256;
  --bx-subtle: #283043;
  --bx-hover: #39445A;
  --bx-selected: #3F4961;
  --bx-border: #5B6376;
  --bx-primary-hover: #C2CEF8;
  --bx-primary-active: #C7D2F8;
  --bx-disabled-bg: #3C465A;
  --bx-focus: #BCC9F7;
  --bx-shadow: 0 12px 36px #00000040;
  --bx-scheme: dark;
  --bx-primary-light-3: #929EC5;
  --bx-primary-light-5: #7682A4;
  --bx-primary-light-7: #5B6682;
  --bx-primary-light-8: #4D5771;
  --bx-primary-light-9: #3F4961;
}
}