.rs-brutalism-studio {
    --rb-page-bg: #f3ebdd;
    --rb-surface: #fffdf7;
    --rb-surface-alt: #f7f1e8;
    --rb-ink: #111111;
    --rb-accent: #ffd500;
    --rb-blue: #00b7ff;
    --rb-pink: #ff4fd8;
    --rb-line: #111111;
    --rb-shadow-hard: 8px 8px 0 #111111;
    --rs-purple: #111111;
    --rs-violet: #111111;
    --rs-lime: #ffd500;
    --rs-blue: #005fcc;
    --rs-ink: #111111;
    --rs-muted: #4b463f;
    --rs-paper: #f3ebdd;
    --rs-line: #111111;
    --rs-soft: #fff4b8;
    --rs-font: Inter, Arial, system-ui, sans-serif;
    color: var(--rb-ink);
    background:
        linear-gradient(rgba(17, 17, 17, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, .045) 1px, transparent 1px),
        var(--rb-page-bg);
    background-size: 24px 24px;
}

.rs-brutalism-studio .rs-section-kicker,
.rs-brutalism-studio .rs-panel-kicker {
    color: var(--rb-ink);
    font-weight: 900;
    letter-spacing: .12em;
}

.rs-brutalism-studio .rs-studio-title,
.rs-brutalism-studio .rs-panel-title,
.rs-brutalism-studio .rs-component-option-title {
    color: var(--rb-ink);
    font-family: "Arial Black", Inter, Arial, sans-serif;
    letter-spacing: -.04em;
}

.rs-brutalism-studio .rs-studio-title {
    text-transform: uppercase;
    text-shadow: 4px 4px 0 var(--rb-accent);
}

.rs-brutalism-studio .rs-component-browser,
.rs-brutalism-studio .rs-workbench,
.rs-brutalism-studio .rs-code-dock {
    border: 3px solid var(--rb-line);
    border-radius: 4px;
    background: var(--rb-surface);
    box-shadow: var(--rb-shadow-hard);
}

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

.rs-brutalism-studio .rs-style-control-panel,
.rs-brutalism-studio .rs-component-option-panel,
.rs-brutalism-studio .rs-preview-toolbar {
    color: var(--rb-ink);
    background: var(--rb-surface);
    border-color: var(--rb-line);
}

.rs-brutalism-studio .rs-panel-head,
.rs-brutalism-studio .rs-component-option-heading {
    border-bottom-color: var(--rb-line);
}

.rs-brutalism-studio .rs-preset-group,
.rs-brutalism-studio .rs-device-options {
    gap: 4px;
    padding: 4px;
    border: 2px solid var(--rb-line);
    border-radius: 2px;
    background: var(--rb-surface-alt);
}

.rs-brutalism-studio .rs-preset,
.rs-brutalism-studio .rs-device-button {
    border-radius: 0;
    color: var(--rb-ink);
    font-weight: 800;
}

.rs-brutalism-studio .rs-preset:hover,
.rs-brutalism-studio .rs-device-button:hover,
.rs-brutalism-studio .rs-preset.is-active,
.rs-brutalism-studio .rs-device-button.is-active {
    color: var(--rb-ink);
    background: var(--rb-accent);
    box-shadow: 3px 3px 0 var(--rb-line);
    transform: translate(-1px, -1px);
}

.rs-brutalism-studio .rs-category-tab,
.rs-brutalism-studio .rs-component-browser .rs-component-tab {
    color: var(--rb-ink);
    border: 2px solid var(--rb-line);
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 3px 3px 0 var(--rb-line);
    font-weight: 800;
}

.rs-brutalism-studio .rs-category-tab:hover,
.rs-brutalism-studio .rs-category-tab.is-active,
.rs-brutalism-studio .rs-component-browser .rs-component-tab:hover,
.rs-brutalism-studio .rs-component-browser .rs-component-tab.is-active {
    color: var(--rb-ink);
    border-color: var(--rb-line);
    background: var(--rb-accent);
    box-shadow: 1px 1px 0 var(--rb-line);
    transform: translate(2px, 2px);
}

.rs-brutalism-studio .rs-component-browser .rs-component-tab > span,
.rs-brutalism-studio .rs-component-browser .rs-component-tab small {
    color: var(--rb-ink);
}

.rs-brutalism-studio .rs-component-search,
.rs-brutalism-studio .rs-component-select,
.rs-brutalism-studio .rs-color-input {
    color: var(--rb-ink);
    border: 2px solid var(--rb-line);
    border-radius: 2px;
    background: #ffffff;
}

.rs-brutalism-studio .rs-component-search:focus-within,
.rs-brutalism-studio .rs-component-select:focus-visible {
    box-shadow: 4px 4px 0 var(--rb-accent);
}

.rs-brutalism-studio .rs-range {
    --range-track: #d1cabd;
    --range-fill: #111111;
}

.rs-brutalism-studio .rs-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border: 3px solid var(--rb-line);
    border-radius: 0;
    background: var(--rb-accent);
    box-shadow: 2px 2px 0 var(--rb-line);
}

.rs-brutalism-studio .rs-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid var(--rb-line);
    border-radius: 0;
    background: var(--rb-accent);
    box-shadow: 2px 2px 0 var(--rb-line);
}

.rs-brutalism-studio .rs-icon-button,
.rs-brutalism-studio .rs-component-carousel-button,
.rs-brutalism-studio .rs-output-toggle {
    color: var(--rb-ink);
    border: 2px solid var(--rb-line);
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 3px 3px 0 var(--rb-line);
}

.rs-brutalism-studio .rs-icon-button:hover,
.rs-brutalism-studio .rs-component-carousel-button:hover:not(:disabled),
.rs-brutalism-studio .rs-output-toggle:hover {
    color: var(--rb-ink);
    background: var(--rb-accent);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--rb-line);
}

.rs-brutalism-studio .rs-preview-toolbar {
    border-bottom: 3px solid var(--rb-line);
}

.rs-brutalism-studio .rs-bg-brutal-grid {
    background-color: #fafafa;
    background-image: linear-gradient(#b8b8b8 1px, transparent 1px), linear-gradient(90deg, #b8b8b8 1px, transparent 1px);
    background-size: 8px 8px;
}

.rs-brutalism-studio .rs-bg-brutal-kraft {
    background-color: #e7d6b8;
    background-image: radial-gradient(#7d6d54 1px, transparent 1px);
    background-size: 7px 7px;
}

.rs-brutalism-studio .rs-bg-brutal-board {
    background: repeating-linear-gradient(135deg, #c8d7ff 0 9px, #b6c9ff 9px 10px);
}

.rs-brutalism-studio .rs-preview-stage[data-background="brutal-grid"] {
    background-color: #f8f8f8;
    background-image: linear-gradient(#d1d1d1 1px, transparent 1px), linear-gradient(90deg, #d1d1d1 1px, transparent 1px);
    background-size: 24px 24px;
}

.rs-brutalism-studio .rs-preview-stage[data-background="brutal-kraft"] {
    background-color: #e7d6b8;
    background-image: radial-gradient(rgba(91, 72, 42, .25) 1px, transparent 1px);
    background-size: 6px 6px;
}

.rs-brutalism-studio .rs-preview-stage[data-background="brutal-board"] {
    background: repeating-linear-gradient(135deg, #c8d7ff 0 38px, #b8ccff 38px 40px);
}

.rs-brutalism-studio .rs-code-dock {
    --rb-code-bg: #fffdf9;
    --rb-dock-bg: #fff8e7;
    color: var(--rb-ink);
    border-radius: 4px 4px 0 0;
    background: var(--rb-dock-bg);
    border-color: var(--rb-line);
    box-shadow: 8px 8px 0 var(--rb-line);
}

.rs-brutalism-studio .rs-code-dock .rs-panel-title,
.rs-brutalism-studio .rs-code-dock .rs-code-tab,
.rs-brutalism-studio .rs-code-dock .rs-code-note {
    color: var(--rb-ink);
}

.rs-brutalism-studio .rs-code-dock .rs-code-tab {
    border: 2px solid transparent;
    border-radius: 0;
    font-weight: 900;
}

.rs-brutalism-studio .rs-code-dock .rs-code-tab.is-active {
    color: var(--rb-ink);
    border-color: var(--rb-line);
    background: var(--rb-accent);
    box-shadow: 3px 3px 0 var(--rb-line);
}

.rs-brutalism-studio .rs-code-dock .rs-code-tab.is-active::after {
    display: none;
}

.rs-brutalism-studio .rs-code-dock .rs-copy-button,
.rs-brutalism-studio .rs-code-dock .rs-download-button,
.rs-brutalism-studio .rs-code-dock .rs-output-toggle {
    color: var(--rb-ink);
    border: 2px solid var(--rb-line);
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 3px 3px 0 var(--rb-line);
}

.rs-brutalism-studio .rs-code-dock .rs-copy-button {
    background: var(--rb-accent);
}

.rs-brutalism-studio .rs-code-dock :is(.rs-copy-button, .rs-download-button, .rs-output-toggle):hover {
    color: var(--rb-ink);
    border-color: var(--rb-line);
    background: var(--rb-blue);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--rb-line);
}

.rs-brutalism-studio .rs-code-dock .rs-code-block {
    color: #171717;
    background: var(--rb-code-bg);
    border: 2px solid var(--rb-line);
    border-radius: 0;
    box-shadow: inset 4px 0 0 var(--rb-accent);
}

.rs-brutalism-studio .rs-code-dock .rs-code-block ::selection {
    color: var(--rb-ink);
    background: #ffe76a;
}

.rs-brutalism-studio .rs-code-dock .rs-code-note {
    background: #fff4b8;
    border: 2px solid var(--rb-line);
    border-radius: 0;
}

.rs-brutalism-studio :is(button, input, select, textarea, a):focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}

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

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

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

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

    .rs-brutalism-studio .rs-code-dock .rs-code-tab {
        flex: 1 0 100px;
        min-height: 44px;
    }

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

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

@media (prefers-reduced-motion: reduce) {
    .rs-brutalism-studio *,
    .rs-brutalism-studio *::before,
    .rs-brutalism-studio *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}