html[data-pal="1"] {
  --graphite: #10171F; --graphite-2: #222C36; --white: #FAF8F3; --mist: #EFEBE3;
  --ink: #10171F; --body: #4C5258; --mute: #878B90; --line: #DCD6CB; --kick: #6B6F74;
  --light: #F1EEE7; --amber: #F39A1E;
  --dk: 16,23,31; --lt: 241,238,231; --ac: 243,154,30; --dp: 9,13,18;
  --s-paper: #ECE8DF; --s-mist: #E2DDD2; --s-mute: #5E615F; --s-kick: #4F5250; --ac-ink: #924D06;
}


html[data-pal="2"] {
  --graphite: #0E1C2B; --graphite-2: #1F3044; --white: #F7F9FA; --mist: #ECF0F3;
  --ink: #0E1C2B; --body: #4A5664; --mute: #84909C; --line: #D5DCE2; --kick: #64707C;
  --light: #EEF2F5; --amber: #F39A1E;
  --dk: 14,28,43; --lt: 238,242,245; --ac: 243,154,30; --dp: 7,15,24;
  --s-paper: #EAEFF3; --s-mist: #DEE5EB; --s-mute: #57636E; --s-kick: #485460; --ac-ink: #924D06;
}


html[data-pal="3"] {
  --graphite: #0D1112; --graphite-2: #20282B; --white: #FFFFFF; --mist: #F1F2F0;
  --ink: #0D1112; --body: #4F555B; --mute: #8A9096; --line: #DADDDA; --kick: #6B7177;
  --light: #EEF0EC; --amber: #F39A1E;
  --dk: 13,17,18; --lt: 238,240,236; --ac: 243,154,30; --dp: 7,9,11;
  --s-paper: #EDEFEB; --s-mist: #E1E5E0; --s-mute: #5D6663; --s-kick: #4E5653; --ac-ink: #924D06;
}


html[data-pal="4"] {
  --graphite: #0D1F18; --graphite-2: #1E332A; --white: #F7F9F6; --mist: #ECF0EA;
  --ink: #0D1F18; --body: #4B5751; --mute: #85918A; --line: #D6DDD6; --kick: #65716A;
  --light: #EDF2EC; --amber: #3DCB78;
  --dk: 13,31,24; --lt: 237,242,236; --ac: 61,203,120; --dp: 7,17,13;
  --s-paper: #EAEFE8; --s-mist: #DEE5DC; --s-mute: #56625B; --s-kick: #47524C; --ac-ink: #1D6B3E;
}


html[data-pal="5"] {
  --graphite: #0D5257; --graphite-2: #0A2E30; --white: #FAFAF7; --mist: #F1F1EC;
  --ink: #0F172A; --body: #475569; --mute: #8A94A3; --line: #E5E5E0; --kick: #64748B;
  --light: #EAF4F3; --amber: #FBAE27; --aqua: #ADEDF6;
  --dk: 10,46,48; --lt: 234,244,243; --ac: 251,174,39; --dp: 5,26,28;
  --s-paper: #F1F1EC; --s-mist: #E6E8E2; --s-mute: #55606B; --s-kick: #475569; --ac-ink: #8A5A07;
}
html[data-pal="5"] .vv { background: #03555C; }

html[data-pal="5"] main > section[data-hx="elec"], html[data-pal="5"] main > section.swt { --white: #0A2E30; --mist: #0D3A3D; --ink: #EAF4F3; --ink2: rgba(234,244,243,.74); --line: rgba(234,244,243,.13); --mute: rgba(234,244,243,.56); --kick: rgba(234,244,243,.62); }
html[data-pal="5"] main > section.swt .sw__knob { background: rgba(234,244,243,.1); box-shadow: inset 0 0 0 1px rgba(234,244,243,.18); }
html[data-pal="5"] main > section.swt .sv__frame { background: #071F21; }
html[data-pal="5"] main > section.swt { padding-block-end: clamp(48px, 5vw, 80px); } 
html[data-pal="5"] main > section.swt + .nx { background: #0A2E30; }

html[data-pal="5"] main > section.sk, html[data-pal="5"] main > section.sk + .nx { --white: #03555C; --mist: #0A4A4F; --ink: #EAF4F3; --ink2: rgba(234,244,243,.74); --line: rgba(234,244,243,.16); --mute: rgba(234,244,243,.56); --kick: rgba(234,244,243,.62); --dk: 2,40,44; }
html[data-pal="5"] main > section.sk + .nx { background: #03555C; } 
html[data-pal="5"] .fo, html[data-pal="5"] .eqg, html[data-pal="5"] .ab__ph { background: #0A2E30; }
html[data-pal="5"].motion .ab__stage { background: #051A1C; }
html[data-pal="5"] .pt, html[data-pal="5"].pt-in::after { background-color: #0A2E30; }
html[data-pal="5"] .nv.is-glass.is-dk::before { background: rgba(5,26,28,.66); }
html[data-pal="5"] main > section.tone-signal { --white: #0A2E30; --mist: #0A2E30; --graphite: #FBAE27; --ink: #FBAE27; --light: #0A2E30; --dk: 234,244,243; --ink2: rgba(234,244,243,.78); --line: rgba(234,244,243,.2); --mute: rgba(234,244,243,.6); --kick: rgba(234,244,243,.7); } 
html[data-pal="5"] .tone-signal .ct__bg { background: #0A2E30; }
html[data-pal="5"] .tone-signal.is-line { background: #0A2E30; } 
html[data-pal="5"] :is(.xg, .mo) + .tone-signal.is-line { background: #03555C; } 

html[data-pal="5"] :is(.xg, .mo) + .tone-signal.is-line.is-open { background: var(--s-paper); }
html[data-pal="5"] .tone-signal + .ag { border-block-start: 0; }
html[data-pal="5"] main > section.tone-signal .pl--d { background: #FBAE27; color: #0A2E30; }
html[data-pal="5"] main > section.tone-signal .pl--d i { background: #0A2E30; color: #FBAE27; }
html[data-pal="5"] main > section.tone-signal .pl--l { color: #EAF4F3; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(234,244,243,.5); }
html[data-pal="5"] main > section.tone-signal .pl--l i { background: #EAF4F3; color: #0A2E30; }
html[data-pal="5"] .tone-signal .em svg { stroke: rgba(173,237,246,.3); }


html[data-pal="6"] {
  --graphite: #0C0C0D; --graphite-2: #1C1C1E; --white: #F3F3F1; --mist: #E8E8E5;
  --ink: #0C0C0D; --body: #4A4A4D; --mute: #8A8A8E; --line: #D9D9D5; --kick: #6B6B6F;
  --light: #F3F3F1; --amber: #E63323;
  --dk: 12,12,13; --lt: 243,243,241; --ac: 230,51,35; --dp: 6,6,7;
  --s-paper: #ECECE9; --s-mist: #E1E1DD; --s-mute: #5C5C5F; --s-kick: #4C4C4F; --ac-ink: #B3261A;
  --fd: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
html[data-pal="6"] :is(h1, h2, h3, .fm__line, .mn__list a, .fo__big, .hs__year, .hs__lead, .xg__h) { font-weight: 600 !important; font-stretch: 112%; letter-spacing: -.035em !important; }
html[data-pal="6"] *, html[data-pal="6"] *::before, html[data-pal="6"] *::after { border-radius: 0 !important; }
html[data-pal="6"] main > section.tone-signal { --graphite: #0C0C0D; --ink: #0C0C0D; } 
html[data-pal="6"] .fo, html[data-pal="6"] .eqg, html[data-pal="6"] .ab__ph { background: #0C0C0D; }
html[data-pal="6"].motion .ab__stage { background: #060607; }
html[data-pal="6"] .pt, html[data-pal="6"].pt-in::after { background-color: #0C0C0D; }


html[data-pal="7"] {
  --graphite: #1F1A15; --graphite-2: #2E2720; --white: #F7F2EA; --mist: #EFE7DA;
  --ink: #1F1A15; --body: #5A5047; --mute: #978B7E; --line: #E2D8C9; --kick: #75695D;
  --light: #F7F2EA; --amber: #EE6A2C;
  --dk: 31,26,21; --lt: 247,242,234; --ac: 238,106,44; --dp: 18,14,11;
  --s-paper: #F1EADF; --s-mist: #E8DECF; --s-mute: #6A5F54; --s-kick: #574C42; --ac-ink: #A8441A;
  --fd: "Instrument Serif", Georgia, serif;
}
html[data-pal="7"] :is(h1, h2, h3, .fm__line, .mn__list a, .fo__big, .hs__year, .hs__lead, .xg__h) { font-weight: 400 !important; letter-spacing: -.012em !important; }
html[data-pal="7"] main > section.tone-signal { --graphite: #1F1A15; --ink: #1F1A15; }
html[data-pal="7"] .fo, html[data-pal="7"] .eqg, html[data-pal="7"] .ab__ph { background: #1F1A15; }
html[data-pal="7"].motion .ab__stage { background: #120E0B; }
html[data-pal="7"] .pt, html[data-pal="7"].pt-in::after { background-color: #1F1A15; }


html[data-pal="8"] {
  --graphite: #0A0F1C; --graphite-2: #1A2133; --white: #FFFFFF; --mist: #F2F4F7;
  --ink: #0A0F1C; --body: #4A5161; --mute: #8A91A0; --line: #DDE1E8; --kick: #626A7A;
  --light: #F5F7FA; --amber: #2747FF;
  --dk: 10,15,28; --lt: 245,247,250; --ac: 39,71,255; --dp: 5,8,16;
  --s-paper: #F2F4F7; --s-mist: #E6EAF0; --s-mute: #555D6D; --s-kick: #454C5B; --ac-ink: #1F3BDB;
  --f: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --fd: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}
html[data-pal="8"] body { font-family: var(--f); }
html[data-pal="8"] :is(h1, h2, h3, .fm__line, .mn__list a, .fo__big, .hs__year, .hs__lead, .xg__h) { font-weight: 400 !important; letter-spacing: -.025em !important; }
html[data-pal="8"] *, html[data-pal="8"] *::before, html[data-pal="8"] *::after { border-radius: 0 !important; }
html[data-pal="8"] main > section.tone-signal { --graphite: #FFFFFF; --ink: #FFFFFF; --light: #0A0F1C; --dk: 255,255,255; --ink2: rgba(255,255,255,.84); --line: rgba(255,255,255,.3); --mute: rgba(255,255,255,.7); } 
html[data-pal="8"] main > section.tone-signal .pl--d i { background: #0A0F1C; color: #fff; }
html[data-pal="8"] .fo, html[data-pal="8"] .eqg, html[data-pal="8"] .ab__ph { background: #0A0F1C; }
html[data-pal="8"].motion .ab__stage { background: #05080F; }
html[data-pal="8"] .pt, html[data-pal="8"].pt-in::after { background-color: #0A0F1C; }




html[data-pal="9"] { 
  --graphite: #0B0E0F; --graphite-2: #0B0E0F; --raised: #14191A; --white: #FFFFFF; --mist: #F4F5F3;
  --ink: #0B0E0F; --body: #4A545C; --mute: #8A94A3; --line: #E6E8E6; --kick: #5E6A72;
  --light: #EEF1EF; --amber: #F5A524; --aqua: #79C2BA;
  --dk: 11,14,15; --lt: 238,241,239; --ac: 245,165,36; --dp: 7,9,9;
  --s-paper: #FFFFFF; --s-mist: #F4F5F3; --s-mute: #55606B; --s-kick: #4A545C; --ac-ink: #8A5A07;
}
html[data-pal="9"] .vv { background: var(--s-paper); } 
html[data-pal="9"] main > section[data-hx="elec"], html[data-pal="9"] main > section.swt { --white: #0B0E0F; --mist: #14191A; --ink: #EEF1EF; --ink2: rgba(238,241,239,.74); --line: rgba(238,241,239,.13); --mute: rgba(238,241,239,.56); --kick: rgba(238,241,239,.62); }
html[data-pal="9"] main > section.swt .sw__knob { background: rgba(238,241,239,.1); box-shadow: inset 0 0 0 1px rgba(238,241,239,.18); }
html[data-pal="9"] main > section.swt .sv__frame { background: #0B0E0F; }
html[data-pal="9"] main > section.swt { padding-block-end: clamp(48px, 5vw, 80px); } 
html[data-pal="9"] main > section.swt + .nx { background: #0B0E0F; }
html[data-pal="9"] main > section.sk, html[data-pal="9"] main > section.sk + .nx { --white: #0B0E0F; --mist: #14191A; --ink: #EEF1EF; --ink2: rgba(238,241,239,.74); --line: rgba(238,241,239,.16); --mute: rgba(238,241,239,.56); --kick: rgba(238,241,239,.62); --dk: 16,21,22; }
html[data-pal="9"] main > section.sk + .nx { background: #0B0E0F; } 
html[data-pal="9"] .fo, html[data-pal="9"] .eqg, html[data-pal="9"] .ab__ph { background: #0B0E0F; }
html[data-pal="9"].motion .ab__stage { background: #070909; } 
html[data-pal="9"] .pt, html[data-pal="9"].pt-in::after { background-color: #0B0E0F; }
html[data-pal="9"] .nv.is-glass.is-dk::before { background: rgba(7,9,9,.66); }
html[data-pal="9"] main > section.tone-signal { --white: #0B0E0F; --mist: #0B0E0F; --graphite: #FBAE27; --ink: #FBAE27; --light: #0B0E0F; --dk: 238,241,239; --ink2: rgba(238,241,239,.78); --line: rgba(238,241,239,.2); --mute: rgba(238,241,239,.6); --kick: rgba(238,241,239,.7); } 
html[data-pal="9"] .tone-signal .ct__bg { background: #0B0E0F; }
html[data-pal="9"] .tone-signal.is-line { background: #0B0E0F; } 
html[data-pal="9"] :is(.xg, .mo) + .tone-signal.is-line { background: #0B0E0F; } 
html[data-pal="9"] :is(.xg, .mo) + .tone-signal.is-line.is-open { background: var(--s-paper); }
html[data-pal="9"] .tone-signal + .ag { border-block-start: 0; }
html[data-pal="9"] main > section.tone-signal .pl--d { background: #FBAE27; color: #0B0E0F; }
html[data-pal="9"] main > section.tone-signal .pl--d i { background: #0B0E0F; color: #FBAE27; }
html[data-pal="9"] main > section.tone-signal .pl--l { color: #EEF1EF; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(238,241,239,.5); }
html[data-pal="9"] main > section.tone-signal .pl--l i { background: #EEF1EF; color: #0B0E0F; }
html[data-pal="9"] .tone-signal .em svg { stroke: rgba(121,194,186,.3); }
html[data-pal="9"] .xg { --aqua: #79C2BA; --amb: #F5A524; background: #0B0E0F; }
html[data-pal="9"] .xg__c:hover .xg__ar { color: #0B0E0F; }
html[data-pal="9"] .xp { --xp-bg: #0B0E0F; }
html[data-pal="9"] main > section[data-tone="light"] .ag__h2, html[data-pal="9"] main > section[data-tone="light"] .op__h { color: #111416; }
html[data-pal="9"] .mo { background: #0B0E0F; } 
html[data-pal="9"] .pt, html[data-pal="9"].pt-in::after { background-color: #14191A; }