.rs-material-studio {
    --rs-purple: #6750a4;
    --rs-violet: #7f67be;
    --rs-lime: #eaddff;
    --rs-blue: #625b71;
    --rs-ink: #1d1b20;
    --rs-muted: #49454f;
    --rs-paper: #f7f2fa;
    --rs-line: rgba(29, 27, 32, 0.14);
    --rs-soft: #ece6f0;
    --rs-font: Roboto, Inter, system-ui, sans-serif;
    background: #f7f2fa;
    color: var(--rs-ink);
}

.rs-material-studio .rs-section-kicker,
.rs-material-studio .rs-panel-kicker {
    color: #6750a4;
    letter-spacing: 0.12em;
}

.rs-material-studio .rs-studio-title {
    color: #1d1b20;
    letter-spacing: -0.035em;
}

.rs-material-studio .rs-component-browser,
.rs-material-studio .rs-workbench,
.rs-material-studio .rs-code-dock {
    border-color: rgba(29, 27, 32, 0.12);
    background: #fffbfe;
    box-shadow: 0 1px 2px rgba(29, 27, 32, 0.16), 0 2px 8px rgba(29, 27, 32, 0.08);
}

.rs-material-studio .rs-component-browser {
    border-radius: 28px;
}

.rs-material-studio .rs-workbench {
    border-radius: 28px;
    overflow: clip;
}

.rs-material-studio .rs-style-control-panel,
.rs-material-studio .rs-component-option-panel,
.rs-material-studio .rs-preview-toolbar {
    background: #fffbfe;
}

.rs-material-studio .rs-style-control-panel,
.rs-material-studio .rs-component-option-panel {
    border-color: rgba(29, 27, 32, 0.12);
}

.rs-material-studio .rs-preset-group,
.rs-material-studio .rs-device-options {
    background: #ece6f0;
    border-radius: 999px;
}

.rs-material-studio .rs-preset,
.rs-material-studio .rs-device-button {
    border-radius: 999px;
    color: #49454f;
}

.rs-material-studio .rs-preset.is-active,
.rs-material-studio .rs-device-button.is-active {
    color: #21005d;
    background: #eaddff;
    box-shadow: none;
}

.rs-material-studio .rs-category-tab {
    border: 1px solid #79747e;
    border-radius: 10px;
    background: transparent;
    color: #49454f;
}

.rs-material-studio .rs-category-tab:hover,
.rs-material-studio .rs-category-tab.is-active {
    border-color: transparent;
    color: #21005d;
    background: #e8def8;
}

.rs-material-studio .rs-component-browser .rs-component-tab {
    border-color: rgba(121, 116, 126, 0.36);
    border-radius: 16px;
    background: #fffbfe;
    color: #49454f;
}

.rs-material-studio .rs-component-browser .rs-component-tab:hover {
    background: #f3edf7;
    transform: none;
}

.rs-material-studio .rs-component-browser .rs-component-tab.is-active {
    border-color: #6750a4;
    color: #21005d;
    background: #eaddff;
    box-shadow: 0 1px 3px rgba(29, 27, 32, 0.16);
}

.rs-material-studio .rs-component-browser .rs-component-tab > span,
.rs-material-studio .rs-component-browser .rs-component-tab small {
    color: #6750a4;
}

.rs-material-studio .rs-component-search,
.rs-material-studio .rs-component-select,
.rs-material-studio .rs-color-input {
    border-color: #79747e;
    background: #fffbfe;
}

.rs-material-studio .rs-range {
    --range-track: #cac4d0;
    --range-fill: #6750a4;
}

.rs-material-studio .rs-range::-webkit-slider-thumb {
    background: #6750a4;
    border-color: #fffbfe;
}

.rs-material-studio .rs-range::-moz-range-thumb {
    background: #6750a4;
    border-color: #fffbfe;
}

.rs-material-studio .rs-icon-button,
.rs-material-studio .rs-component-carousel-button,
.rs-material-studio .rs-output-toggle {
    border-color: #79747e;
    color: #49454f;
    background: #fffbfe;
}

.rs-material-studio .rs-icon-button:hover,
.rs-material-studio .rs-component-carousel-button:hover:not(:disabled),
.rs-material-studio .rs-output-toggle:hover {
    color: #21005d;
    background: #eaddff;
}

.rs-material-studio .rs-preview-toolbar {
    border-bottom-color: rgba(29, 27, 32, 0.12);
}

.rs-material-studio .rs-bg-material-light {
    background: linear-gradient(135deg, #fffbfe 0 48%, #eaddff 48% 74%, #d0bcff 74%);
}

.rs-material-studio .rs-bg-material-tonal {
    background: linear-gradient(135deg, #ffd8e4 0 34%, #e8def8 34% 67%, #b2ebf2 67%);
}

.rs-material-studio .rs-bg-material-dark {
    background: linear-gradient(135deg, #1d1b20 0 48%, #4a4458 48% 74%, #6750a4 74%);
}

.rs-material-studio .rs-preview-stage[data-background="material-light"] {
    background:
        radial-gradient(circle at 18% 18%, rgba(103, 80, 164, 0.16), transparent 34%),
        linear-gradient(145deg, #fffbfe, #f3edf7 54%, #eaddff);
}

.rs-material-studio .rs-preview-stage[data-background="material-tonal"] {
    background:
        radial-gradient(circle at 14% 78%, rgba(0, 104, 116, 0.22), transparent 34%),
        radial-gradient(circle at 86% 20%, rgba(125, 82, 96, 0.25), transparent 38%),
        linear-gradient(135deg, #fff8f7, #e8def8 52%, #d0e9ed);
}

.rs-material-studio .rs-preview-stage[data-background="material-dark"] {
    background:
        radial-gradient(circle at 22% 24%, rgba(208, 188, 255, 0.24), transparent 32%),
        radial-gradient(circle at 82% 78%, rgba(0, 214, 143, 0.16), transparent 36%),
        linear-gradient(145deg, #1d1b20, #2b2930 55%, #49454f);
}

.rs-material-studio .rs-preview-stage {
    transition: background 180ms ease;
}

.rs-material-studio .rs-live-component-preview {
    color: #1d1b20;
}

.rs-material-studio .rs-code-dock {
    border-radius: 24px 24px 0 0;
    background: rgba(246, 241, 250, .97);
    color: #251f2b;
    border-color: #d7c8e6;
    box-shadow: 0 10px 28px rgba(92, 72, 110, .10);
}

.rs-material-studio .rs-code-dock .rs-panel-title,
.rs-material-studio .rs-code-dock .rs-code-tab,
.rs-material-studio .rs-code-dock .rs-code-note {
    color: #62586b;
}

.rs-material-studio .rs-code-dock .rs-panel-title {
    color: #251f2b;
}

.rs-material-studio .rs-code-dock .rs-code-tab.is-active {
    color: #7b57c8;
}

.rs-material-studio .rs-code-dock .rs-code-tab.is-active::after {
    background: #7b57c8;
}

.rs-material-studio .rs-code-dock .rs-copy-button {
    color: #ffffff;
    background: #7b57c8;
    border-color: #7b57c8;
}

.rs-material-studio .rs-code-dock .rs-copy-button:hover {
    background: #704abd;
    border-color: #704abd;
}

.rs-material-studio .rs-code-dock .rs-download-button,
.rs-material-studio .rs-code-dock .rs-output-toggle {
    border-color: #d8cde3;
    color: #43374d;
    background: #ffffff;
}

.rs-material-studio .rs-code-dock .rs-download-button:hover,
.rs-material-studio .rs-code-dock .rs-output-toggle:hover {
    border-color: #cbb8e2;
    color: #43374d;
    background: #f3ecfa;
}

.rs-material-studio .rs-code-dock .rs-code-block {
    color: #2d2434;
    background: #fffdfe;
    border-color: #e4d9ee;
}

.rs-material-studio .rs-code-dock .rs-code-note {
    background: #e9ddff;
    border-color: #d7c8e6;
}

.rs-material-studio :is(button, input, select, textarea, a):focus-visible {
    outline-color: #6750a4;
}

@media (max-width: 599px) {
    .rs-material-studio .rs-component-option-list {
        grid-template-columns: 1fr;
    }

    .rs-material-studio .rs-output-dock-bar {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .rs-material-studio .rs-output-dock-title,
    .rs-material-studio .rs-code-dock .rs-code-tabs,
    .rs-material-studio .rs-code-dock .rs-dock-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .rs-material-studio .rs-code-dock .rs-code-tabs {
        order: initial;
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .rs-material-studio .rs-code-dock .rs-code-tab {
        flex: 0 0 auto;
        min-height: 40px;
    }

    .rs-material-studio .rs-code-dock .rs-dock-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rs-material-studio .rs-code-dock .rs-copy-button,
    .rs-material-studio .rs-code-dock .rs-download-button,
    .rs-material-studio .rs-code-dock .rs-output-toggle {
        display: inline-flex;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
    }

    .rs-material-studio .rs-code-dock .rs-download-complete {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rs-material-studio .rs-preview-stage,
    .rs-material-studio .rocos-material {
        transition: none !important;
    }
}