.rs-fluent-studio {
    --rs-purple: #0f6cbd;
    --rs-violet: #368ad0;
    --rs-lime: #d6ecff;
    --rs-blue: #0f6cbd;
    --rs-ink: #1f2328;
    --rs-muted: #5f6368;
    --rs-paper: #f3f6fb;
    --rs-line: rgba(31, 35, 40, .12);
    --rs-soft: #e8edf4;
    --rs-font: "Segoe UI", Inter, system-ui, sans-serif;
    color: var(--rs-ink);
    background: linear-gradient(145deg, #f6f9fd, #eaf0f8);
}

.rs-fluent-studio .rs-section-kicker,
.rs-fluent-studio .rs-panel-kicker,
.rs-fluent-studio .rs-component-browser .rs-component-tab > span,
.rs-fluent-studio .rs-component-browser .rs-component-tab small {
    color: #0f6cbd;
}

.rs-fluent-studio .rs-component-browser,
.rs-fluent-studio .rs-workbench,
.rs-fluent-studio .rs-code-dock {
    border-color: rgba(31, 35, 40, .12);
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
    box-shadow: 0 8px 24px rgba(31, 35, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .78);
}

.rs-fluent-studio .rs-component-browser,
.rs-fluent-studio .rs-workbench {
    border-radius: 18px;
}

.rs-fluent-studio .rs-workbench {
    overflow: clip;
}

.rs-fluent-studio .rs-style-control-panel,
.rs-fluent-studio .rs-component-option-panel,
.rs-fluent-studio .rs-preview-toolbar {
    background: rgba(255, 255, 255, .7);
    border-color: rgba(31, 35, 40, .1);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    backdrop-filter: blur(20px) saturate(130%);
}

.rs-fluent-studio .rs-preset-group,
.rs-fluent-studio .rs-device-options {
    padding: 3px;
    background: rgba(31, 35, 40, .06);
    border: 1px solid rgba(31, 35, 40, .08);
    border-radius: 10px;
}

.rs-fluent-studio .rs-preset,
.rs-fluent-studio .rs-device-button,
.rs-fluent-studio .rs-category-tab,
.rs-fluent-studio .rs-component-browser .rs-component-tab,
.rs-fluent-studio .rs-icon-button,
.rs-fluent-studio .rs-component-carousel-button,
.rs-fluent-studio .rs-component-search,
.rs-fluent-studio .rs-component-select,
.rs-fluent-studio .rs-color-input {
    color: #34383d;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(31, 35, 40, .14);
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .06), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.rs-fluent-studio .rs-preset.is-active,
.rs-fluent-studio .rs-device-button.is-active,
.rs-fluent-studio .rs-category-tab.is-active,
.rs-fluent-studio .rs-component-browser .rs-component-tab.is-active {
    color: #ffffff;
    background: #0f6cbd;
    border-color: #0f6cbd;
    box-shadow: 0 2px 7px rgba(15, 108, 189, .24), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.rs-fluent-studio .rs-component-browser .rs-component-tab:hover,
.rs-fluent-studio .rs-category-tab:hover,
.rs-fluent-studio .rs-icon-button:hover,
.rs-fluent-studio .rs-component-carousel-button:hover:not(:disabled) {
    color: #0f548c;
    background: rgba(15, 108, 189, .09);
    border-color: rgba(15, 108, 189, .38);
    transform: none;
    box-shadow: 0 0 0 1px rgba(15, 108, 189, .06), 0 3px 10px rgba(31, 35, 40, .08);
}

.rs-fluent-studio .rs-range {
    --range-track: #d3d9e2;
    --range-fill: #0f6cbd;
}

.rs-fluent-studio .rs-range::-webkit-slider-thumb,
.rs-fluent-studio .rs-range::-moz-range-thumb {
    background: #0f6cbd;
    border: 3px solid #ffffff;
    box-shadow: 0 1px 4px rgba(31, 35, 40, .28);
}

.rs-fluent-studio .rs-bg-fluent-sky {
    background: linear-gradient(135deg, #f8fbff 0 44%, #b9ddff 44% 72%, #0f6cbd 72%);
}

.rs-fluent-studio .rs-bg-fluent-bloom {
    background: linear-gradient(135deg, #edf7ff 0 38%, #68c9ff 38% 66%, #8067dc 66%);
}

.rs-fluent-studio .rs-bg-fluent-night {
    background: linear-gradient(135deg, #232a35 0 44%, #344c68 44% 72%, #63b8f1 72%);
}

.rs-fluent-studio .rs-preview-stage[data-background="fluent-sky"] {
    background: radial-gradient(circle at 18% 24%, rgba(77, 169, 238, .58), transparent 32%), radial-gradient(circle at 82% 74%, rgba(139, 113, 224, .34), transparent 34%), linear-gradient(145deg, #eef7ff, #dce8f6);
}

.rs-fluent-studio .rs-preview-stage[data-background="fluent-bloom"] {
    background: radial-gradient(circle at 20% 76%, rgba(39, 190, 210, .58), transparent 32%), radial-gradient(circle at 76% 18%, rgba(124, 92, 220, .6), transparent 36%), linear-gradient(145deg, #e8f4ff, #d6e6f4);
}

.rs-fluent-studio .rs-preview-stage[data-background="fluent-night"] {
    background: radial-gradient(circle at 22% 22%, rgba(52, 143, 211, .45), transparent 34%), radial-gradient(circle at 80% 72%, rgba(114, 81, 203, .38), transparent 36%), linear-gradient(145deg, #17202c, #28384c);
}

.rs-fluent-studio .rs-code-dock {
    color: #252a30;
    background: rgba(246, 249, 253, .96);
    border-radius: 16px 16px 0 0;
}

.rs-fluent-studio .rs-code-block {
    color: #252a30;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(31, 35, 40, .12);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(31, 35, 40, .06);
}

.rs-fluent-studio .rs-copy-button {
    color: #ffffff;
    background: #0f6cbd;
    border-color: #0f6cbd;
    border-radius: 8px;
}

.rs-fluent-studio .rs-download-button,
.rs-fluent-studio .rs-output-toggle {
    color: #34383d;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(31, 35, 40, .14);
    border-radius: 8px;
}

.rs-fluent-studio :is(button, input, select, textarea, a):focus-visible {
    outline-color: #0f6cbd;
    outline-width: 2px;
}

@media (max-width: 599px) {
    .rs-fluent-studio .rs-component-browser,
    .rs-fluent-studio .rs-workbench {
        border-radius: 12px;
    }

    .rs-fluent-studio .rs-component-browser,
    .rs-fluent-studio .rs-workbench,
    .rs-fluent-studio .rs-code-dock {
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        backdrop-filter: blur(12px) saturate(120%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rs-fluent-studio *,
    .rs-fluent-studio *::before,
    .rs-fluent-studio *::after {
        transition-duration: .01ms !important;
    }
}