/* Shared palette for the two standalone browser utilities. */
:root {
    --paper: #faf9fd;
    --paper-raised: #ffffff;
    --paper-sunk: #f1edff;
    --ink: #171426;
    --ink-soft: #343044;
    --ink-muted: #5f5b6f;
    --ink-faint: #8f8a9f;
    --rule: #ded9ec;
    --rule-soft: #ebe7f5;
    --accent: #4a2bc2;
    --accent-hover: #351e99;
    --accent-soft: #f1edff;
    --serif: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
body {
    background: var(--paper);
    background-image: radial-gradient(1100px 580px at 15% -10%, rgb(74 43 194 / 6%), transparent 60%);
}
.site-nav { background: rgb(250 249 253 / 90%); }
.nav-inner { min-height: 64px; }
.brand { gap: 10px; font-weight: 800; }
.brand-name { font-size: 1rem; }
.tool-brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 900; }
.nav-breadcrumb { display: flex; flex-wrap: wrap; justify-content: flex-end; color: var(--ink-muted); }
.nav-breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-breadcrumb a:hover { text-decoration: underline; }
.nav-breadcrumb .current { color: var(--ink); font-weight: 700; }
.site-foot { background: #241a48; border-top: 0; color: #f0ebff; }
.foot-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.foot-brand, .site-foot .brand-name { color: #fff; }
.site-foot p, .site-foot .foot-note, .site-foot .foot-legal { color: #e0daf0; }
.tool-foot-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.tool-foot-links a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 720px) { .nav-breadcrumb { display: flex; font-size: .75rem; gap: 5px; } .nav-inner { padding: 10px 16px; } }
@media (max-width: 560px) { .nav-breadcrumb a:first-child, .nav-breadcrumb .slash:first-of-type { display: none; } .brand-name { font-size: .88rem; } }
@media (max-width: 700px) { .foot-inner { grid-template-columns: 1fr; } }
.btn-primary:hover { background: var(--accent-hover); }
.support-fab, .support-badge {
    background: linear-gradient(135deg, #684bd0, #4a2bc2 60%, #351e99);
    color: #ffffff;
    box-shadow: 0 10px 20px -5px rgb(74 43 194 / 30%);
}
.support-fab:hover { box-shadow: 0 14px 24px -5px rgb(74 43 194 / 36%); }
.support-fab-text { fill: #ffffff; stroke: #ffffff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline-color: #ffbf47;
}