@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-variable.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
:root,:root[data-theme=cobalt]{--nav-bg:#15223d;--nav-ink:#e4eafa;--nav-muted:#a8b6d2;--accent:#365de7;--accent-hover:#2848c5;--accent-ink:#fff;--accent-soft:#e7edfd;--accent-soft-ink:#294bbb;--page:#f4f6fa;--panel:#fff;--panel-subtle:#f7f9fc;--text:#1c2942;--text-secondary:#627086;--border:#e1e6ef;--chart:#365de7;--nav-active:#365de7;--nav-active-ink:#fff}
:root[data-theme=graphite]{--nav-bg:#202724;--nav-ink:#e9eee4;--nav-muted:#b5bfb2;--accent:#b9e952;--accent-hover:#a8d443;--accent-ink:#20310c;--accent-soft:#eaf2d9;--accent-soft-ink:#466024;--page:#f5f6f2;--panel:#fff;--panel-subtle:#f7f8f4;--text:#26312b;--text-secondary:#646e63;--border:#e0e5dc;--chart:#739e2b;--nav-active:#b9e952;--nav-active-ink:#20310c}
:root[data-theme=plum]{--nav-bg:#35283e;--nav-ink:#f1e8f5;--nav-muted:#c7b2cf;--accent:#8252ae;--accent-hover:#6c3d97;--accent-ink:#fff;--accent-soft:#f0e6f6;--accent-soft-ink:#754798;--page:#faf6f1;--panel:#fffdfb;--panel-subtle:#faf5f0;--text:#392c40;--text-secondary:#796d7d;--border:#e9dfdf;--chart:#8252ae;--nav-active:#8252ae;--nav-active-ink:#fff}
:root{--brand-slate:var(--accent);--brand-light:var(--accent-soft);--brand-blue:var(--accent-soft-ink);--brand-dark:var(--text);--action:var(--accent);--action-hover:var(--accent-hover);--focus:var(--accent-soft-ink);--ink:var(--text);--muted:var(--text-secondary);--muted-strong:var(--text);--line:var(--border);--paper:var(--panel);--surface:var(--page);--success:#18735b;--success-soft:#e6f5ed;--warning:#8c6317;--warning-soft:#fff5d9;--danger:#ad3d40;--danger-soft:#fcebed;color-scheme:light}
body{font-family:Manrope,'Segoe UI',sans-serif;font-size:14px;line-height:1.55;color:var(--text);background:var(--page);font-synthesis:none}button,input,select,textarea{font-family:inherit}button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent }button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button{transition:background .15s,color .15s,box-shadow .15s}button:disabled{cursor:not-allowed;opacity:.55}h1,h2,h3,h4,p{overflow-wrap:anywhere}h1,h2,h3{line-height:1.25}button,select,input{min-height:42px}button[hidden],a[hidden],[hidden]{display:none!important}
.palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.palette-choice{min-width:0;text-align:left;border:2px solid var(--border);border-radius:16px;padding:15px;background:var(--panel);color:var(--text);display:grid;gap:10px;cursor:pointer}.palette-choice[aria-pressed=true]{border-color:var(--accent-soft-ink);box-shadow:0 0 0 3px var(--accent-soft)}.palette-choice strong{font-size:16px}.palette-choice>span{color:var(--text-secondary);font-size:12px;line-height:1.7}.palette-choice small{color:var(--accent-soft-ink);font-weight:700}.palette-swatches{display:flex;height:58px;border-radius:9px;overflow:hidden}.palette-swatches span{flex:1}.appearance-dialog{width:min(790px,calc(100vw - 32px));max-height:90dvh;overflow:auto;border:1px solid var(--border);border-radius:22px;padding:30px;color:var(--text);background:var(--panel)}.appearance-dialog::backdrop{background:#12203b70;backdrop-filter:blur(3px)}.appearance-dialog h2{margin:0;font-size:25px;letter-spacing:-.7px}.appearance-dialog p{color:var(--text-secondary);max-width:600px}.appearance-dialog .row-actions{display:flex;justify-content:flex-end;gap:10px}.primary-button{background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:11px 17px;font-weight:700}.primary-button:hover{background:var(--accent-hover)}.ghost-light-button{background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 16px;font-weight:600;text-decoration:none}
@media(max-width:600px){.palette-grid{grid-template-columns:1fr}.palette-choice{grid-template-columns:90px 1fr;align-items:center}.palette-swatches{grid-row:1/4;height:100%;min-height:80px;display:grid;grid-template-columns:1fr 1fr}.palette-choice>span,.palette-choice>small{grid-column:2}.appearance-dialog{padding:22px}.appearance-dialog h2{font-size:22px}input,select,textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
