:root {
            --font-size-sm: 14px;
            --font-size-xsm: 13px;
            --font-size-path: 0.8rem;
        }
        :root {
            /* layout */
            --radius: 4px;
            --h: 48px;
            --tabs: 38px;

            /* split only applies to WORK AREA (editor+preview), not assets */
            --split: 50%;
            --gutter: 7px;

            --panel-w: 320px;
            --assets-w: 460px;

            /* colors */
            --color-bg: var(--bg-primary);
            --color-bg-alt: #181b1d;
            --color-button: #22262a;
            --color-button-hover: #2c3033;
            --color-text-fg: #b4c7d1;
            --color-text-muted: #94aab4;
            --color-border: #293438;
            --color-border-hover: #3e4a4e;
            --color-run: #046113;
            --color-stop: #7a3a06;
            --color-code: #0053a6;

            /* effects */
            --shadow: 0 10px 30px rgba(0, 0, 0, .35);

            /* console */
            --consoleH: 180px;
            --consoleResize: 7px;
            --color-error: #ff5d5d;
            --color-warn: #ffb84d;
            --color-info: #4db3ff;
            --color-debug: #9a7bff;
            --color-note-text: var(--color-text-fg);
        }
        .minimap-decorations-layer {
            border-right: none;
        }

        .monaco-hover-content {
            background-color: var(--color-bg-alt) !important;
        }

        .monaco-menu {
            background-color: var(--color-button);
            color: var(--color-text-fg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius) !important;
            position: fixed;
            box-shadow: var(--shadow);
            font-size: var(--font-size-sm) !important;
            display: flex;
            padding: 6px;
            gap: 6px;
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important;

        }

        .monaco-menu .monaco-menu {
            margin-top: -35px;
            border-radius: var(--radius) !important;
        }

        .monaco-menu .action-item {
            font-size: var(--font-size-xsm) !important;
            padding: 0.15rem 10px !important;
            padding-bottom: 0rem !important;
            padding-left: 0.1rem !important;
            padding-right: 1.2rem;
            position: relative;
            margin-bottom: 6px;
            border-radius: 4px;
            color: var(--color-text-fg);
            font-weight: 500;
            align-items: center !important;
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important;
            font-weight: 400;
        }

        .monaco-menu .action-item i {
            position: relative;
            top: -1px;
        }

        .monaco-menu .action-item:last-child {
            margin-bottom: -4px;
        }

        .monaco-menu .action-item:first-child {
            margin-top: -4px;
        }

        .monaco-menu .action-item:hover {
            background-color: var(--color-button-hover);
            color: var(--color-text-fg);
        }

        .monaco-menu .disabled {
            padding: 0 !important;
            max-height: 1px;
            background-color: var(--color-border);
            cursor: default;
            pointer-events: none;
            border: none !important;
        }

        .monaco-menu .action-item span:nth-child(3) {
            color: var(--color-note-text);
        }

        .monaco-menu .action-item:hover.action-item span:nth-child(3) {
            color: inherit !important;
        }

        .monaco-menu .action-item .action-menu-item {
            background: none !important;
            color: inherit !important;
        }

        .monaco-menu .action-item.focused .action-menu-item,
        .monaco-menu .action-item.checked .action-menu-item,
        .monaco-menu .action-item.selected .action-menu-item {
            background: none !important;
            color: inherit !important;
        }

        .monaco-menu .action-item:hover {
            background-color: var(--color-border);
            color: var(--color-text-fg);
        }

        .monaco-editor .peekview-widget {
            background-color: var(--color-bg-alt) !important;
            border: 2px solid var(--color-border) !important;
            border-radius: var(--radius) !important;
        }

        .monaco-editor .peekview-widget .peekview-editor .monaco-editor {
            background-color: var(--color-bg-alt) !important;
        }

        .monaco-editor .peekview-widget .peekview-editor .monaco-editor .lines-content {
            background-color: var(--color-bg-alt) !important;
        }

        .monaco-editor .peekview-widget .head {
            background-color: var(--color-bg) !important;
            color: var(--color-text-fg) !important;
            font-size: var(--font-size-sm) !important;
            border-bottom: 1px solid var(--color-border) !important;
            padding: 0 10px;
        }

        .monaco-editor .body {
            border: none !important;
        }

        .peekview-widget {
            background-color: var(--color-bg-alt) !important;
        }

        .peekview-widget .peekview-editor .editor-widget,
        .peekview-widget .peekview-editor .monaco-editor,
        .peekview-widget .peekview-editor .monaco-editor-background,
        .peekview-widget .peekview-editor .lines-content {
            background-color: var(--color-bg-alt) !important;
        }

        .peekview-widget .peekview-editor .margin-view-overlays,
        .peekview-widget .peekview-editor .glyph-margin,
        .peekview-widget .peekview-editor .margin {
            background-color: var(--color-bg-alt) !important;
        }

        .monaco-editor .reference-zone-widget .ref-tree {
            line-height: 23px;
            background-color: var(--color-bg-alt) !important;
            color: var(--color-text-fg) !important;
            border-left: 1px solid var(--color-border);
        }

        .monaco-editor .reference-zone-widget .ref-tree {
            line-height: 23px;
            color: var(--color-text-fg) !important;
        }

        .monaco-editor .find-widget {
            background-color: var(--color-bg-alt) !important;
            border: 1px solid var(--color-border) !important;
            border-top: none !important;
            backdrop-filter: blur(10px);
        }

        .monaco-editor .find-widget .monaco-sash {
            background-color: var(--color-border) !important;
        }

        .monaco-sash.hover::before {
            background-color: var(--color-code) !important;
        }

        .monaco-inputbox>.ibwrapper {
            background-color: var(--color-border) !important;
            border: none !important;
        }

        .monaco-inputbox {
            border: 1px solid var(--color-border) !important;
            margin-left: 6px !important;
        }

        .monaco-editor .find-widget .button.left {
            margin-left: 2px !important;
            margin-top: 3px !important;
        }

        .monaco-editor .find-widget .button.toggle {
            height: 25px !important;
            border-radius: 5px !important;
            min-width: 16px;
        }

        .monaco-editor .find-widget .button,
        .monaco-editor .find-widget>.button.codicon-widget-close {
            min-width: 22px;
            min-height: 22px;
            padding: 3px;
            border-radius: 5px;
        }

        .monaco-editor .find-widget.no-results .matchesCount {
            color: var(--color-error) !important;
            font-weight: 600 !important;
            font-size: 13px !important;
        }

        .quick-input-widget {
            background-color: var(--color-bg-alt) !important;
            color: var(--color-text-fg) !important;
            border: 1px solid var(--color-border) !important;
            border-radius: var(--radius) !important;
            box-shadow: var(--shadow) !important;
        }

        .quick-input-widget .input {
            background-color: var(--color-bg-alt) !important;
            color: var(--color-text-fg) !important;
            max-width: calc(100% - 0px);
            outline: none;
            border-radius: 4px;
        }

        .quick-input-widget .input:focus {
            border-color: var(--color-border);
            color: var(--color-text-fg);
            outline: 2px solid var(--color-code);
        }

        .quick-input-widget .monaco-inputbox,
        .quick-input-widget .monaco-inputbox>.ibwrapper {
            background-color: transparent !important;
            max-width: calc(100% - 5px);
            border: none !important;
        }

        .quick-input-widget .monaco-list .monaco-list-row {
            background: transparent !important;
            color: var(--color-text-fg) !important;
        }

        .monaco-list.list_id_7 .monaco-list-rows {
            background: var(--color-bg-alt) !important;
        }

        .quick-input-widget .monaco-list-row.focused,
        .quick-input-widget .monaco-list-row.selected {
            background-color: var(--color-button) !important;
            color: var(--color-text-fg) !important;
        }

        .quick-input-widget .monaco-list-row:hover {
            background-color: var(--color-button-hover) !important;
            color: var(--color-text-fg) !important;
        }

        .quick-input-widget .monaco-scrollable-element::-webkit-scrollbar-thumb {
            background-color: var(--color-border) !important;
        }

        .quick-input-widget .monaco-list-row .highlight {
            color: var(--color-code) !important;
            font-weight: 600;
        }

        .quick-input-widget .monaco-list .monaco-list-row .monaco-tl-contents {
            background: none !important;
        }

        .suggest-widget {
            background-color: var(--color-bg-alt) !important;
            color: var(--color-text-fg) !important;
            border: 1px solid var(--color-border) !important;
            box-shadow: var(--shadow) !important;
            overflow: hidden;
        }

        .suggest-widget .tree {
            background-color: transparent !important;
            border: none !important;
            overflow: hidden;
        }

        .suggest-widget .monaco-list {
            background-color: transparent !important;
            border: none !important;
        }

        .suggest-widget .monaco-scrollable-element {
            background-color: transparent !important;
        }

        .suggest-widget .monaco-list {
            background-color: var(--color-bg-alt) !important;
        }

        .suggest-widget .monaco-list-row {
            background: transparent !important;
            color: var(--color-text-fg) !important;
        }

        .suggest-widget .monaco-list-row.focused,
        .suggest-widget .monaco-list-row.selected {
            background-color: var(--color-button) !important;
            color: var(--color-text-fg) !important;
        }

        .suggest-widget .monaco-list-row .highlight {
            color: var(--color-code) !important;
            font-weight: 600;
        }

        .suggest-widget .monaco-list-row:hover {
            background-color: var(--color-button-hover) !important;
            color: var(--color-text-fg) !important;
        }

        .suggest-widget .monaco-scrollable-element::-webkit-scrollbar-thumb {
            background-color: var(--color-border) !important;
        }

        .parameter-hints-widget {
            background-color: var(--color-bg-alt) !important;
            color: var(--color-text-fg) !important;
            border: 1px solid var(--color-border) !important;
        }

        .inspect-widget {
            background-color: var(--color-bg-alt) !important;
            color: var(--color-text-fg) !important;
            border: 1px solid var(--color-border) !important;
        }

        .accessible-view {
            background-color: var(--color-bg-alt) !important;
            color: var(--color-text-fg) !important;
            border: 1px solid var(--color-border) !important;
        }

        .inline-completions-widget {
            color: var(--color-note-text) !important;
            opacity: 0.7;
        }

        .monaco-diff-editor .review-widget {
            background-color: var(--color-bg-alt) !important;
            color: var(--color-text-fg) !important;
            border: 1px solid var(--color-border) !important;
        }

        .monaco-hover {
            background-color: var(--color-bg) !important;
            color: var(--color-text-fg) !important;
            border: 1px solid var(--color-border) !important;
            box-shadow: var(--shadow) !important;
            backdrop-filter: blur(8px);
        }

        .monaco-hover-content {
            background-color: transparent !important;
            color: var(--color-text-fg) !important;
        }

        .hover-row {
            background-color: transparent !important;
            color: var(--color-text-fg) !important;
        }

        .hover-row.colorpicker {
            background-color: transparent !important;
        }

        .monaco-hover .monaco-scrollable-element::-webkit-scrollbar-thumb {
            background-color: var(--color-border) !important;
        }

        .accessible-view {
            box-shadow: var(--shadow);
        }

        .accessible-view .monaco-list {
            background: transparent !important;
        }

        .accessible-view .monaco-list-row {
            background: transparent !important;
            color: var(--color-text-fg) !important;
        }

        .accessible-view .monaco-list-row.focused,
        .accessible-view .monaco-list-row.selected {
            background-color: var(--color-button) !important;
            color: var(--color-text-fg) !important;
        }

        .accessible-view .monaco-scrollable-element::-webkit-scrollbar-thumb {
            background-color: var(--color-border) !important;
        }

        .line-highlight-default {
            background-color: var(--color-button);
        }

        .line-highlight-log {
            background-color: rgba(119, 119, 119, 0.2);
        }

        .line-highlight-warn {
            background-color: rgba(255, 193, 7, 0.25);
        }

        .line-highlight-error {
            background-color: rgba(220, 53, 69, 0.25);
        }

        .line-highlight-debug {
            background-color: rgba(154, 123, 255, 0.25);
        }

        .line-highlight-info {
            background-color: rgba(77, 179, 255, 0.25);
        }

        .file-path-header {
            height: 25px;
            display: flex;
            align-items: center;
            padding: 0px 12px;
            background-color: var(--color-bg-alt);
            color: var(--color-note-text);
            font-size: var(--font-size-path);
            font-weight: 500;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            scrollbar-width: none;
        }

        .file-path-header::-webkit-scrollbar {
            display: none;
        }

        .file-path-header .path-segment {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .file-path-header .path-segment i {
            font-size: 13px;
            color: var(--color-note-text);
        }

        .file-path-header .separator {
            margin: 0 2px;
            color: var(--color-note-text);
            font-size: 14px;
        }

        .monaco-menu .action-item i.ti {
            font-size: 14px !important;
            vertical-align: middle;
            margin-right: 8px;
            margin-left: -20px;
        }

        .monaco-editor .scrollbar>.slider,
        .monaco-scrollable-element .scrollbar>.slider {
            background: var(--color-border) !important;
        }

        @supports (color:color-mix(in oklab, white 50%, black 50%)) {
            @media (prefers-color-scheme:light) {

                .monaco-editor .scrollbar>.slider:hover,
                .monaco-scrollable-element .scrollbar>.slider:hover {
                    background: color-mix(in oklab, var(--color-border) 88%, black 12%) !important;
                }

                .monaco-editor .scrollbar>.slider.active,
                .monaco-scrollable-element .scrollbar>.slider.active {
                    background: color-mix(in oklab, var(--color-border) 80%, black 20%) !important;
                }
            }

            @media (prefers-color-scheme:dark) {

                .monaco-editor .scrollbar>.slider:hover,
                .monaco-scrollable-element .scrollbar>.slider:hover {
                    background: color-mix(in oklab, var(--color-border) 88%, white 12%) !important;
                }

                .monaco-editor .scrollbar>.slider.active,
                .monaco-scrollable-element .scrollbar>.slider.active {
                    background: color-mix(in oklab, var(--color-border) 80%, white 20%) !important;
                }
            }

            .monaco-editor.vs .scrollbar>.slider:hover,
            .monaco-scrollable-element.vs .scrollbar>.slider:hover {
                background: color-mix(in oklab, var(--color-border) 88%, black 12%) !important;
            }

            .monaco-editor.vs .scrollbar>.slider.active,
            .monaco-scrollable-element.vs .scrollbar>.slider.active {
                background: color-mix(in oklab, var(--color-border) 80%, black 20%) !important;
            }

            .monaco-editor.vs-dark .scrollbar>.slider:hover,
            .monaco-scrollable-element.vs-dark .scrollbar>.slider:hover {
                background: color-mix(in oklab, var(--color-border) 88%, white 12%) !important;
            }

            .monaco-editor.vs-dark .scrollbar>.slider.active,
            .monaco-scrollable-element.vs-dark .scrollbar>.slider.active {
                background: color-mix(in oklab, var(--color-border) 80%, white 20%) !important;
            }
        }

        @supports not (color:color-mix(in oklab, white 50%, black 50%)) {
            @media (prefers-color-scheme:light) {

                .monaco-editor .scrollbar>.slider:hover,
                .monaco-scrollable-element .scrollbar>.slider:hover {
                    filter: brightness(0.92) !important;
                }

                .monaco-editor .scrollbar>.slider.active,
                .monaco-scrollable-element .scrollbar>.slider.active {
                    filter: brightness(0.84) !important;
                }
            }

            @media (prefers-color-scheme:dark) {

                .monaco-editor .scrollbar>.slider:hover,
                .monaco-scrollable-element .scrollbar>.slider:hover {
                    filter: brightness(1.10) !important;
                }

                .monaco-editor .scrollbar>.slider.active,
                .monaco-scrollable-element .scrollbar>.slider.active {
                    filter: brightness(1.20) !important;
                }
            }
        }