:root {
    color-scheme: light;
    --wl-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wl-density-space: 1;
}

:root[data-wl-theme="dark"] {
    color-scheme: dark;
    --wl-surface: #111827;
    --wl-surface-raised: #172033;
    --wl-surface-subtle: #0b1220;
    --wl-surface-muted: #202b3d;
    --wl-text: #eef2ff;
    --wl-muted: #a7b0c0;
    --wl-border: #263249;
    --wl-border-strong: #475569;
    --wl-primary-soft: color-mix(in srgb, var(--wl-primary) 18%, #111827);
    --wl-shadow: 0 18px 50px rgba(0, 0, 0, .26);
}

:root[data-wl-density="compact"] {
    --wl-density-space: .78;
}

body {
    font-family: var(--wl-font-family);
}

.wl-personalizer {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10050;
    display: grid;
    justify-items: end;
    gap: .65rem;
    color: var(--wl-text, #13213c);
}

.wl-personalizer__toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    padding: .7rem .9rem;
    border: 1px solid var(--wl-border, #dfe5ef);
    border-radius: 999px;
    background: var(--wl-surface, #fff);
    color: inherit;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.wl-personalizer__toggle svg {
    width: 1.05rem;
    height: 1.05rem;
}

.wl-personalizer__panel {
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--wl-border, #dfe5ef);
    border-radius: var(--wl-radius, 16px);
    background: var(--wl-surface, #fff);
    box-shadow: 0 22px 70px rgba(15, 23, 42, .2);
}

.wl-personalizer__panel[hidden] { display: none; }
.wl-personalizer__panel h2 { margin: 0; font-size: 1rem; }
.wl-personalizer__panel p { margin: .25rem 0 1rem; color: var(--wl-muted, #667085); font-size: .86rem; }
.wl-personalizer__group { display: grid; gap: .45rem; min-width: 0; margin: .85rem 0 0; padding: 0; border: 0; }
.wl-personalizer__group > legend { width: auto; margin: 0; padding: 0; color: inherit; font-size: .75rem; font-weight: 800; letter-spacing: .04em; line-height: inherit; text-transform: uppercase; }
.wl-personalizer__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.wl-personalizer__choices--two { grid-template-columns: repeat(2, 1fr); }
.wl-personalizer__choices button {
    min-height: 40px;
    padding: .5rem;
    border: 1px solid var(--wl-border, #dfe5ef);
    border-radius: calc(var(--wl-radius, 16px) * .55);
    background: var(--wl-surface-subtle, #f4f7fb);
    color: inherit;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}
.wl-personalizer__choices button[aria-pressed="true"] {
    border-color: var(--wl-primary, #335cff);
    background: color-mix(in srgb, var(--wl-primary, #335cff) 12%, var(--wl-surface, #fff));
    color: var(--wl-primary-strong, #1d3fd1);
    font-weight: 800;
}
.wl-personalizer button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--wl-primary, #335cff) 30%, transparent);
    outline-offset: 2px;
}

:root[data-wl-motion="reduced"] *,
:root[data-wl-motion="reduced"] *::before,
:root[data-wl-motion="reduced"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
}

@media (max-width: 575.98px) {
    .wl-personalizer { right: .75rem; bottom: .75rem; }
    .wl-personalizer__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}