/* Ten new palettes, shared between the standalone concepts. */





html[data-theme="cobalt"]{--surface:#EAF2FF;--surface-soft:#DDE8FA;--ink:#082F79;--deep:#082F79;--dark-bg:#082F79;--muted-light:#BAD4FF;--accent:#BAD4FF;--strong:#1B55D9;--on-strong:#EAF2FF;--border:color-mix(in srgb, #082F79 35%, #EAF2FF);--muted:color-mix(in srgb, #082F79 78%, #EAF2FF);--field-border:color-mix(in srgb, #082F79 55%, #EAF2FF);--input:#EAF2FF;--panel:#082F79;--on-dark:#EAF2FF;--dark-line:color-mix(in srgb, #BAD4FF 50%, #082F79);--track:color-mix(in srgb, #BAD4FF 22%, #082F79);--focus:#1B55D9;--focus-dark:#BAD4FF;--hero:#EAF2FF;--on-hero:#082F79;--hero-line:color-mix(in srgb, #082F79 35%, #EAF2FF);--hero-focus:#082F79;--flow-line:#1B55D9;--flow-particle:#082F79;--flow-accent:#1B55D9;--ribbon-particle:#082F79;--header:#EAF2FF;--on-header:#082F79;--header-focus:#082F79;}




:root{--diagram-line:var(--muted-light);--diagram-node:var(--muted-light);--diagram-accent:var(--accent);--diagram-cut:var(--dark-bg);--backdrop:color-mix(in srgb,var(--deep) 76%,transparent);--shadow:color-mix(in srgb,var(--ink) 7%,transparent)}
.site-header{background:var(--header);color:var(--on-header);--focus:var(--header-focus)}
.hero,.flow-stage{background:var(--hero);color:var(--on-hero)}
.hero{--border:var(--hero-line);--focus:var(--hero-focus)}
.hero .small-label i,.hero .flow-meter i{background:var(--flow-accent)}
.intelligence,.contact,.manual-preview,.recommendation,.guide-footer,.lesson-visual,.chapter-visual,.stage-scene,.has-scroll-story .story-stage{background:var(--dark-bg);color:var(--on-dark);--focus:var(--focus-dark)}
.intelligence .logic-art text,.chapter-visual text,.stage-scene text,.lesson-visual text{fill:var(--on-dark)}
.promise{background:var(--panel);color:var(--on-dark);--focus:var(--focus-dark)}
.promise-mark{color:var(--accent)}
.site-footer{background:var(--deep);color:var(--on-dark);--focus:var(--focus-dark)}
.button-dark{color:var(--on-dark)}
.skip{color:var(--ink)}
.stage-progress{background:var(--dark-line)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}

/* The two compact tools share one rail instead of overlapping each other. */
.site-tools{position:fixed;right:22px;bottom:18px;z-index:30;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 30px)}
.site-tools .motion-toggle{position:static;flex-shrink:0}
.theme-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 15px;background:var(--surface-soft);color:var(--ink);border:1px solid var(--ink);border-radius:24px;font-size:14px;white-space:nowrap;box-shadow:0 2px 8px var(--shadow)}
.theme-toggle:hover{background:var(--muted-light)}
.theme-toggle svg{width:18px;height:18px;fill:currentColor}
#palette-dialog{position:fixed;inset:auto 22px 78px auto;margin:0;width:min(355px,calc(100vw - 30px));padding:25px;border:1px solid var(--border);border-radius:12px;max-height:calc(100dvh - 110px);color:var(--ink);background:var(--surface);box-shadow:0 15px 65px var(--shadow)}
#palette-dialog::backdrop{background:transparent;backdrop-filter:none}
#palette-dialog h2{font-size:32px;line-height:1.1;margin:0 35px 10px 0;letter-spacing:-.035em}
#palette-dialog>p{font-size:14px;margin:0 0 20px;color:var(--muted)}
.palette-close{position:absolute;right:14px;top:13px;width:38px;height:38px;display:grid;place-items:center;background:transparent;border:0;font-size:28px;line-height:1}
.palette-options{display:grid;gap:8px}
.palette-choice{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 12px;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:5px;font-size:16px}
.palette-choice:hover{background:var(--surface-soft)}
.palette-choice[aria-pressed="true"]{border:2px solid var(--ink);padding:9px 11px;background:var(--surface-soft)}
.palette-swatches{display:flex;overflow:hidden;flex-shrink:0;border:1px solid var(--border);border-radius:20px}
.palette-swatches i{display:block;width:15px;height:28px;background:var(--swatch)}
.palette-selected{margin-left:auto;font-size:12px;font-weight:600;visibility:hidden}
.palette-choice[aria-pressed="true"] .palette-selected{visibility:visible}
@media(max-width:700px){.site-tools{right:15px;bottom:13px;gap:7px}.theme-toggle{min-height:42px;padding:8px 12px;font-size:13px}#palette-dialog{right:15px;bottom:70px;padding:22px}}

/* Theme controls stay readable even when the page uses a dark canvas. */
.site-tools .motion-toggle{background:var(--surface-soft);color:var(--ink);border:1px solid var(--ink)}
#palette-dialog{width:min(540px,calc(100vw - 30px));overflow-y:auto}
#palette-dialog .palette-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#palette-dialog .palette-choice{font-size:14px;gap:9px;min-height:60px;position:relative;padding:12px 10px}
#palette-dialog .palette-choice[aria-pressed="true"]{padding:11px 9px}
.palette-selected{font-size:0}.palette-choice[aria-pressed="true"] .palette-selected:after{content:'✓';font-size:14px}
.palette-swatches i{width:10px;height:24px}
.palette-close{color:var(--ink)}
.site-tools{bottom:max(18px,env(safe-area-inset-bottom));}
body .savings-calculator{--calc-paper:var(--surface);--calc-ink:var(--ink);--calc-input:var(--input);--calc-line:var(--field-border);--calc-accent:var(--strong);--calc-panel:var(--dark-bg);--calc-on-panel:var(--on-dark);--calc-highlight:var(--accent);--calc-track:var(--track);--calc-divider:var(--dark-line)}
body .button-dark{background:var(--dark-bg);color:var(--on-dark)}
body .button-coral{background:var(--accent);color:var(--dark-bg)}
body .story-rail a[aria-current]{background:transparent;color:inherit}
@media(max-width:540px){#palette-dialog .palette-options{grid-template-columns:1fr}#palette-dialog{width:min(355px,calc(100vw - 30px));max-height:calc(100dvh - 100px)}.site-tools{bottom:max(13px,env(safe-area-inset-bottom))}}

/* Adapt Flöde's original color roles to the palette system. */
body{--blue:var(--strong);--ice:var(--surface);--pale:var(--surface-soft);--peach:var(--surface-soft);--ink:inherit;--deep:inherit;color:var(--ink);background:var(--surface)}
.hero,.flow-stage{background:var(--hero);color:var(--on-hero)}
.site-header{background:var(--header);color:var(--on-header)}
.hero .site-header nav .nav-meeting,.guide-page .nav-meeting{border-color:currentColor!important}
.hero .button-light{background:var(--on-hero);color:var(--hero)}
.hero .button-light:hover{background:var(--on-hero);box-shadow:inset 0 0 0 2px currentColor}
.button-blue{background:var(--strong);color:var(--surface)}
.button-light{background:var(--surface);color:var(--strong)}
.button-blue:hover{background:var(--strong);box-shadow:inset 0 0 0 2px currentColor}
.intro-copy>p:not(.large-copy),.service-list p,.ai-section div p,.process li p,.chapter-detail p,.chapter-tip,.assessment-note,.site-footer>div>span,dialog label span{color:var(--muted)}
.services,.guide-promo,.assessment-section{background:var(--surface-soft)}
.guide-promo-art{background:var(--surface-soft)}
.service-flow circle{fill:var(--surface-soft)}
#promo-lines{stroke:var(--strong)}
#ribbons path{stroke:var(--flow-line)}
#flow-art>.flow-particle{fill:var(--ribbon-particle)}
.guarantee,.contact{background:var(--dark-bg);color:var(--on-dark)}
.contact .contact-note{color:var(--accent)}
.contact .button-light{background:var(--accent);color:var(--dark-bg)}
.guide-page .story-chapter .chapter-figure{background:var(--dark-bg);color:var(--on-dark)}
.chapter-art{--diagram-line:var(--muted-light);--diagram-node:var(--muted-light);--diagram-accent:var(--accent);--diagram-cut:var(--dark-bg)}
.chapter-figure .figure-top,.chapter-figure figcaption{color:var(--on-dark)}
.chapter-figure .figure-progress{background:var(--dark-line)}
.chapter-figure .figure-progress span{background:var(--accent)}
.story-rail,.recommendation{background:var(--surface);color:var(--ink)}
.site-footer{background:var(--surface-soft);color:var(--ink)}
.guide-footer{background:var(--dark-bg);color:var(--on-dark)}
.outcome-line,.service-list article,.process li,.guide-page .site-header,.story-rail,.story-chapter,.chapter-detail>div,.guide-footer{border-color:var(--border)}
dialog input,dialog textarea{background:var(--input);color:var(--ink);border-color:var(--field-border)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:var(--focus)}
.hero :focus-visible{outline-color:var(--on-hero)}
.contact :focus-visible,.guarantee :focus-visible{outline-color:var(--accent)}
body[data-concept=flode]{--text-art-ink:var(--on-hero);--text-art-accent:var(--flow-accent);--text-art-rule:var(--hero-line);--visual-control-ink:var(--on-hero);--visual-control-paper:var(--hero)}