/* 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;
}
}

/* Opt-in components. Never apply these classes inside original mail/document/code content. */
.bx-root {
  --bx-font: "Segoe UI", "Noto Sans SC", "Microsoft YaHei UI", "Yu Gothic UI", sans-serif;
  --bx-control-height: 36px; --bx-row-pad: 12px; --bx-nav-width: 224px;
  font: 14px/1.55 var(--bx-font); color: var(--bx-text); background: var(--bx-canvas);
  color-scheme: var(--bx-scheme); accent-color: var(--bx-primary);
}
.bx-root[data-bx-density="compact"] { --bx-control-height: 32px; --bx-row-pad: 8px; }
.bx-root[data-bx-density="comfortable"] { --bx-control-height: 44px; --bx-row-pad: 16px; }
.bx-shell, .bx-header, .bx-sidebar, .bx-main, .bx-panel, .bx-card, .bx-toolbar,
.bx-btn, .bx-input, .bx-select, .bx-textarea, .bx-field, .bx-table, .bx-list-item, .bx-status,
.bx-nav-item, .bx-brand, .bx-grid, .bx-stack, .bx-dialog, .bx-notice { box-sizing: border-box; }
.bx-header { min-height: 56px; padding: 8px 20px; display: flex; align-items: center; gap: 12px; background: var(--bx-surface); border-bottom: 1px solid var(--bx-border); }
.bx-brand { display: flex; align-items: center; gap: 10px; color: var(--bx-text); text-decoration: none; font-weight: 700; white-space: nowrap; }
.bx-brand-logo { width: 30px; height: 30px; object-fit: contain; padding: 3px; background: #FFF; border-radius: 6px; }
.bx-brand-vendor { font-size: 11px; letter-spacing: .12em; line-height: 1.4; color: var(--bx-muted); }
.bx-brand-product { font-size: 16px; line-height: 1.4; }
.bx-header-context { margin-left: 16px; color: var(--bx-muted); overflow-wrap: anywhere; }
.bx-spacer { flex: 1; }
.bx-shell { display: grid; grid-template-columns: var(--bx-nav-width) minmax(0, 1fr); min-height: 620px; }
.bx-sidebar { background: var(--bx-nav); color: var(--bx-nav-text); padding: 24px 12px; display: flex; flex-direction: column; gap: 6px; }
.bx-nav-label { padding: 0 12px 8px; color: var(--bx-nav-muted); font-size: 12px; }
.bx-nav-item { min-height: 40px; width: 100%; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--bx-nav-text); padding: 8px 12px; font: inherit; text-align: left; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.bx-nav-item:hover { background: var(--bx-nav-hover); }
.bx-nav-item[aria-current="page"] { background: var(--bx-nav-selected); border-left: 3px solid var(--bx-primary); padding-left: 10px; font-weight: 700; }
.bx-nav-item:focus-visible { outline: 2px solid var(--bx-nav-text); outline-offset: 2px; }
.bx-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.bx-main { padding: 24px; min-width: 0; }
.bx-heading { margin: 0; font-size: 24px; line-height: 1.35; font-weight: 650; letter-spacing: -.02em; }
.bx-subheading { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 650; }
.bx-caption { font-size: 12px; line-height: 1.5; color: var(--bx-muted); }
.bx-muted { color: var(--bx-muted); }
.bx-reading { font-size: 16px; line-height: 1.8; max-width: 72ch; overflow-wrap: anywhere; }
.bx-link { color: var(--bx-primary); text-underline-offset: 3px; }
.bx-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bx-stack { display: grid; gap: 16px; }
.bx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.bx-panel, .bx-card { background: var(--bx-surface); border: 1px solid var(--bx-border); border-radius: 8px; min-width: 0; }
.bx-card { padding: 20px; }
.bx-panel-heading { padding: 16px 20px; border-bottom: 1px solid var(--bx-border); }
.bx-btn { min-height: var(--bx-control-height); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 14px; border: 1px solid var(--bx-control-border); border-radius: 6px; background: var(--bx-surface); color: var(--bx-text); font: inherit; font-weight: 600; line-height: 1.4; cursor: pointer; text-decoration: none; }
.bx-btn:hover:not(:disabled) { background: var(--bx-hover); }
.bx-btn:active:not(:disabled) { background: var(--bx-selected); }
.bx-btn--primary { color: var(--bx-on-primary); background: var(--bx-primary); border-color: var(--bx-primary); }
.bx-btn--primary:hover:not(:disabled) { background: var(--bx-primary-hover); border-color: var(--bx-primary-hover); }
.bx-btn--primary:active:not(:disabled) { background: var(--bx-primary-active); border-color: var(--bx-primary-active); }
.bx-btn--danger { color: var(--bx-danger); background: var(--bx-danger-soft); border-color: var(--bx-danger); }
.bx-btn--danger:hover:not(:disabled) { background: var(--bx-danger-soft); text-decoration: underline; }
.bx-btn:disabled { color: var(--bx-muted); background: var(--bx-disabled-bg); border-color: var(--bx-border); cursor: not-allowed; }
.bx-btn[aria-busy="true"] { cursor: progress; }
.bx-input, .bx-select, .bx-textarea { width: 100%; min-height: var(--bx-control-height); border: 1px solid var(--bx-control-border); border-radius: 6px; padding: 4px 10px; background: var(--bx-surface); color: var(--bx-text); font: inherit; line-height: 1.4; }
.bx-textarea { min-height: 112px; resize: vertical; }
.bx-input::placeholder, .bx-textarea::placeholder { color: var(--bx-muted); opacity: 1; }
.bx-input:disabled, .bx-select:disabled, .bx-textarea:disabled { color: var(--bx-muted); background: var(--bx-disabled-bg); }
.bx-input[readonly], .bx-textarea[readonly] { background: var(--bx-subtle); }
.bx-input[aria-invalid="true"], .bx-select[aria-invalid="true"], .bx-textarea[aria-invalid="true"] { border-color: var(--bx-danger); border-width: 2px; }
.bx-btn:focus-visible, .bx-input:focus-visible, .bx-select:focus-visible, .bx-textarea:focus-visible, .bx-link:focus-visible { outline: 2px solid var(--bx-focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--bx-surface); }
.bx-field { display: grid; gap: 6px; min-width: 0; }
.bx-field-label { font-weight: 600; }
.bx-field-help { margin: 0; color: var(--bx-muted); font-size: 12px; }
.bx-field-error { margin: 0; color: var(--bx-danger); font-size: 14px; }
.bx-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--bx-muted); background: var(--bx-subtle); }
.bx-status--success { color: var(--bx-success); background: var(--bx-success-soft); }
.bx-status--warning { color: var(--bx-warning); background: var(--bx-warning-soft); }
.bx-status--danger { color: var(--bx-danger); background: var(--bx-danger-soft); }
.bx-status--info { color: var(--bx-info); background: var(--bx-info-soft); }
.bx-notice { padding: 12px 16px; border-radius: 6px; border: 1px solid var(--bx-info); color: var(--bx-info); background: var(--bx-info-soft); line-height: 1.6; }
.bx-table-wrap { max-width: 100%; overflow-x: auto; }
.bx-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bx-table th, .bx-table td { padding: var(--bx-row-pad) 16px; text-align: left; border-bottom: 1px solid var(--bx-border); }
.bx-table th { color: var(--bx-muted); font-size: 12px; font-weight: 600; background: var(--bx-subtle); }
.bx-table tbody tr:hover { background: var(--bx-hover); }
.bx-table tbody tr[aria-selected="true"] { background: var(--bx-selected); }
.bx-table tr:last-child td { border-bottom: 0; }
.bx-list-item { padding: var(--bx-row-pad) 16px; border-bottom: 1px solid var(--bx-border); }
.bx-list-item[aria-current="true"] { background: var(--bx-selected); box-shadow: inset 3px 0 var(--bx-primary); }
.bx-dialog { max-width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--bx-control-border); border-radius: 12px; background: var(--bx-raised); color: var(--bx-text); padding: 24px; box-shadow: var(--bx-shadow); }
.bx-dialog::backdrop { background: #0A172A80; }
@media (max-width: 760px) {
  .bx-shell { grid-template-columns: minmax(0, 1fr); }
  .bx-sidebar { padding: 8px 12px; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .bx-nav-item { width: auto; min-height: 44px; flex: 1 1 auto; }
  .bx-nav-label { display: none; }
  .bx-header { padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .bx-header-context { margin-left: 0; font-size: 12px; }
  .bx-main { padding: 16px; }
  .bx-heading { font-size: 22px; }
  .bx-btn, .bx-input, .bx-select { min-height: 44px; }
}
@media (pointer: coarse) {
  .bx-btn, .bx-input, .bx-select, .bx-nav-item { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .bx-btn, .bx-nav-item, .bx-dialog { animation: none; transition: none; scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .bx-root { color: CanvasText; background: Canvas; }
  .bx-panel, .bx-card, .bx-header, .bx-sidebar, .bx-dialog { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .bx-btn, .bx-input, .bx-select, .bx-textarea { border: 1px solid ButtonText; }
  .bx-btn--primary, .bx-nav-item[aria-current="page"] { border: 2px solid Highlight; }
  .bx-status { border: 1px solid CanvasText; }
  .bx-btn:focus-visible, .bx-input:focus-visible, .bx-select:focus-visible, .bx-textarea:focus-visible, .bx-nav-item:focus-visible, .bx-link:focus-visible { outline: 2px solid Highlight; }
}