:root{--webgpu-bg: #282828;--webgpu-surface: #303030;--webgpu-surface-2: #383838;--webgpu-surface-3: #2a2a2a;--webgpu-surface-4: #303030;--webgpu-surface-5: #282828;--webgpu-surface-muted: #303030;--webgpu-border: rgba(80, 80, 80, .7);--webgpu-border-strong: rgba(100, 100, 100, .6);--webgpu-border-stronger: rgba(120, 120, 120, .6);--webgpu-text: #e0e0e0;--webgpu-text-muted: #ccc;--webgpu-text-subtle: #999;--webgpu-text-faint: #777;--webgpu-accent: #77b2ff;--webgpu-accent-soft: rgba(119, 178, 255, .1);--webgpu-accent-soft-2: rgba(119, 178, 255, .15);--webgpu-accent-soft-3: rgba(119, 178, 255, .08);--webgpu-accent-outline: rgba(119, 178, 255, .3);--webgpu-font: var(--tertiary-font, system-ui, sans-serif);--webgpu-mono-font: var(--code-font, monospace);--webgpu-input-bg: #383838;--webgpu-input-bg-muted: #2e2e2e;--webgpu-input-bg-strong: #404040;--webgpu-input-border: rgba(100, 100, 100, .6);--webgpu-hover-bg: rgba(255, 255, 255, .06);--webgpu-hover-bg-2: rgba(255, 255, 255, .08);--webgpu-icon-bg: transparent;--webgpu-icon-border: rgba(100, 100, 100, .6);--webgpu-icon-color: #ccc;--webgpu-success-text: #4ade80;--webgpu-success-bg: rgba(74, 222, 128, .1);--webgpu-success-border: rgba(74, 222, 128, .3);--webgpu-success-hover-bg: rgba(74, 222, 128, .15);--webgpu-success-hover-border: rgba(74, 222, 128, .4);--webgpu-success-outline: rgba(74, 222, 128, .2);--webgpu-error-text: #ff6b6b;--webgpu-error-bg: rgba(255, 107, 107, .1);--webgpu-error-overlay-bg: rgba(60, 30, 30, .95);--webgpu-danger-bg: rgba(255, 107, 107, .1);--webgpu-danger-border: rgba(255, 107, 107, .3);--webgpu-danger-hover-bg: rgba(255, 107, 107, .15);--webgpu-danger-hover-border: rgba(255, 107, 107, .4);--webgpu-overlay-bg: rgba(40, 40, 40, .95)}.webgpu-host{font-family:var(--webgpu-font);color:var(--webgpu-text);background:var(--webgpu-bg)}.webgpu-overlay-panel{position:absolute;background:#1e1e1e80;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(80,80,80,.7);display:flex;flex-direction:column;overflow:hidden;font-family:var(--webgpu-font);color-scheme:dark;transition:height .3s cubic-bezier(.4,0,.2,1),opacity 1s ease-in-out}.webgpu-overlay-panel.collapsed{height:44px}.webgpu-overlay-panel-header{display:flex;align-items:center;height:44px;flex-shrink:0;cursor:pointer;width:100%;box-sizing:border-box;padding:0 15px 0 0}.webgpu-overlay-panel-content{flex-grow:1;min-height:0;overflow:hidden;opacity:1;transition:opacity .5s ease}.webgpu-overlay-panel-content.hidden{opacity:0}.webgpu-overlay-panel-scrollable{height:100%;padding:16px;color:var(--webgpu-text);display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;font-size:14px;box-sizing:border-box}.webgpu-widget-overlay{position:absolute;background:#1e1e1ea6;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(80,80,80,.7);display:flex;flex-direction:column;overflow:hidden;font-family:var(--webgpu-font);color-scheme:dark;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;z-index:10}.webgpu-widget-overlay.collapsed{height:36px}.webgpu-widget-overlay-header{display:flex;align-items:center;height:36px;flex-shrink:0;cursor:pointer;width:100%;box-sizing:border-box;padding:0 10px 0 0}.webgpu-widget-overlay-content{flex-grow:1;min-height:0;overflow:hidden;opacity:1;transition:opacity .3s ease}.webgpu-widget-overlay-content.hidden{opacity:0;pointer-events:none}.webgpu-widget-overlay-scrollable{height:100%;padding:12px;color:var(--webgpu-text);display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;font-size:12px;box-sizing:border-box}.webgpu-squared,.webgpu-squared *,.webgpu-input,.webgpu-select,.webgpu-button,.webgpu-details,.webgpu-summary,.webgpu-panel,.webgpu-container,.webgpu-dropdown,.webgpu-menu{border-radius:0!important}.webgpu-button{font-family:var(--webgpu-font);font-size:12px;color:var(--webgpu-text);padding:8px;background:transparent;border:1px solid var(--webgpu-border-strong);border-radius:0;cursor:pointer;text-align:center;transition:all .2s ease}.webgpu-button:hover{background:var(--webgpu-hover-bg);border-color:var(--webgpu-border-stronger)}.webgpu-button-small{padding:6px;font-size:11px}.webgpu-button-icon{background:var(--webgpu-icon-bg);border:1px solid var(--webgpu-icon-border);color:var(--webgpu-icon-color);padding:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}.webgpu-button-success{background:var(--webgpu-success-bg);border:1px solid var(--webgpu-success-border)}.webgpu-button-success:hover{background:var(--webgpu-success-hover-bg);border-color:var(--webgpu-success-hover-border)}.webgpu-button-danger{background:var(--webgpu-danger-bg);border:1px solid var(--webgpu-danger-border)}.webgpu-button-danger:hover{background:var(--webgpu-danger-hover-bg);border-color:var(--webgpu-danger-hover-border)}.webgpu-input{font-family:var(--webgpu-font);font-size:12px;width:100%;background:var(--webgpu-input-bg);color:var(--webgpu-text);border:1px solid var(--webgpu-input-border);border-radius:0;padding:6px 4px;box-sizing:border-box;appearance:textfield;text-align:right;transition:all .2s ease}.webgpu-input:focus{background:var(--webgpu-input-bg-strong);border-color:var(--webgpu-accent);outline:none}.webgpu-select{font-family:var(--webgpu-font);font-size:12px;width:100%;padding:6px;background:var(--webgpu-input-bg-muted);border:1px solid var(--webgpu-input-border);border-radius:0;color:var(--webgpu-text);flex-grow:1;transition:all .2s ease;outline:none}.webgpu-select:focus{background:var(--webgpu-surface-2);border-color:var(--webgpu-accent)}.webgpu-details{border:1px solid var(--webgpu-border);border-radius:0;margin-bottom:2px}.webgpu-summary{font-weight:700;padding:4px;cursor:pointer;background:var(--webgpu-surface-2);display:flex;align-items:center;color:var(--webgpu-text);font-size:14px;list-style:none}.webgpu-details-content{padding:10px;background:var(--webgpu-surface-3);display:flex;flex-direction:column;gap:2px}.webgpu-gpu-badge{display:inline-block;padding:6px 12px;background-color:transparent;color:var(--webgpu-text-muted);font-size:11px;font-weight:600;border:none;border-left:2px solid var(--webgpu-accent);text-transform:uppercase;letter-spacing:.04em;transition:color .2s ease,background-color .2s ease}.webgpu-scrollable::-webkit-scrollbar{width:6px;height:6px}.webgpu-scrollable::-webkit-scrollbar-track{background:var(--webgpu-surface-3)}.webgpu-scrollable::-webkit-scrollbar-thumb{background:var(--webgpu-border-strong);border-radius:0}.webgpu-scrollable::-webkit-scrollbar-thumb:hover{background:var(--webgpu-border-stronger)}.webgpu-text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.webgpu-text-muted{color:var(--webgpu-text-muted)}.webgpu-text-subtle{color:var(--webgpu-text-subtle)}.webgpu-text-faint{color:var(--webgpu-text-faint)}.webgpu-text-accent{color:var(--webgpu-accent)}.webgpu-flex-row{display:flex;align-items:center;gap:4px}.webgpu-flex-between{display:flex;align-items:center;justify-content:space-between}.webgpu-flex-center{display:flex;align-items:center;justify-content:center}.webgpu-tab-panel{border-radius:0!important}.webgpu-tab-panel-sidebar{border-radius:0!important;border-right:1px solid var(--webgpu-border-strong)}.webgpu-tab-panel-content{border-radius:0!important}.webgpu-tab-button{border-radius:0!important;border-right:2px solid transparent}.webgpu-tab-button.active{background:var(--webgpu-accent-soft);color:var(--webgpu-accent);border-right-color:var(--webgpu-accent)}@keyframes webgpu-fade-in{0%{opacity:0}to{opacity:1}}@keyframes webgpu-slide-in{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.webgpu-animate-fade{animation:webgpu-fade-in .3s ease}.webgpu-animate-slide{animation:webgpu-slide-in .3s ease}
