/* Product-UI themes (Tema UI in the panel): one choice for every window on the page, independent of ritmo and hero. Generated by home-work/ui_themes.py. */
.site[data-ui="chiaro"] { --ui-win: #ffffff; --ui-side: #faf8f5; --ui-sand: #f2ede5; --ui-line: #e4e4e7; --ui-fg: #18181b; --ui-fg-2: #52525c; --ui-fg-3: #62626c; --ui-chip: #f4f4f5; --ui-accent: rgb(3 115 226); }
.site[data-ui="chiaro"] .wg-win { --wg-win: #ffffff; --wg-side: #faf8f5; --wg-sand: #f2ede5; --wg-line: #e4e4e7; --wg-line-warm: #e7e0d4; --wg-fg: #18181b; --wg-fg-2: #52525c; --wg-fg-3: #62626c; --wg-fg-4: #9f9fa9; --wg-off: #d4d4d8; --wg-accent: rgb(3 115 226); --wg-accent-press: rgb(2 98 194); --wg-accent-text: rgb(2 74 146); --wg-track: #f2ede5; --wg-seg-on: #ffffff; --wg-seg-shadow: 0 1px 2px rgb(24 24 27 / 0.08), 0 0 0 1px rgb(24 24 27 / 0.04); --wg-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 12px 32px -16px rgb(56 44 24 / 0.18); --wg-warn-bg: rgb(255 251 235); --wg-warn-fg: rgb(146 64 14); --wg-warn-stroke: rgb(220 104 3); --wg-ok-bg: rgb(236 253 243); --wg-ok-fg: rgb(22 101 52); --wg-neutral-bg: #f4f4f5; --wg-neutral-fg: #52525c; --wg-thumb: #ffffff; --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 26%, var(--wg-win)); --wg-red-stroke: #d92d20; color-scheme: light; }
.site[data-ui="chiaro"] .pv { --surface: #faf8f5; --bg: #ffffff; --line: #e4e4e7; --surface-2: #f2ede5; --ink-2: #52525c; --ink-3: #62626c; --navy: #18181b; color: #52525c; }
.site[data-ui="chiaro"] .sg { background: #ffffff; color: #18181b; box-shadow: 0 0 0 1px #e4e4e7, 0 24px 60px -30px rgb(2 12 40 / 0.45); }
.site[data-ui="chiaro"] .sg :is(.sg-k, .sg-person span, .sg-date, .sg-act time, .sg-bar) { color: #62626c; }
.site[data-ui="chiaro"] .sg :is(.sg-sec + .sg-sec, .sg-bar) { border-color: #e4e4e7; }
.site[data-ui="chiaro"] .sg .sg-move { background: #f4f4f5; }
.site[data-ui="chiaro"] .sg .sg-example { box-shadow: inset 0 0 0 1px #e4e4e7; color: #62626c; }
.site[data-ui="carta"] { --ui-win: #fcf9f3; --ui-side: #f5efe4; --ui-sand: #efe6d6; --ui-line: #e6dccb; --ui-fg: #2a2419; --ui-fg-2: #5c5243; --ui-fg-3: #6f6455; --ui-chip: #f1e9db; --ui-accent: rgb(3 115 226); }
.site[data-ui="carta"] .wg-win { --wg-win: #fcf9f3; --wg-side: #f5efe4; --wg-sand: #efe6d6; --wg-line: #e6dccb; --wg-line-warm: #e2d6c2; --wg-fg: #2a2419; --wg-fg-2: #5c5243; --wg-fg-3: #6f6455; --wg-fg-4: #9f9fa9; --wg-off: #d4d4d8; --wg-accent: rgb(3 115 226); --wg-accent-press: rgb(2 98 194); --wg-accent-text: rgb(2 74 146); --wg-track: #efe6d6; --wg-seg-on: #ffffff; --wg-seg-shadow: 0 1px 2px rgb(24 24 27 / 0.08), 0 0 0 1px rgb(24 24 27 / 0.04); --wg-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 12px 32px -16px rgb(56 44 24 / 0.18); --wg-warn-bg: rgb(255 251 235); --wg-warn-fg: rgb(146 64 14); --wg-warn-stroke: rgb(220 104 3); --wg-ok-bg: rgb(236 253 243); --wg-ok-fg: rgb(22 101 52); --wg-neutral-bg: #f1e9db; --wg-neutral-fg: #52525c; --wg-thumb: #ffffff; --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 26%, var(--wg-win)); --wg-red-stroke: #d92d20; color-scheme: light; }
.site[data-ui="carta"] plannix-roadmap { --prm-canvas: #fcf9f3; --prm-side: #f5efe4; --prm-line: #e6dccb; --prm-line-warm: #e2d6c2; --prm-fg: #2a2419; --prm-fg-2: #5c5243; --prm-fg-3: #6f6455; --prm-track: #efe6d6; --prm-ring-track: #efe6d6; --prm-avatar-bg: #f1e9db; --prm-hover: #f1e9db; --prm-nav-hover: #f1e9db; }
.site[data-ui="carta"] .pv { --surface: #f5efe4; --bg: #fcf9f3; --line: #e6dccb; --surface-2: #efe6d6; --ink-2: #5c5243; --ink-3: #6f6455; --navy: #2a2419; color: #5c5243; }
.site[data-ui="carta"] .sg { background: #fcf9f3; color: #2a2419; box-shadow: 0 0 0 1px #e6dccb, 0 24px 60px -30px rgb(2 12 40 / 0.45); }
.site[data-ui="carta"] .sg :is(.sg-k, .sg-person span, .sg-date, .sg-act time, .sg-bar) { color: #6f6455; }
.site[data-ui="carta"] .sg :is(.sg-sec + .sg-sec, .sg-bar) { border-color: #e6dccb; }
.site[data-ui="carta"] .sg .sg-move { background: #f1e9db; }
.site[data-ui="carta"] .sg .sg-example { box-shadow: inset 0 0 0 1px #e6dccb; color: #6f6455; }
.site[data-ui="scuro"] { --ui-win: #0f1930; --ui-side: #0c1428; --ui-sand: #16223d; --ui-line: rgb(184 196 217 / 0.12); --ui-fg: #eef1f6; --ui-fg-2: #b8c4d9; --ui-fg-3: #8794ad; --ui-chip: rgb(184 196 217 / 0.1); --ui-accent: #4a95f2; }
.site[data-ui="scuro"] .wg-win { --wg-win: #0f1930; --wg-side: #0c1428; --wg-sand: #16223d; --wg-line: rgb(184 196 217 / 0.12); --wg-line-warm: rgb(214 204 186 / 0.12); --wg-fg: #eef1f6; --wg-fg-2: #b8c4d9; --wg-fg-3: #8794ad; --wg-fg-4: #5f6c86; --wg-off: rgb(184 196 217 / 0.2); --wg-accent: #4a95f2; --wg-accent-press: #3a84e0; --wg-accent-text: #8fbdf7; --wg-track: #16223d; --wg-seg-on: rgb(184 196 217 / 0.14); --wg-seg-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.1); --wg-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 24px 64px -24px rgb(0 0 0 / 0.7); --wg-warn-bg: rgb(247 144 9 / 0.13); --wg-warn-fg: #f6b25e; --wg-warn-stroke: #f39b33; --wg-ok-bg: rgb(23 178 106 / 0.14); --wg-ok-fg: #6fd8a0; --wg-neutral-bg: rgb(184 196 217 / 0.1); --wg-neutral-fg: #b8c4d9; --wg-thumb: #eef1f6; --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 42%, var(--wg-win)); --wg-red-stroke: #f97066; color-scheme: dark; }
.site[data-ui="scuro"] :is(.wg-win, plannix-roadmap .prm-window) { outline: 1px solid rgb(255 255 255 / 0.12); outline-offset: -1px; }
.site[data-ui="scuro"] .pv { --surface: #0c1428; --bg: #0f1930; --line: rgb(184 196 217 / 0.12); --surface-2: #16223d; --ink-2: #b8c4d9; --ink-3: #8794ad; --navy: #eef1f6; color: #b8c4d9; }
.site[data-ui="scuro"] .sg { background: #0f1930; color: #eef1f6; box-shadow: 0 0 0 1px rgb(184 196 217 / 0.12), 0 24px 60px -30px rgb(2 12 40 / 0.45); }
.site[data-ui="scuro"] .sg :is(.sg-k, .sg-person span, .sg-date, .sg-act time, .sg-bar) { color: #8794ad; }
.site[data-ui="scuro"] .sg :is(.sg-sec + .sg-sec, .sg-bar) { border-color: rgb(184 196 217 / 0.12); }
.site[data-ui="scuro"] .sg .sg-move { background: rgb(184 196 217 / 0.1); }
.site[data-ui="scuro"] .sg .sg-example { box-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.12); color: #8794ad; }
.site[data-ui="notte"] { --ui-win: #070e1f; --ui-side: #050a17; --ui-sand: #0d1630; --ui-line: rgb(184 196 217 / 0.09); --ui-fg: #f4f6fa; --ui-fg-2: #a9b5ca; --ui-fg-3: #7a869e; --ui-chip: rgb(184 196 217 / 0.08); --ui-accent: #5aa5f7; }
.site[data-ui="notte"] .wg-win { --wg-win: #070e1f; --wg-side: #050a17; --wg-sand: #0d1630; --wg-line: rgb(184 196 217 / 0.09); --wg-line-warm: rgb(214 204 186 / 0.09); --wg-fg: #f4f6fa; --wg-fg-2: #a9b5ca; --wg-fg-3: #7a869e; --wg-fg-4: #5f6c86; --wg-off: rgb(184 196 217 / 0.2); --wg-accent: #5aa5f7; --wg-accent-press: #3a84e0; --wg-accent-text: #8fbdf7; --wg-track: #0d1630; --wg-seg-on: rgb(184 196 217 / 0.14); --wg-seg-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.1); --wg-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 24px 64px -24px rgb(0 0 0 / 0.7); --wg-warn-bg: rgb(247 144 9 / 0.13); --wg-warn-fg: #f6b25e; --wg-warn-stroke: #f39b33; --wg-ok-bg: rgb(23 178 106 / 0.14); --wg-ok-fg: #6fd8a0; --wg-neutral-bg: rgb(184 196 217 / 0.08); --wg-neutral-fg: #b8c4d9; --wg-thumb: #eef1f6; --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 42%, var(--wg-win)); --wg-red-stroke: #f97066; color-scheme: dark; }
.site[data-ui="notte"] plannix-roadmap { --prm-canvas: #070e1f; --prm-side: #050a17; --prm-line: rgb(184 196 217 / 0.09); --prm-line-warm: rgb(214 204 186 / 0.09); --prm-fg: #f4f6fa; --prm-fg-2: #a9b5ca; --prm-fg-3: #7a869e; --prm-track: #0d1630; --prm-ring-track: #0d1630; --prm-avatar-bg: rgb(184 196 217 / 0.08); --prm-hover: rgb(184 196 217 / 0.08); --prm-nav-hover: rgb(184 196 217 / 0.08); }
.site[data-ui="notte"] :is(.wg-win, plannix-roadmap .prm-window) { outline: 1px solid rgb(255 255 255 / 0.12); outline-offset: -1px; }
.site[data-ui="notte"] .pv { --surface: #050a17; --bg: #070e1f; --line: rgb(184 196 217 / 0.09); --surface-2: #0d1630; --ink-2: #a9b5ca; --ink-3: #7a869e; --navy: #f4f6fa; color: #a9b5ca; }
.site[data-ui="notte"] .sg { background: #070e1f; color: #f4f6fa; box-shadow: 0 0 0 1px rgb(184 196 217 / 0.09), 0 24px 60px -30px rgb(2 12 40 / 0.45); }
.site[data-ui="notte"] .sg :is(.sg-k, .sg-person span, .sg-date, .sg-act time, .sg-bar) { color: #7a869e; }
.site[data-ui="notte"] .sg :is(.sg-sec + .sg-sec, .sg-bar) { border-color: rgb(184 196 217 / 0.09); }
.site[data-ui="notte"] .sg .sg-move { background: rgb(184 196 217 / 0.08); }
.site[data-ui="notte"] .sg .sg-example { box-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.09); color: #7a869e; }