Files
Toolbox/public/tools/thought_lab/labs/kaleidoscope/kimi_k2.7_kaleidoscope.html
T
yangxiangyuan 876a3b8768 feat(thought-lab): 新增万花筒与闵可夫斯基画板两个思想实验室
新增两个独立思想实验室:
1. 万花筒模拟器:支持可调参数物理万花筒效果,配置方案SQLite持久化
2. 闵可夫斯基画板:支持世界线绘制、洛伦兹变换、光锥因果判定
同时添加自动绑定实验室后端的逻辑,以及配套的单元测试与前端页面
2026-08-06 17:41:43 +08:00

3482 lines
176 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN" data-theme="light" data-trae-theme="dark"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>老式物理万花筒模拟器</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #0d0d12;
color: #e8e6e3;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 16px;
overflow-x: hidden;
}
h1 {
font-size: 1.4rem;
font-weight: 400;
letter-spacing: 4px;
margin-bottom: 12px;
color: #d4c4a8;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* 控制面板 */
#controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 18px;
max-width: 980px;
margin-bottom: 12px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(212, 196, 168, 0.15);
border-radius: 12px;
backdrop-filter: blur(4px);
}
.control-group {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
white-space: nowrap;
}
.control-group label {
color: #b8b0a0;
min-width: 80px;
text-align: right;
}
input[type="range"] {
width: 110px;
accent-color: #c9a66b;
cursor: pointer;
}
.value-display {
display: inline-block;
min-width: 42px;
text-align: left;
color: #f0e6d2;
font-variant-numeric: tabular-nums;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 6px;
color: #b8b0a0;
cursor: pointer;
}
.checkbox-group input {
accent-color: #c9a66b;
width: 16px;
height: 16px;
cursor: pointer;
}
button {
padding: 6px 14px;
border: 1px solid #c9a66b;
background: rgba(201, 166, 107, 0.12);
color: #f0e6d2;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
transition: background 0.2s, transform 0.1s;
}
button:hover {
background: rgba(201, 166, 107, 0.25);
}
button:active {
transform: translateY(1px);
}
/* 预设按钮组 */
#presets {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
max-width: 980px;
margin-bottom: 16px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(212, 196, 168, 0.10);
border-radius: 10px;
}
#presets .preset-label {
color: #8a8275;
font-size: 0.8rem;
margin-right: 4px;
display: flex;
align-items: center;
}
#presets button {
padding: 4px 12px;
font-size: 0.8rem;
}
/* 画布容器:圆形视口 + 木质外壳阴影 */
#canvas-wrapper {
position: relative;
border-radius: 50%;
box-shadow:
0 0 0 8px #1a1612,
0 0 0 10px #3d3226,
0 20px 50px rgba(0, 0, 0, 0.7),
inset 0 0 40px rgba(0, 0, 0, 0.6);
overflow: hidden;
user-select: none;
touch-action: none;
}
canvas {
display: block;
border-radius: 50%;
cursor: grab;
}
canvas:active {
cursor: grabbing;
}
#hint {
margin-top: 14px;
font-size: 0.8rem;
color: #7a756b;
letter-spacing: 1px;
}
.error {
color: #e57373;
font-size: 0.8rem;
width: 100%;
text-align: center;
margin-top: 4px;
}
</style>
<style>.trae-browser-inspect-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999997;pointer-events:auto;background:rgba(0,0,0,0)}.trae-browser-inspect-highlight-box{position:absolute;top:0;left:0;z-index:999998;display:none}.trae-browser-inspect-highlight-tag{position:absolute;left:0px;top:0px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:4px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:12px;font-weight:400;display:none;align-items:center;z-index:999999}.trae-browser-inspect-highlight-box-show{display:flex}.trae-browser-inspect-select-button.trae-browser-inspect-highlight-box-show{display:flex !important}.trae-browser-inspect-select-button{position:absolute;top:0;left:0;background-color:var(--vscode-icube--bg-bg-base-secondary, "#222427");color:var(--vscode-icube--text-text-default-active, "#F5F9FE");font-size:11px;font-weight:500;border:1px solid var(--vscode-icube--border-neutral-l1, "#E0E2F217");border-radius:6px;padding:0 8px;height:32px;display:none;align-items:center;cursor:pointer;z-index:999999;gap:4px}.trae-browser-inspect-select-button svg,.trae-browser-inspect-select-button span{z-index:1}.trae-browser-inspect-select-highlight-box{background:rgba(0,0,0,0) !important}.trae-browser-inspect-select-highlight-box .trae-browser-inspect-highlight-tag{background-color:var(--vscode-icube--status-success-active, "#1E8B56")}.trae-browser-inspect-comment-card-container{position:fixed;top:0;left:0;z-index:9999999;pointer-events:auto}.trae-browser-inspect-comment-card-container .trae-browser-inspect-comment-card{display:flex;padding-top:0px !important;align-items:center;z-index:9999999 !important;background-color:var(--vscode-icube--bg-bg-menu)}*[contenteditable]{outline:none}.trae-browser-inspect-click-effect{position:fixed;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);pointer-events:none;animation:trae-browser-inspect-ripple 500ms ease-out forwards;z-index:999999}@keyframes trae-browser-inspect-ripple{0%{transform:scale(0.3);opacity:.8}100%{transform:scale(2);opacity:0}}.trae-browser-inspect-ref-box{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");pointer-events:none;z-index:999998;animation:trae-browser-inspect-fadeInOut 2s ease-in-out forwards}.trae-browser-inspect-ref-label{position:absolute;top:-14px;left:0;height:14px;padding:0 4px;box-sizing:border-box;border-radius:2px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:9px;font-weight:500;display:flex;align-items:center;white-space:nowrap;z-index:999999}@keyframes trae-browser-inspect-fadeInOut{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}.trae-browser-inspect-input-highlight{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");border-radius:4px;pointer-events:none;z-index:999998;box-shadow:0 0 8px var(--vscode-icube-colorSuccessHover, "#2FB287");animation:trae-browser-inspect-input-pulse 600ms ease-out forwards}@keyframes trae-browser-inspect-input-pulse{0%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}30%{opacity:1;box-shadow:0 0 12px var(--vscode-icube-colorSuccessHover, "#2FB287")}100%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}}.trae-browser-inspect-virtual-cursor{position:fixed;width:20px;height:20px;pointer-events:none;z-index:9999999;opacity:0;transition:opacity .2s ease}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-visible{opacity:1}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-idle{animation:trae-browser-inspect-cursor-breathe 2s ease-in-out infinite}.trae-browser-inspect-virtual-cursor svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}@keyframes trae-browser-inspect-cursor-breathe{0%,100%{opacity:.7}50%{opacity:1}}.trae-browser-inspect-scroll-indicator{position:fixed;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:8px;background-color:rgba(0,0,0,.7);color:#fff;font-size:13px;font-weight:500;pointer-events:none;z-index:999999;animation:trae-browser-inspect-indicator-fade 800ms ease-out forwards;backdrop-filter:blur(4px)}.trae-browser-inspect-scroll-indicator svg{width:16px;height:16px;fill:#fff}.trae-browser-inspect-scroll-indicator.trae-scroll-up{top:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-down{bottom:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-left{left:12px;top:50%;transform:translateY(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-right{right:12px;top:50%;transform:translateY(-50%)}@keyframes trae-browser-inspect-indicator-fade{0%{opacity:0;transform:translateX(-50%) scale(0.9)}15%{opacity:1;transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-scroll-indicator.trae-scroll-left,.trae-browser-inspect-scroll-indicator.trae-scroll-right{animation-name:trae-browser-inspect-indicator-fade-y}@keyframes trae-browser-inspect-indicator-fade-y{0%{opacity:0;transform:translateY(-50%) scale(0.9)}15%{opacity:1;transform:translateY(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-key-badge{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);padding:8px 20px;border-radius:8px;background-color:rgba(0,0,0,.8);color:#fff;font-size:18px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,monospace;pointer-events:none;z-index:999999;animation:trae-browser-inspect-key-pop 500ms ease-out forwards;backdrop-filter:blur(4px);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 4px 12px rgba(0,0,0,.3);letter-spacing:1px}@keyframes trae-browser-inspect-key-pop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(0.9)}20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}.trae-browser-inspect-step-badge{position:fixed;top:12px;left:12px;padding:6px 12px;border-radius:6px;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);color:#fff;font-size:12px;font-weight:600;pointer-events:none;z-index:999999;animation:trae-browser-inspect-step-slide 600ms ease-out forwards;box-shadow:0 2px 8px rgba(47,178,135,.3);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trae-browser-inspect-step-badge.trae-step-old{opacity:.4;transform:translateY(0)}@keyframes trae-browser-inspect-step-slide{0%{opacity:0;transform:translateX(-20px)}20%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}.trae-browser-inspect-drag-trail{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999998}.trae-browser-inspect-drag-trail svg{width:100%;height:100%}.trae-browser-inspect-drag-trail .trae-drag-path{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;stroke-dasharray:8 4;opacity:.6;animation:trae-browser-inspect-dash 600ms linear forwards}.trae-browser-inspect-drag-trail .trae-drag-dot{fill:var(--vscode-icube-colorSuccessHover, #2FB287);filter:drop-shadow(0 0 4px rgba(47, 178, 135, 0.6))}.trae-browser-inspect-drag-trail .trae-drag-endpoint{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;opacity:.5}@keyframes trae-browser-inspect-dash{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}.trae-browser-inspect-drag-trail.trae-drag-fade{animation:trae-browser-inspect-trail-fade 400ms ease-out forwards}@keyframes trae-browser-inspect-trail-fade{0%{opacity:1}100%{opacity:0}}</style><script type="module">(async () => {
try {
const client = await import('/@vite/client');
const hmr = client.createHotContext('hmr-handler/fake.js');
hmr.on('vite:afterUpdate', window['__ICUBE_WEBVIEW_HMR_CALLBACK_1786007501485']);
} catch {}
})();</script><style>.buttonsCard-bTXa5j {
padding: var(--spacer-4);
background: none;
align-items: center;
gap: 0;
display: inline-flex;
}
.actionButton-opZL8g {
align-items: center;
gap: var(--spacer-4);
padding: var(--spacer-4) var(--spacer-8);
border-radius: var(--radius-4);
cursor: pointer;
transition: background-color var(--transition-fast);
background: none;
border: none;
display: inline-flex;
}
.actionButton-opZL8g:hover {
background: var(--bg-bg-overlay-l2);
}
.actionButton-opZL8g:active {
background: var(--bg-bg-overlay-l3);
}
.actionButton-opZL8g:focus-visible {
outline: 2px solid var(--status-primary-default);
outline-offset: 1px;
}
.icon-ObJEMt {
width: 16px;
height: 16px;
color: var(--icon-icon-default);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.title-GptGAg {
font-family: var(--font-family-default);
color: var(--text-text-default);
white-space: nowrap;
font-size: 11px;
font-weight: 500;
line-height: 16px;
}
.shortcut-nbwTG4 {
color: var(--icon-icon-secondary);
flex-shrink: 0;
align-items: center;
gap: 2px;
display: flex;
}
.shortcutKey-EE6xrE {
font-family: var(--font-family-default);
color: var(--icon-icon-secondary);
font-size: 11px;
font-weight: 500;
line-height: 12px;
}
.divider-cFGVKQ {
box-sizing: content-box;
background-clip: content-box;
background-color: var(--border-border-neutral-l2);
flex-shrink: 0;
width: 1px;
height: 12px;
padding: 0 6px;
}
</style><style>.commentEditorCard-Un4Xaa {
width: 320px;
padding: var(--spacing-sm);
background: none;
flex-direction: column;
display: flex;
}
.textContainer-ZISwbW {
padding: var(--spacing-sm);
background: var(--bg-bg-overlay-l1);
border: 1px solid var(--border-border-neutral-l3);
border-radius: var(--radius-sm);
align-items: center;
gap: var(--spacing-sm);
padding-right: 0;
display: flex;
}
.textarea-ggj4j6 {
padding: 0 var(--spacing-sm) 0 2px;
font-family: var(--font-family-default);
color: var(--text-text-default);
resize: none;
scrollbar-width: thin;
scrollbar-color: #56637726 transparent;
background: none;
border: none;
outline: none;
flex: 1;
max-height: 140px;
font-size: 13px;
font-weight: 400;
line-height: 20px;
overflow-y: auto;
}
.textarea-ggj4j6::-webkit-scrollbar {
width: 6px;
}
.textarea-ggj4j6::-webkit-scrollbar-track {
background: none;
}
.textarea-ggj4j6::-webkit-scrollbar-thumb {
background: #56637726;
border-radius: 3px;
}
.textarea-ggj4j6::placeholder {
color: var(--text-text-tertiary);
}
.actionBar-u_t8vc {
justify-content: flex-end;
align-items: center;
gap: var(--spacing-xs);
opacity: 0;
max-height: 0;
transition: max-height .2s ease-out, opacity .2s ease-out, margin-top .2s ease-out;
display: flex;
overflow: hidden;
}
.actionBarVisible-PxXsje {
opacity: 1;
max-height: 32px;
margin-top: var(--spacing-sm);
}
.actionBarNoExpandAnimation-FCra2J {
transition: opacity .2s ease-out;
}
.actionBarNoExpandAnimation-FCra2J.actionBarVisible-PxXsje {
max-height: 32px;
margin-top: var(--spacing-sm);
}
.cancelButton-Lu0me9 {
height: 24px;
padding: 0 var(--spacing-xs);
background: var(--bg-bg-overlay-l2);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color var(--transition-fast);
border: none;
justify-content: center;
align-items: center;
display: flex;
}
.cancelButton-Lu0me9:hover, .cancelButton-Lu0me9:active {
background: var(--bg-bg-overlay-l3);
}
.cancelButton-Lu0me9:focus-visible {
outline: 2px solid var(--status-primary-default);
outline-offset: 1px;
}
.cancelText-j1RS1q {
font-family: var(--font-family-default);
color: var(--text-text-default);
white-space: nowrap;
padding: 0 var(--spacing-xs);
font-size: 11px;
font-weight: 500;
line-height: 16px;
}
.submitButton-BqyEd7 {
height: 24px;
padding: 0 var(--spacing-sm);
background: var(--bg-bg-invert);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color var(--transition-fast);
border: none;
justify-content: center;
align-items: center;
display: flex;
}
.submitButton-BqyEd7:hover:not(:disabled) {
background: var(--bg-bg-invert-hover);
}
.submitButton-BqyEd7:active:not(:disabled) {
background: var(--bg-bg-invert-active);
}
.submitButton-BqyEd7:disabled {
background: var(--bg-bg-invert-disabled);
color: var(--text-text-disabled);
cursor: not-allowed;
}
.submitButton-BqyEd7:focus-visible {
outline: 2px solid var(--status-primary-default);
outline-offset: 1px;
}
.submitText-N58QRq {
font-family: var(--font-family-default);
color: var(--text-text-onaccent);
white-space: nowrap;
padding: 0 var(--spacing-xs);
font-size: 11px;
font-weight: 500;
line-height: 16px;
}
.submitButton-BqyEd7:disabled .submitText-N58QRq {
color: var(--text-text-disabled);
}
.submitIcon-vyKSKQ {
width: 12px;
height: 12px;
color: var(--icon-icon-onaccent);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.submitButton-BqyEd7:disabled .submitIcon-vyKSKQ {
color: var(--text-text-disabled);
}
.limitWarning-Hocj0v {
align-items: center;
gap: var(--spacing-xs);
color: var(--status-warning-default);
user-select: none;
flex: 1;
display: flex;
}
.limitText-hBXEaq {
font-family: var(--font-family-default);
color: var(--status-warning-default);
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
</style><style>.previewCommentCardContainer-HEkpU8 {
border-radius: var(--radius-8);
background: var(--bg-bg-menu);
border: 1px solid var(--border-border-neutral-l1);
transition: width .25s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1);
display: inline-block;
overflow: hidden;
box-shadow: 0 2px 6px #0003, 0 .5px #ffffff0f, inset 0 .5px #ffffff0f;
}
.previewCommentCardContent-ELaLah {
width: max-content;
position: relative;
}
.previewCommentCardFadeEnter-OMhMD9 {
opacity: 0;
}
.previewCommentCardFadeEnterActive-Eacuvn {
opacity: 1;
transition: opacity .2s ease-in;
}
.previewCommentCardFadeExit-ms9vgc {
opacity: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.previewCommentCardFadeExitActive-vyQTsd {
opacity: 0;
transition: opacity .15s ease-out;
}
.previewCommentCardSuccessCard-PWnm2o {
white-space: nowrap;
justify-content: center;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
display: flex;
}
.previewCommentCardSuccessIcon-Oht9Ir {
width: 16px;
height: 16px;
color: var(--status-success-default);
justify-content: center;
align-items: center;
display: flex;
}
.previewCommentCardSuccessText-s40BWG {
font-family: var(--font-family-default);
color: var(--text-text-default);
user-select: none;
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
</style><style id="trae-browser-inspect-drag-styles">
.trae-browser-inspect-draggable {
cursor: grab !important;
}
.trae-browser-inspect-dragging-active {
cursor: grabbing !important;
}
.trae-browser-inspect-drag-ghost {
opacity: 0.7;
pointer-events: none;
position: fixed;
z-index: 999998;
transform: scale(0.95);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: none;
}
.trae-browser-inspect-element-placeholder {
opacity: 0.3;
}
</style><style>.trae-browser-inspect-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999997;pointer-events:auto;background:rgba(0,0,0,0)}.trae-browser-inspect-highlight-box{position:absolute;top:0;left:0;z-index:999998;display:none}.trae-browser-inspect-highlight-tag{position:absolute;left:0px;top:0px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:4px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:12px;font-weight:400;display:none;align-items:center;z-index:999999}.trae-browser-inspect-highlight-box-show{display:flex}.trae-browser-inspect-select-button.trae-browser-inspect-highlight-box-show{display:flex !important}.trae-browser-inspect-select-button{position:absolute;top:0;left:0;background-color:var(--vscode-icube--bg-bg-base-secondary, "#222427");color:var(--vscode-icube--text-text-default-active, "#F5F9FE");font-size:11px;font-weight:500;border:1px solid var(--vscode-icube--border-neutral-l1, "#E0E2F217");border-radius:6px;padding:0 8px;height:32px;display:none;align-items:center;cursor:pointer;z-index:999999;gap:4px}.trae-browser-inspect-select-button svg,.trae-browser-inspect-select-button span{z-index:1}.trae-browser-inspect-select-highlight-box{background:rgba(0,0,0,0) !important}.trae-browser-inspect-select-highlight-box .trae-browser-inspect-highlight-tag{background-color:var(--vscode-icube--status-success-active, "#1E8B56")}.trae-browser-inspect-comment-card-container{position:fixed;top:0;left:0;z-index:9999999;pointer-events:auto}.trae-browser-inspect-comment-card-container .trae-browser-inspect-comment-card{display:flex;padding-top:0px !important;align-items:center;z-index:9999999 !important;background-color:var(--vscode-icube--bg-bg-menu)}*[contenteditable]{outline:none}.trae-browser-inspect-click-effect{position:fixed;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);pointer-events:none;animation:trae-browser-inspect-ripple 500ms ease-out forwards;z-index:999999}@keyframes trae-browser-inspect-ripple{0%{transform:scale(0.3);opacity:.8}100%{transform:scale(2);opacity:0}}.trae-browser-inspect-ref-box{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");pointer-events:none;z-index:999998;animation:trae-browser-inspect-fadeInOut 2s ease-in-out forwards}.trae-browser-inspect-ref-label{position:absolute;top:-14px;left:0;height:14px;padding:0 4px;box-sizing:border-box;border-radius:2px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:9px;font-weight:500;display:flex;align-items:center;white-space:nowrap;z-index:999999}@keyframes trae-browser-inspect-fadeInOut{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}.trae-browser-inspect-input-highlight{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");border-radius:4px;pointer-events:none;z-index:999998;box-shadow:0 0 8px var(--vscode-icube-colorSuccessHover, "#2FB287");animation:trae-browser-inspect-input-pulse 600ms ease-out forwards}@keyframes trae-browser-inspect-input-pulse{0%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}30%{opacity:1;box-shadow:0 0 12px var(--vscode-icube-colorSuccessHover, "#2FB287")}100%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}}.trae-browser-inspect-virtual-cursor{position:fixed;width:20px;height:20px;pointer-events:none;z-index:9999999;opacity:0;transition:opacity .2s ease}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-visible{opacity:1}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-idle{animation:trae-browser-inspect-cursor-breathe 2s ease-in-out infinite}.trae-browser-inspect-virtual-cursor svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}@keyframes trae-browser-inspect-cursor-breathe{0%,100%{opacity:.7}50%{opacity:1}}.trae-browser-inspect-scroll-indicator{position:fixed;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:8px;background-color:rgba(0,0,0,.7);color:#fff;font-size:13px;font-weight:500;pointer-events:none;z-index:999999;animation:trae-browser-inspect-indicator-fade 800ms ease-out forwards;backdrop-filter:blur(4px)}.trae-browser-inspect-scroll-indicator svg{width:16px;height:16px;fill:#fff}.trae-browser-inspect-scroll-indicator.trae-scroll-up{top:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-down{bottom:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-left{left:12px;top:50%;transform:translateY(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-right{right:12px;top:50%;transform:translateY(-50%)}@keyframes trae-browser-inspect-indicator-fade{0%{opacity:0;transform:translateX(-50%) scale(0.9)}15%{opacity:1;transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-scroll-indicator.trae-scroll-left,.trae-browser-inspect-scroll-indicator.trae-scroll-right{animation-name:trae-browser-inspect-indicator-fade-y}@keyframes trae-browser-inspect-indicator-fade-y{0%{opacity:0;transform:translateY(-50%) scale(0.9)}15%{opacity:1;transform:translateY(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-key-badge{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);padding:8px 20px;border-radius:8px;background-color:rgba(0,0,0,.8);color:#fff;font-size:18px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,monospace;pointer-events:none;z-index:999999;animation:trae-browser-inspect-key-pop 500ms ease-out forwards;backdrop-filter:blur(4px);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 4px 12px rgba(0,0,0,.3);letter-spacing:1px}@keyframes trae-browser-inspect-key-pop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(0.9)}20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}.trae-browser-inspect-step-badge{position:fixed;top:12px;left:12px;padding:6px 12px;border-radius:6px;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);color:#fff;font-size:12px;font-weight:600;pointer-events:none;z-index:999999;animation:trae-browser-inspect-step-slide 600ms ease-out forwards;box-shadow:0 2px 8px rgba(47,178,135,.3);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trae-browser-inspect-step-badge.trae-step-old{opacity:.4;transform:translateY(0)}@keyframes trae-browser-inspect-step-slide{0%{opacity:0;transform:translateX(-20px)}20%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}.trae-browser-inspect-drag-trail{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999998}.trae-browser-inspect-drag-trail svg{width:100%;height:100%}.trae-browser-inspect-drag-trail .trae-drag-path{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;stroke-dasharray:8 4;opacity:.6;animation:trae-browser-inspect-dash 600ms linear forwards}.trae-browser-inspect-drag-trail .trae-drag-dot{fill:var(--vscode-icube-colorSuccessHover, #2FB287);filter:drop-shadow(0 0 4px rgba(47, 178, 135, 0.6))}.trae-browser-inspect-drag-trail .trae-drag-endpoint{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;opacity:.5}@keyframes trae-browser-inspect-dash{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}.trae-browser-inspect-drag-trail.trae-drag-fade{animation:trae-browser-inspect-trail-fade 400ms ease-out forwards}@keyframes trae-browser-inspect-trail-fade{0%{opacity:1}100%{opacity:0}}</style><script type="module">(async () => {
try {
const client = await import('/@vite/client');
const hmr = client.createHotContext('hmr-handler/fake.js');
hmr.on('vite:afterUpdate', window['__ICUBE_WEBVIEW_HMR_CALLBACK_1786007501500']);
} catch {}
})();</script><style>.buttonsCard-bTXa5j {
padding: var(--spacer-4);
background: none;
align-items: center;
gap: 0;
display: inline-flex;
}
.actionButton-opZL8g {
align-items: center;
gap: var(--spacer-4);
padding: var(--spacer-4) var(--spacer-8);
border-radius: var(--radius-4);
cursor: pointer;
transition: background-color var(--transition-fast);
background: none;
border: none;
display: inline-flex;
}
.actionButton-opZL8g:hover {
background: var(--bg-bg-overlay-l2);
}
.actionButton-opZL8g:active {
background: var(--bg-bg-overlay-l3);
}
.actionButton-opZL8g:focus-visible {
outline: 2px solid var(--status-primary-default);
outline-offset: 1px;
}
.icon-ObJEMt {
width: 16px;
height: 16px;
color: var(--icon-icon-default);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.title-GptGAg {
font-family: var(--font-family-default);
color: var(--text-text-default);
white-space: nowrap;
font-size: 11px;
font-weight: 500;
line-height: 16px;
}
.shortcut-nbwTG4 {
color: var(--icon-icon-secondary);
flex-shrink: 0;
align-items: center;
gap: 2px;
display: flex;
}
.shortcutKey-EE6xrE {
font-family: var(--font-family-default);
color: var(--icon-icon-secondary);
font-size: 11px;
font-weight: 500;
line-height: 12px;
}
.divider-cFGVKQ {
box-sizing: content-box;
background-clip: content-box;
background-color: var(--border-border-neutral-l2);
flex-shrink: 0;
width: 1px;
height: 12px;
padding: 0 6px;
}
</style><style>.commentEditorCard-Un4Xaa {
width: 320px;
padding: var(--spacing-sm);
background: none;
flex-direction: column;
display: flex;
}
.textContainer-ZISwbW {
padding: var(--spacing-sm);
background: var(--bg-bg-overlay-l1);
border: 1px solid var(--border-border-neutral-l3);
border-radius: var(--radius-sm);
align-items: center;
gap: var(--spacing-sm);
padding-right: 0;
display: flex;
}
.textarea-ggj4j6 {
padding: 0 var(--spacing-sm) 0 2px;
font-family: var(--font-family-default);
color: var(--text-text-default);
resize: none;
scrollbar-width: thin;
scrollbar-color: #56637726 transparent;
background: none;
border: none;
outline: none;
flex: 1;
max-height: 140px;
font-size: 13px;
font-weight: 400;
line-height: 20px;
overflow-y: auto;
}
.textarea-ggj4j6::-webkit-scrollbar {
width: 6px;
}
.textarea-ggj4j6::-webkit-scrollbar-track {
background: none;
}
.textarea-ggj4j6::-webkit-scrollbar-thumb {
background: #56637726;
border-radius: 3px;
}
.textarea-ggj4j6::placeholder {
color: var(--text-text-tertiary);
}
.actionBar-u_t8vc {
justify-content: flex-end;
align-items: center;
gap: var(--spacing-xs);
opacity: 0;
max-height: 0;
transition: max-height .2s ease-out, opacity .2s ease-out, margin-top .2s ease-out;
display: flex;
overflow: hidden;
}
.actionBarVisible-PxXsje {
opacity: 1;
max-height: 32px;
margin-top: var(--spacing-sm);
}
.actionBarNoExpandAnimation-FCra2J {
transition: opacity .2s ease-out;
}
.actionBarNoExpandAnimation-FCra2J.actionBarVisible-PxXsje {
max-height: 32px;
margin-top: var(--spacing-sm);
}
.cancelButton-Lu0me9 {
height: 24px;
padding: 0 var(--spacing-xs);
background: var(--bg-bg-overlay-l2);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color var(--transition-fast);
border: none;
justify-content: center;
align-items: center;
display: flex;
}
.cancelButton-Lu0me9:hover, .cancelButton-Lu0me9:active {
background: var(--bg-bg-overlay-l3);
}
.cancelButton-Lu0me9:focus-visible {
outline: 2px solid var(--status-primary-default);
outline-offset: 1px;
}
.cancelText-j1RS1q {
font-family: var(--font-family-default);
color: var(--text-text-default);
white-space: nowrap;
padding: 0 var(--spacing-xs);
font-size: 11px;
font-weight: 500;
line-height: 16px;
}
.submitButton-BqyEd7 {
height: 24px;
padding: 0 var(--spacing-sm);
background: var(--bg-bg-invert);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color var(--transition-fast);
border: none;
justify-content: center;
align-items: center;
display: flex;
}
.submitButton-BqyEd7:hover:not(:disabled) {
background: var(--bg-bg-invert-hover);
}
.submitButton-BqyEd7:active:not(:disabled) {
background: var(--bg-bg-invert-active);
}
.submitButton-BqyEd7:disabled {
background: var(--bg-bg-invert-disabled);
color: var(--text-text-disabled);
cursor: not-allowed;
}
.submitButton-BqyEd7:focus-visible {
outline: 2px solid var(--status-primary-default);
outline-offset: 1px;
}
.submitText-N58QRq {
font-family: var(--font-family-default);
color: var(--text-text-onaccent);
white-space: nowrap;
padding: 0 var(--spacing-xs);
font-size: 11px;
font-weight: 500;
line-height: 16px;
}
.submitButton-BqyEd7:disabled .submitText-N58QRq {
color: var(--text-text-disabled);
}
.submitIcon-vyKSKQ {
width: 12px;
height: 12px;
color: var(--icon-icon-onaccent);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.submitButton-BqyEd7:disabled .submitIcon-vyKSKQ {
color: var(--text-text-disabled);
}
.limitWarning-Hocj0v {
align-items: center;
gap: var(--spacing-xs);
color: var(--status-warning-default);
user-select: none;
flex: 1;
display: flex;
}
.limitText-hBXEaq {
font-family: var(--font-family-default);
color: var(--status-warning-default);
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
</style><style>.previewCommentCardContainer-HEkpU8 {
border-radius: var(--radius-8);
background: var(--bg-bg-menu);
border: 1px solid var(--border-border-neutral-l1);
transition: width .25s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1);
display: inline-block;
overflow: hidden;
box-shadow: 0 2px 6px #0003, 0 .5px #ffffff0f, inset 0 .5px #ffffff0f;
}
.previewCommentCardContent-ELaLah {
width: max-content;
position: relative;
}
.previewCommentCardFadeEnter-OMhMD9 {
opacity: 0;
}
.previewCommentCardFadeEnterActive-Eacuvn {
opacity: 1;
transition: opacity .2s ease-in;
}
.previewCommentCardFadeExit-ms9vgc {
opacity: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.previewCommentCardFadeExitActive-vyQTsd {
opacity: 0;
transition: opacity .15s ease-out;
}
.previewCommentCardSuccessCard-PWnm2o {
white-space: nowrap;
justify-content: center;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
display: flex;
}
.previewCommentCardSuccessIcon-Oht9Ir {
width: 16px;
height: 16px;
color: var(--status-success-default);
justify-content: center;
align-items: center;
display: flex;
}
.previewCommentCardSuccessText-s40BWG {
font-family: var(--font-family-default);
color: var(--text-text-default);
user-select: none;
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
</style><style id="icube-theme-variables">:root {--vscode-foreground: #31353a;--vscode-disabledForeground: #8a9096;--vscode-errorForeground: #cc4b53;--vscode-descriptionForeground: #5b6066;--vscode-icon-foreground: #5b6066;--vscode-focusBorder: rgba(0, 0, 0, 0);--vscode-textLink-foreground: #006ab1;--vscode-textLink-activeForeground: #387bff;--vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18);--vscode-textPreformat-foreground: #a31515;--vscode-textPreformat-background: rgba(0, 0, 0, 0.1);--vscode-textBlockQuote-background: #f2f2f2;--vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);--vscode-textCodeBlock-background: rgba(220, 220, 220, 0.4);--vscode-sash-hoverBorder: #0fdc78;--vscode-badge-background: #c4c4c4;--vscode-badge-foreground: #333333;--vscode-activityWarningBadge-foreground: #ffffff;--vscode-activityWarningBadge-background: #b27c00;--vscode-activityErrorBadge-foreground: #ffffff;--vscode-activityErrorBadge-background: #e51400;--vscode-scrollbar-shadow: #dddddd;--vscode-scrollbarSlider-background: rgba(100, 100, 100, 0.4);--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);--vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);--vscode-progressBar-background: #2f74ff;--vscode-chart-line: #236b8e;--vscode-chart-axis: rgba(0, 0, 0, 0.6);--vscode-chart-guide: rgba(0, 0, 0, 0.2);--vscode-editor-background: #ffffff;--vscode-editor-foreground: #31353a;--vscode-editorStickyScroll-background: #ffffff;--vscode-editorStickyScrollGutter-background: #ffffff;--vscode-editorStickyScrollHover-background: rgba(91, 146, 255, 0.08);--vscode-editorStickyScroll-shadow: #dddddd;--vscode-editorWidget-background: #f3f3f3;--vscode-editorWidget-foreground: #31353a;--vscode-editorWidget-border: #c8c8c8;--vscode-editorError-foreground: #e51400;--vscode-editorWarning-foreground: #bf8803;--vscode-editorInfo-foreground: #0063d3;--vscode-editorHint-foreground: #6c6c6c;--vscode-editorLink-activeForeground: #36393d;--vscode-editor-selectionBackground: rgba(47, 116, 255, 0.18);--vscode-editor-inactiveSelectionBackground: #e5ebf1;--vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.5);--vscode-editor-compositionBorder: #000000;--vscode-editor-findMatchBackground: #a8ac94;--vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);--vscode-editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3);--vscode-editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15);--vscode-editorHoverWidget-background: #ffffff;--vscode-editorHoverWidget-foreground: #31353a;--vscode-editorHoverWidget-border: rgba(77, 107, 153, 0.09);--vscode-editorHoverWidget-statusBarBackground: #f2f2f2;--vscode-editorInlayHint-foreground: #969696;--vscode-editorInlayHint-background: rgba(196, 196, 196, 0.1);--vscode-editorInlayHint-typeForeground: #969696;--vscode-editorInlayHint-typeBackground: rgba(196, 196, 196, 0.1);--vscode-editorInlayHint-parameterForeground: #969696;--vscode-editorInlayHint-parameterBackground: rgba(196, 196, 196, 0.1);--vscode-editorLightBulb-foreground: #ddb100;--vscode-editorLightBulbAutoFix-foreground: #007acc;--vscode-editorLightBulbAi-foreground: #ddb100;--vscode-editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2);--vscode-editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5);--vscode-diffEditor-insertedTextBackground: rgba(64, 176, 139, 0.18);--vscode-diffEditor-removedTextBackground: rgba(232, 70, 58, 0.16);--vscode-diffEditor-insertedLineBackground: rgba(64, 176, 139, 0.12);--vscode-diffEditor-removedLineBackground: rgba(232, 70, 58, 0.12);--vscode-diffEditorOverview-insertedForeground: rgba(64, 176, 139, 0.18);--vscode-diffEditorOverview-removedForeground: rgba(232, 70, 58, 0.16);--vscode-diffEditor-diagonalFill: rgba(34, 34, 34, 0.2);--vscode-diffEditor-unchangedRegionBackground: #ffffff;--vscode-diffEditor-unchangedRegionForeground: #31353a;--vscode-diffEditor-unchangedCodeBackground: rgba(184, 184, 184, 0.16);--vscode-widget-shadow: rgba(0, 0, 0, 0.08);--vscode-widget-border: rgba(77, 107, 153, 0.09);--vscode-toolbar-hoverBackground: rgba(86, 99, 119, 0.11);--vscode-toolbar-activeBackground: rgba(86, 99, 119, 0.15);--vscode-breadcrumb-foreground: rgba(49, 53, 58, 0.8);--vscode-breadcrumb-background: #ffffff;--vscode-breadcrumb-focusForeground: #272a2e;--vscode-breadcrumb-activeSelectionForeground: #272a2e;--vscode-breadcrumbPicker-background: #ffffff;--vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);--vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);--vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);--vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);--vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);--vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);--vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);--vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);--vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);--vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);--vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);--vscode-problemsErrorIcon-foreground: #e51400;--vscode-problemsWarningIcon-foreground: #bf8803;--vscode-problemsInfoIcon-foreground: #0063d3;--vscode-minimap-findMatchHighlight: #d18616;--vscode-minimap-selectionOccurrenceHighlight: #c9c9c9;--vscode-minimap-selectionHighlight: #add6ff;--vscode-minimap-infoHighlight: #0063d3;--vscode-minimap-warningHighlight: #bf8803;--vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);--vscode-minimap-foregroundOpacity: #000000;--vscode-minimapSlider-background: rgba(100, 100, 100, 0.2);--vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);--vscode-minimapSlider-activeBackground: rgba(0, 0, 0, 0.3);--vscode-charts-foreground: #31353a;--vscode-charts-lines: rgba(49, 53, 58, 0.5);--vscode-charts-red: #e51400;--vscode-charts-blue: #0063d3;--vscode-charts-yellow: #bf8803;--vscode-charts-orange: #d18616;--vscode-charts-green: #388a34;--vscode-charts-purple: #652d90;--vscode-input-background: rgba(86, 99, 119, 0.07);--vscode-input-foreground: #31353a;--vscode-inputOption-activeBorder: rgba(77, 107, 153, 0.36);--vscode-inputOption-hoverBackground: rgba(184, 184, 184, 0.31);--vscode-inputOption-activeBackground: rgba(0, 0, 0, 0);--vscode-inputOption-activeForeground: #000000;--vscode-input-placeholderForeground: #5b6066;--vscode-inputValidation-infoBackground: #d6ecf2;--vscode-inputValidation-infoBorder: #007acc;--vscode-inputValidation-warningBackground: #f6f5d2;--vscode-inputValidation-warningBorder: #b89500;--vscode-inputValidation-errorBackground: #f2dede;--vscode-inputValidation-errorBorder: #e8463a;--vscode-dropdown-background: #ffffff;--vscode-dropdown-foreground: #31353a;--vscode-dropdown-border: #cecece;--vscode-button-foreground: #ffffff;--vscode-button-separator: rgba(193, 195, 205, 0.12);--vscode-button-background: #31353a;--vscode-button-hoverBackground: #72767b;--vscode-button-secondaryForeground: #ffffff;--vscode-button-secondaryBackground: #5f6a79;--vscode-button-secondaryHoverBackground: #4c5561;--vscode-radio-activeForeground: #000000;--vscode-radio-activeBackground: rgba(0, 0, 0, 0);--vscode-radio-activeBorder: rgba(77, 107, 153, 0.36);--vscode-radio-inactiveBorder: rgba(0, 0, 0, 0.2);--vscode-radio-inactiveHoverBackground: rgba(184, 184, 184, 0.31);--vscode-checkbox-background: #ffffff;--vscode-checkbox-selectBackground: #f3f3f3;--vscode-checkbox-foreground: #31353a;--vscode-checkbox-border: #919191;--vscode-checkbox-selectBorder: #5b6066;--vscode-checkbox-disabled.background: #bbbcbd;--vscode-checkbox-disabled.foreground: #74777b;--vscode-keybindingLabel-background: rgba(221, 221, 221, 0.4);--vscode-keybindingLabel-foreground: #555555;--vscode-keybindingLabel-border: rgba(204, 204, 204, 0.4);--vscode-keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4);--vscode-list-focusOutline: rgba(0, 0, 0, 0);--vscode-list-focusAndSelectionOutline: #90c2f9;--vscode-list-activeSelectionBackground: rgba(86, 99, 119, 0.11);--vscode-list-activeSelectionForeground: #111214;--vscode-list-activeSelectionIconForeground: #5b6066;--vscode-list-inactiveSelectionBackground: rgba(86, 99, 119, 0.11);--vscode-list-inactiveSelectionForeground: #111214;--vscode-list-hoverBackground: rgba(86, 99, 119, 0.11);--vscode-list-dropBackground: rgba(86, 99, 119, 0.11);--vscode-list-dropBetweenBackground: #5b6066;--vscode-list-highlightForeground: #0066bf;--vscode-list-focusHighlightForeground: #0066bf;--vscode-list-invalidItemForeground: #b89500;--vscode-list-errorForeground: #e8463a;--vscode-list-warningForeground: #855f00;--vscode-listFilterWidget-background: #f3f3f3;--vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);--vscode-listFilterWidget-noMatchesOutline: #be1100;--vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.08);--vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);--vscode-list-deemphasizedForeground: #8e8e90;--vscode-tree-indentGuidesStroke: rgba(77, 107, 153, 0.09);--vscode-tree-inactiveIndentGuidesStroke: rgba(221, 226, 233, 0.08);--vscode-tree-tableColumnsBorder: rgba(97, 97, 97, 0.13);--vscode-tree-tableOddRowsBackground: rgba(49, 53, 58, 0.04);--vscode-editorActionList-background: #f3f3f3;--vscode-editorActionList-foreground: #31353a;--vscode-editorActionList-focusForeground: #111214;--vscode-editorActionList-focusBackground: rgba(86, 99, 119, 0.11);--vscode-menu-border: rgba(77, 107, 153, 0.09);--vscode-menu-foreground: #616161;--vscode-menu-background: #ffffff;--vscode-menu-selectionForeground: #111214;--vscode-menu-selectionBackground: rgba(86, 99, 119, 0.11);--vscode-menu-separatorBackground: rgba(77, 107, 153, 0.09);--vscode-quickInput-background: #f8f9fa;--vscode-quickInput-foreground: #31353a;--vscode-quickInputTitle-background: rgba(0, 0, 0, 0.04);--vscode-pickerGroup-foreground: #31353a;--vscode-pickerGroup-border: rgba(77, 107, 153, 0.09);--vscode-quickInputList-focusForeground: #111214;--vscode-quickInputList-focusIconForeground: #5b6066;--vscode-quickInputList-focusBackground: rgba(86, 99, 119, 0.11);--vscode-search-resultsInfoForeground: #31353a;--vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);--vscode-tab-activeBackground: rgba(86, 99, 119, 0.11);--vscode-tab-unfocusedActiveBackground: rgba(86, 99, 119, 0.11);--vscode-tab-inactiveBackground: #f8f8f9;--vscode-tab-unfocusedInactiveBackground: #f8f8f9;--vscode-tab-activeForeground: #333333;--vscode-tab-inactiveForeground: #5b6066;--vscode-tab-unfocusedActiveForeground: #31353a;--vscode-tab-unfocusedInactiveForeground: rgba(91, 96, 102, 0.5);--vscode-tab-border: rgba(77, 107, 153, 0.09);--vscode-tab-lastPinnedBorder: rgba(97, 97, 97, 0.19);--vscode-tab-activeBorder: #ffffff;--vscode-tab-unfocusedActiveBorder: rgba(255, 255, 255, 0.7);--vscode-tab-activeBorderTop: #000000;--vscode-tab-unfocusedActiveBorderTop: rgba(0, 0, 0, 0.7);--vscode-tab-selectedBorderTop: #000000;--vscode-tab-selectedBackground: rgba(86, 99, 119, 0.11);--vscode-tab-selectedForeground: #333333;--vscode-tab-dragAndDropBorder: #333333;--vscode-tab-activeModifiedBorder: #33aaee;--vscode-tab-inactiveModifiedBorder: rgba(51, 170, 238, 0.5);--vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 170, 238, 0.7);--vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 170, 238, 0.25);--vscode-editorPane-background: #ffffff;--vscode-editorGroupHeader-tabsBackground: #f8f8f9;--vscode-editorGroupHeader-tabsBorder: rgba(77, 107, 153, 0.09);--vscode-editorGroupHeader-noTabsBackground: #ffffff;--vscode-editorGroup-border: #e7e7e7;--vscode-editorGroup-dropBackground: rgba(33, 97, 224, 0.16);--vscode-editorGroup-dropIntoPromptForeground: #31353a;--vscode-editorGroup-dropIntoPromptBackground: #f3f3f3;--vscode-sideBySideEditor-horizontalBorder: #e7e7e7;--vscode-sideBySideEditor-verticalBorder: #e7e7e7;--vscode-panel-background: #ffffff;--vscode-panel-border: rgba(128, 128, 128, 0.35);--vscode-panelTitle-activeForeground: #111214;--vscode-panelTitle-inactiveForeground: #5b6066;--vscode-panelTitle-activeBorder: #111214;--vscode-panelInput-border: #dddddd;--vscode-panel-dropBorder: #111214;--vscode-panelSection-dropBackground: rgba(33, 97, 224, 0.16);--vscode-panelSectionHeader-background: #ffffff;--vscode-panelSectionHeader-foreground: #111214;--vscode-panelSectionHeader-border: rgba(77, 107, 153, 0.18);--vscode-panelSection-border: rgba(128, 128, 128, 0.35);--vscode-panelStickyScroll-background: #ffffff;--vscode-panelStickyScroll-shadow: #dddddd;--vscode-banner-background: rgba(60, 69, 83, 0.11);--vscode-banner-foreground: #111214;--vscode-banner-iconForeground: #0063d3;--vscode-statusBar-foreground: #ffffff;--vscode-statusBar-noFolderForeground: #ffffff;--vscode-statusBar-background: rgba(0, 0, 0, 0);--vscode-statusBar-noFolderBackground: rgba(0, 0, 0, 0);--vscode-statusBar-focusBorder: #ffffff;--vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);--vscode-statusBarItem-focusBorder: #ffffff;--vscode-statusBarItem-hoverBackground: rgba(0, 0, 0, 0.12);--vscode-statusBarItem-hoverForeground: #ffffff;--vscode-statusBarItem-compactHoverBackground: rgba(0, 0, 0, 0.12);--vscode-statusBarItem-prominentForeground: #ffffff;--vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5);--vscode-statusBarItem-prominentHoverForeground: #ffffff;--vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.12);--vscode-statusBarItem-errorBackground: #c72e0f;--vscode-statusBarItem-errorForeground: #ffffff;--vscode-statusBarItem-errorHoverForeground: #ffffff;--vscode-statusBarItem-errorHoverBackground: rgba(0, 0, 0, 0.12);--vscode-statusBarItem-warningBackground: #725102;--vscode-statusBarItem-warningForeground: #ffffff;--vscode-statusBarItem-warningHoverForeground: #ffffff;--vscode-statusBarItem-warningHoverBackground: rgba(0, 0, 0, 0.12);--vscode-activityBar-background: #edeff2;--vscode-activityBar-foreground: #111214;--vscode-activityBar-inactiveForeground: #5b6066;--vscode-activityBar-activeBorder: #111214;--vscode-activityBar-dropBorder: #111214;--vscode-activityBarBadge-background: #2f74ff;--vscode-activityBarBadge-foreground: #ffffff;--vscode-activityBarTop-foreground: #424242;--vscode-activityBarTop-activeBorder: #424242;--vscode-activityBarTop-inactiveForeground: rgba(66, 66, 66, 0.75);--vscode-activityBarTop-dropBorder: #424242;--vscode-profileBadge-background: #c4c4c4;--vscode-profileBadge-foreground: #333333;--vscode-statusBarItem-remoteBackground: #16825d;--vscode-statusBarItem-remoteForeground: #ffffff;--vscode-statusBarItem-remoteHoverForeground: #ffffff;--vscode-statusBarItem-remoteHoverBackground: rgba(0, 0, 0, 0.12);--vscode-statusBarItem-offlineBackground: #6c1717;--vscode-statusBarItem-offlineForeground: #ffffff;--vscode-statusBarItem-offlineHoverForeground: #ffffff;--vscode-statusBarItem-offlineHoverBackground: rgba(0, 0, 0, 0.12);--vscode-extensionBadge-remoteBackground: #2f74ff;--vscode-extensionBadge-remoteForeground: #ffffff;--vscode-sideBar-background: #ffffff;--vscode-sideBarTitle-background: #ffffff;--vscode-sideBarTitle-foreground: #6f6f6f;--vscode-sideBar-dropBackground: rgba(33, 97, 224, 0.16);--vscode-sideBarSectionHeader-background: #ffffff;--vscode-sideBarSectionHeader-foreground: #31353a;--vscode-sideBarSectionHeader-border: rgba(77, 107, 153, 0.18);--vscode-sideBarActivityBarTop-border: rgba(77, 107, 153, 0.18);--vscode-sideBarStickyScroll-background: #ffffff;--vscode-sideBarStickyScroll-shadow: #dddddd;--vscode-titleBar-activeForeground: #5b6066;--vscode-titleBar-inactiveForeground: rgba(91, 96, 102, 0.6);--vscode-titleBar-activeBackground: #edeff2;--vscode-titleBar-inactiveBackground: #edeff2;--vscode-menubar-selectionForeground: #5b6066;--vscode-menubar-selectionBackground: rgba(86, 99, 119, 0.11);--vscode-commandCenter-foreground: #5b6066;--vscode-commandCenter-activeForeground: #5b6066;--vscode-commandCenter-inactiveForeground: rgba(91, 96, 102, 0.6);--vscode-commandCenter-background: rgba(0, 0, 0, 0.05);--vscode-commandCenter-activeBackground: rgba(0, 0, 0, 0.08);--vscode-commandCenter-border: rgba(91, 96, 102, 0.2);--vscode-commandCenter-activeBorder: rgba(91, 96, 102, 0.3);--vscode-commandCenter-inactiveBorder: rgba(91, 96, 102, 0.15);--vscode-notificationCenter-border: rgba(77, 107, 153, 0.09);--vscode-notificationToast-border: rgba(77, 107, 153, 0.09);--vscode-notifications-foreground: #31353a;--vscode-notifications-background: #ffffff;--vscode-notificationLink-foreground: #006ab1;--vscode-notificationCenterHeader-background: #f2f2f2;--vscode-notifications-border: #f2f2f2;--vscode-notificationsErrorIcon-foreground: #e8463a;--vscode-notificationsWarningIcon-foreground: #e28a00;--vscode-notificationsInfoIcon-foreground: #2f74ff;--vscode-iCubeNotificationCenter-border: rgba(77, 107, 153, 0.09);--vscode-icube-colorSnow: #ffffff;--vscode-icube-colorBlack: #000000;--vscode-icube-colorSnowDisable: rgba(255, 255, 255, 0.3);--vscode-icube-modalOverlay: rgba(0, 0, 0, 0.4);--vscode-icube-colorBg1: #ffffff;--vscode-icube-colorBg2: #edeff2;--vscode-icube-colorBg3: #ffffff;--vscode-icube-colorBg4: #e1e1e1;--vscode-icube-diffColorBg3: rgba(225, 225, 225, 0.35);--vscode-icube-colorBgCode: #ffffff;--vscode-icube-colorBgTr0: rgba(86, 99, 119, 0.07);--vscode-icube-colorBtnHover: rgba(86, 99, 119, 0.11);--vscode-icube-colorBg5: rgba(77, 97, 128, 0.08);--vscode-icube-colorBtnHover2: rgba(86, 99, 119, 0.15);--vscode-icube-colorBtnTransparent3: rgba(86, 99, 119, 0.19);--vscode-icube-colorBlend: rgba(77, 97, 128, 0.12);--vscode-icube-colorTransparent: rgba(255, 255, 255, 0);--vscode-icube-colorWidgetShadow: rgba(0, 0, 0, 0.04);--vscode-icube-colorWidgetShadow2: rgba(0, 0, 0, 0.08);--vscode-icube-colorWidgetShadow3: rgba(0, 0, 0, 0.2);--vscode-icube-colorDefaultText: #31353a;--vscode-icube-colorHighlightText: #111214;--vscode-icube-colorGrayText: #5b6066;--vscode-icube-colorGrayText2: #617080;--vscode-icube-colorDisableText: #8a9096;--vscode-icube-colorBlackText: #111314;--vscode-icube-colorBlackText1: #ffffff;--vscode-icube-colorBlackText2: #000000;--vscode-icube-colorDefaultAvatar: #5b92ff;--vscode-icube-colorDefaultAvatarBackground: #1759dd;--vscode-icube-modalLayoutBg: rgba(0, 25, 49, 0.2);--vscode-icube-colorIcon: #939fb8;--vscode-icube-colorCodeCodeInstruction: #b15ef2;--vscode-icube-colorLine1: rgba(77, 107, 153, 0.09);--vscode-icube-colorLine2: rgba(77, 107, 153, 0.18);--vscode-icube-colorLine3: rgba(77, 107, 153, 0.36);--vscode-icube-colorBrand: #36393d;--vscode-icube-colorBrandHover: #72767b;--vscode-icube-colorBrandActive: #1a1b1d;--vscode-icube-colorBrandTransparent: rgba(86, 99, 119, 0.11);--vscode-icube-colorBrandTransparent2: rgba(86, 99, 119, 0.15);--vscode-icube-colorBrandTransparent3: rgba(86, 99, 119, 0.19);--vscode-icube-colorStatusRegular: #2f74ff;--vscode-icube-colorStatusRegularHover: #4c88ff;--vscode-icube-colorStatusRegularActive: #1759dd;--vscode-icube-colorStatusRegularTransparent: rgba(47, 116, 255, 0.12);--vscode-icube-colorStatusRegularTransparent2: rgba(47, 116, 255, 0.18);--vscode-icube-colorStatusRegularTransparent3: rgba(47, 116, 255, 0.36);--vscode-icube-colorSuccess: #26a57b;--vscode-icube-colorSuccessHover: #2ca77f;--vscode-icube-colorSuccessActive: #1e8b56;--vscode-icube-colorSuccessTransparent: rgba(64, 176, 139, 0.12);--vscode-icube-colorSuccessTransparent2: rgba(64, 176, 139, 0.18);--vscode-icube-colorSuccessTransparent3: rgba(64, 176, 139, 0.36);--vscode-icube-colorError: #e8463a;--vscode-icube-colorErrorHover: #ea574c;--vscode-icube-colorErrorActive: #c9382f;--vscode-icube-colorErrorTransparent: rgba(232, 70, 58, 0.12);--vscode-icube-colorErrorTransparent2: rgba(232, 70, 58, 0.16);--vscode-icube-colorErrorTransparent3: rgba(232, 70, 58, 0.36);--vscode-icube-colorWarning: #e28a00;--vscode-icube-colorWarningHover: #f18c13;--vscode-icube-colorWarningActive: #c46f11;--vscode-icube-colorWarningTransparent: rgba(226, 138, 0, 0.12);--vscode-icube-colorWarningTransparent2: rgba(226, 138, 0, 0.16);--vscode-icube-colorWarningTransparent3: rgba(226, 138, 0, 0.36);--vscode-icube-colorAlert: #c6a626;--vscode-icube-colorAlertHover: #dfb716;--vscode-icube-colorAlertActive: #af8d06;--vscode-icube-colorAlertTransparent: rgba(198, 166, 38, 0.14);--vscode-icube-colorAlertTransparent2: rgba(198, 166, 38, 0.2);--vscode-icube-colorAlertTransparent3: rgba(198, 166, 38, 0.36);--vscode-icube-colorErrorTm1: rgba(204, 75, 83, 0.2);--vscode-icube-colorErrorTr1: rgba(232, 70, 58, 0.12);--vscode-icube-colorSpinLoading: #2f74ff;--vscode-icube-colorC1: #00b983;--vscode-icube-colorC2: #ff6b45;--vscode-icube-colorC3: #f2a90c;--vscode-icube-colorC4: #5fbf00;--vscode-icube-colorC5: #00b8f8;--vscode-icube-colorC6: #3f85ff;--vscode-icube-colorC7: #f53cff;--vscode-icube-colorC8: #9570ff;--vscode-icube-colorC9: #747e94;--vscode-icube-colorDiffToggleBtnBg: #8d7aff;--vscode-icube-textPreformatBackground: #9d89eb;--vscode-icube-colorRed1: #dd3730;--vscode-icube-colorRed2: rgba(221, 55, 48, 0.1);--vscode-icube-colorRed3: #dd3730;--vscode-icube-colorGreen1: #00906e;--vscode-icube-colorDiffBtn1: #ffffff;--vscode-icube-diffInsertedTextBackground: rgba(38, 165, 123, 0.32);--vscode-icube-colorChatError: rgba(97, 97, 97, 0);--vscode-icube-chatIconBg1: #ff4a36;--vscode-icube-chatIconColor1: #ffffff;--vscode-icube-emptyExplorerButtonBgColor: rgba(77, 97, 128, 0.08);--vscode-icube-emptyExplorerButtonTextColor: #333940;--vscode-icube-emptyExplorerSplitTextColor: #333940;--vscode-icube-emptyExplorerSplitColor: rgba(77, 107, 153, 0.2);--vscode-icube-lite.colorBg1: #25252d;--vscode-icube-lite.colorBg2: #1d1c23;--vscode-icube-lite.colorLine1: #2e2e38;--vscode-widget-shadow1: rgba(0, 0, 0, 0.08);--vscode-widget-shadow2: rgba(0, 0, 0, 0.1);--vscode-widget-light.shadow1: rgba(0, 0, 0, 0.04);--vscode-widget-light.shadow2: rgba(0, 0, 0, 0.08);--vscode-icube-tooltipsTextColor: #ffffff;--vscode-icube-ai.disableInputBorderColor: rgba(77, 107, 153, 0.4);--vscode-icube-scrollbarBgColor: rgba(100, 100, 100, 0.4);--vscode-icube-scrollbarHoverBgColor: rgba(100, 100, 100, 0.4);--vscode-icube-desktopEmptyWorkspaceIconBg: rgba(77, 97, 128, 0.08);--vscode-icube-desktopEmptyWorkspaceHoverBg: rgba(77, 107, 153, 0.12);--vscode-icube--code-code-text: #17181a;--vscode-icube-primaryButtonBackground: #31353a;--vscode-icube-primaryButtonForeground: #ffffff;--vscode-icube-primaryButtonHoverBackground: #72767b;--vscode-icube-primaryButtonHoverForeground: #ffffff;--vscode-icube-primaryButtonActivateBackground: #1a1b1d;--vscode-icube-primaryButtonActivateForeground: #ffffff;--vscode-icube-primaryButtonDisableBackground: #8a9096;--vscode-icube-primaryButtonDisableForeground: #ffffff;--vscode-icube-defaultButtonBackground: rgba(86, 99, 119, 0.11);--vscode-icube-defaultButtonForeground: #31353a;--vscode-icube-defaultButtonHoverBackground: rgba(86, 99, 119, 0.15);--vscode-icube-defaultButtonHoverForeground: #31353a;--vscode-icube-defaultButtonActivateBackground: rgba(86, 99, 119, 0.19);--vscode-icube-defaultButtonActivateForeground: #31353a;--vscode-icube-defaultButtonDisableBackground: rgba(86, 99, 119, 0.15);--vscode-icube-defaultButtonDisableForeground: #8a9096;--vscode-icube-checkboxBorder: #31353a;--vscode-icube-checkboxBackground: #31353a;--vscode-icube-checkboxDisabledBackground: #8a9096;--vscode-icube-checkboxForeground: #ffffff;--vscode-icube-checkboxUncheckedBorder: rgba(77, 107, 153, 0.18);--vscode-icube-checkboxUncheckedBackground: #ffffff;--vscode-icube-badgeBackground: #2f74ff;--vscode-icube-badgeForeground: #ffffff;--vscode-icube-colorBgTr1: rgba(86, 99, 119, 0.11);--vscode-icube-colorBgTr2: rgba(86, 99, 119, 0.15);--vscode-icube-colorBgTr3: rgba(86, 99, 119, 0.19);--vscode-icube-colorTextDefault: #31353a;--vscode-icube-colorTextHighlight: #111214;--vscode-icube-colorTextGray: #5b6066;--vscode-icube-colorTextDisable: #8a9096;--vscode-icube-colorBrandTr1: rgba(86, 99, 119, 0.11);--vscode-icube-colorBrandTr2: rgba(86, 99, 119, 0.15);--vscode-icube-colorBrandTr3: rgba(86, 99, 119, 0.19);--vscode-icube-colorSuccessTr1: rgba(64, 176, 139, 0.12);--vscode-icube-colorSuccessTr2: rgba(64, 176, 139, 0.18);--vscode-icube-colorSuccessTr3: rgba(64, 176, 139, 0.36);--vscode-icube-colorErrorTr2: rgba(232, 70, 58, 0.16);--vscode-icube-colorErrorTr3: rgba(232, 70, 58, 0.36);--vscode-icube-colorWarningTr1: rgba(226, 138, 0, 0.12);--vscode-icube-colorWarningTr2: rgba(226, 138, 0, 0.16);--vscode-icube-colorWarningTr3: rgba(226, 138, 0, 0.36);--vscode-icube-colorAlertTr1: rgba(198, 166, 38, 0.14);--vscode-icube-colorAlertTr2: rgba(198, 166, 38, 0.2);--vscode-icube-colorAlertTr3: rgba(198, 166, 38, 0.36);--vscode-icube-colorTextButtonHighlight: #111214;--vscode-icube--special-white: #ffffff;--vscode-icube--special-black: #000000;--vscode-icube--bg-bg-base-default: #ffffff;--vscode-icube--bg-bg-tooltip: #ffffff;--vscode-icube--bg-bg-base-secondary: #edeff2;--vscode-icube--bg-bg-base-tertiary: #ffffff;--vscode-icube--bg-bg-overlay-l1: rgba(86, 99, 119, 0.07);--vscode-icube--bg-bg-overlay-l2: rgba(86, 99, 119, 0.11);--vscode-icube--bg-bg-overlay-l3: rgba(86, 99, 119, 0.15);--vscode-icube--bg-bg-overlay-l4: rgba(86, 99, 119, 0.19);--vscode-icube--border-border-neutral-l1: rgba(77, 107, 153, 0.09);--vscode-icube--border-border-neutral-l2: rgba(77, 107, 153, 0.18);--vscode-icube--border-border-neutral-l3: rgba(77, 107, 153, 0.36);--vscode-icube--text-text-default-hover: #111214;--vscode-icube--text-text-default-active: #111214;--vscode-icube--icon-icon-default-hover: #111214;--vscode-icube--icon-icon-default-active: #111214;--vscode-icube--text-text-default: #31353a;--vscode-icube--text-text-secondary-hover: #31353a;--vscode-icube--text-text-secondary-active: #31353a;--vscode-icube--icon-icon-default: #31353a;--vscode-icube--icon-icon-secondary-hover: #31353a;--vscode-icube--icon-icon-secondary-active: #31353a;--vscode-icube--text-text-secondary: #5b6066;--vscode-icube--icon-icon-secondary: #5b6066;--vscode-icube--text-text-tertiary: #8a9096;--vscode-icube--text-text-disabled: #8a9096;--vscode-icube--icon-icon-tertiary: #8a9096;--vscode-icube--icon-icon-disabled: #8a9096;--vscode-icube--status-primary-default: #2f74ff;--vscode-icube--status-primary-hover: #4c88ff;--vscode-icube--status-primary-active: #1759dd;--vscode-icube--status-primary-surface-l1: rgba(47, 116, 255, 0.12);--vscode-icube--status-primary-surface-l2: rgba(47, 116, 255, 0.18);--vscode-icube--status-primary-surface-l3: rgba(47, 116, 255, 0.36);--vscode-icube--status-success-default: #26a57b;--vscode-icube--status-success-hover: #2ca77f;--vscode-icube--status-success-active: #1e8b56;--vscode-icube--status-success-surface-l1: rgba(64, 176, 139, 0.12);--vscode-icube--status-success-surface-l2: rgba(64, 176, 139, 0.18);--vscode-icube--status-success-surface-l3: rgba(64, 176, 139, 0.36);--vscode-icube--status-alert-default: #c6a626;--vscode-icube--status-alert-hover: #dfb716;--vscode-icube--status-alert-active: #af8d06;--vscode-icube--status-alert-surface-l1: rgba(198, 166, 38, 0.14);--vscode-icube--status-alert-surface-l2: rgba(198, 166, 38, 0.2);--vscode-icube--status-alert-surface-l3: rgba(198, 166, 38, 0.36);--vscode-icube--status-warning-default: #e28a00;--vscode-icube--status-warning-hover: #f18c13;--vscode-icube--status-warning-active: #c46f11;--vscode-icube--status-warning-surface-l1: rgba(226, 138, 0, 0.12);--vscode-icube--status-warning-surface-l2: rgba(226, 138, 0, 0.16);--vscode-icube--status-warning-surface-l3: rgba(226, 138, 0, 0.36);--vscode-icube--status-error-default: #e8463a;--vscode-icube--status-error-hover: #ea574c;--vscode-icube--status-error-active: #c9382f;--vscode-icube--status-error-surface-l1: rgba(232, 70, 58, 0.12);--vscode-icube--status-error-surface-l2: rgba(232, 70, 58, 0.16);--vscode-icube--status-error-surface-l3: rgba(232, 70, 58, 0.36);--vscode-icube--bg-bg-invert: #36393d;--vscode-icube--bg-bg-invert-hover: #72767b;--vscode-icube--bg-bg-invert-active: #1a1b1d;--vscode-icube--bg-bg-invert-disabled: rgba(86, 99, 119, 0.19);--vscode-icube--accent-accent-teal: #00b983;--vscode-icube--accent-accent-coral: #ff6b45;--vscode-icube--accent-accent-amber: #f2a90c;--vscode-icube--accent-accent-lime: #5fbf00;--vscode-icube--accent-accent-cyan: #00b8f8;--vscode-icube--accent-accent-blue: #3f85ff;--vscode-icube--accent-accent-magenta: #f53cff;--vscode-icube--accent-accent-violet: #9570ff;--vscode-icube--accent-accent-slate: #747e94;--vscode-icube--bg-bg-menu: #f8f9fa;--vscode-icube--bg-bg-menu-tr0: rgba(255, 255, 255, 0);--vscode-icube--bg-bg-brand: #0fdc78;--vscode-icube--bg-bg-brand-hover: #0ab861;--vscode-icube--bg-bg-brand-disabled: rgba(10, 184, 97, 0.2);--vscode-icube--border-border-contrast: #000000;--vscode-icube--border-border-brand: #0fdc78;--vscode-icube--text-text-brand: #0ab861;--vscode-icube--icon-icon-brand: #0ab861;--vscode-icube--text-text-brand-hover: #0fdc78;--vscode-icube--icon-icon-brand-hover: #0fdc78;--vscode-icube--text-text-onbrand: #0c0c0d;--vscode-icube--icon-icon-onbrand: #0c0c0d;--vscode-icube--text-text-onaccent: #ffffff;--vscode-icube--icon-icon-onaccent: #ffffff;--vscode-icube--special-bgtabsoverlay: rgba(193, 195, 205, 0.12);--vscode-icube--code-code-tag: #e24864;--vscode-icube--code-code-instruction: #b15ef2;--vscode-icube--code-code-doc: #8393a3;--vscode-icube--code-code-parameter: #4da621;--vscode-icube--cue: #0ab861;--vscode-icube--cue-tr0: rgba(10, 184, 97, 0);--vscode-icube--cue-tr1: rgba(10, 184, 97, 0.16);--vscode-icube--cue-tr2: rgba(10, 184, 97, 0.32);--vscode-icube--cue-diff-add: #00a56e;--vscode-icube--cue-diff-add-inline: rgba(0, 165, 110, 0.12);--vscode-icube--cue-diff-add-popup: rgba(0, 165, 110, 0.18);--vscode-icube--cue-diff-remove: rgba(232, 70, 58, 0.14);--vscode-icube--cue-diff-line: rgba(0, 0, 0, 0.32);--vscode-solo-lite-root-background: #edeff2;--vscode-icube-memoryRiskBackground: #fef3e2;--vscode-icube-memoryRiskBorder: #e8a838;--vscode-icube-memoryRiskIcon: #c87a1c;--vscode-icube-blendColor.btnHover.bg2: #e0e3e9;--vscode-icube-blendColor.btnTransparent3.bg2: #d3d8df;--vscode-editor-lineHighlightBackground: rgba(114, 118, 123, 0.08);--vscode-editor-inactiveLineHighlightBackground: rgba(114, 118, 123, 0.08);--vscode-editor-lineHighlightBorder: #eeeeee;--vscode-editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2);--vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);--vscode-editorCursor-foreground: #000000;--vscode-editorMultiCursor-primary.foreground: #000000;--vscode-editorMultiCursor-secondary.foreground: #000000;--vscode-editorWhitespace-foreground: rgba(51, 51, 51, 0.2);--vscode-editorLineNumber-foreground: #72767b;--vscode-editorIndentGuide-background: rgba(77, 107, 153, 0.09);--vscode-editorIndentGuide-activeBackground: rgba(77, 107, 153, 0.36);--vscode-editorIndentGuide-background1: rgba(77, 107, 153, 0.09);--vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground1: rgba(77, 107, 153, 0.36);--vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);--vscode-editorActiveLineNumber-foreground: #0b216f;--vscode-editorLineNumber-activeForeground: #111214;--vscode-editorRuler-foreground: #d3d3d3;--vscode-editorCodeLens-foreground: #919191;--vscode-editorBracketMatch-background: rgba(114, 118, 123, 0.24);--vscode-editorBracketMatch-border: #b9b9b9;--vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);--vscode-editorGutter-background: #ffffff;--vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.5);--vscode-editorGhostText-foreground: rgba(0, 0, 0, 0.47);--vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);--vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);--vscode-editorOverviewRuler-warningForeground: #bf8803;--vscode-editorOverviewRuler-infoForeground: #0063d3;--vscode-editorBracketHighlight-foreground1: #0431fa;--vscode-editorBracketHighlight-foreground2: #319331;--vscode-editorBracketHighlight-foreground3: #7b3814;--vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-unexpectedBracket.foreground: rgba(255, 18, 18, 0.8);--vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);--vscode-editorUnicodeHighlight-border: #bf8803;--vscode-diffEditor-move.border: rgba(139, 139, 139, 0.61);--vscode-diffEditor-moveActive.border: #ffa500;--vscode-diffEditor-unchangedRegionShadow: rgba(115, 115, 115, 0.75);--vscode-settings-headerForeground: #111214;--vscode-settings-settingsHeaderHoverForeground: rgba(17, 18, 20, 0.7);--vscode-settings-modifiedItemIndicator: #36393d;--vscode-settings-headerBorder: rgba(77, 107, 153, 0.18);--vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);--vscode-settings-dropdownBackground: #ffffff;--vscode-settings-dropdownForeground: #31353a;--vscode-settings-dropdownBorder: rgba(77, 107, 153, 0.09);--vscode-settings-dropdownListBorder: #c8c8c8;--vscode-settings-checkboxBackground: #ffffff;--vscode-settings-checkboxForeground: #31353a;--vscode-settings-checkboxBorder: #919191;--vscode-settings-textInputBackground: rgba(86, 99, 119, 0.07);--vscode-settings-textInputForeground: #31353a;--vscode-settings-textInputBorder: #cecece;--vscode-settings-numberInputBackground: rgba(86, 99, 119, 0.07);--vscode-settings-numberInputForeground: #31353a;--vscode-settings-numberInputBorder: #cecece;--vscode-settings-focusedRowBackground: rgba(86, 99, 119, 0.07);--vscode-settings-rowHoverBackground: rgba(86, 99, 119, 0.03);--vscode-settings-focusedRowBorder: rgba(0, 0, 0, 0);--vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;--vscode-actionBar-toggledBackground: #dddddd;--vscode-symbolIcon-arrayForeground: #31353a;--vscode-symbolIcon-booleanForeground: #31353a;--vscode-symbolIcon-classForeground: #d67e00;--vscode-symbolIcon-colorForeground: #31353a;--vscode-symbolIcon-constantForeground: #31353a;--vscode-symbolIcon-constructorForeground: #652d90;--vscode-symbolIcon-enumeratorForeground: #d67e00;--vscode-symbolIcon-enumeratorMemberForeground: #007acc;--vscode-symbolIcon-eventForeground: #d67e00;--vscode-symbolIcon-fieldForeground: #007acc;--vscode-symbolIcon-fileForeground: #31353a;--vscode-symbolIcon-folderForeground: #31353a;--vscode-symbolIcon-functionForeground: #652d90;--vscode-symbolIcon-interfaceForeground: #007acc;--vscode-symbolIcon-keyForeground: #31353a;--vscode-symbolIcon-keywordForeground: #31353a;--vscode-symbolIcon-methodForeground: #b180d7;--vscode-symbolIcon-moduleForeground: #31353a;--vscode-symbolIcon-namespaceForeground: #31353a;--vscode-symbolIcon-nullForeground: #31353a;--vscode-symbolIcon-numberForeground: #31353a;--vscode-symbolIcon-objectForeground: #31353a;--vscode-symbolIcon-operatorForeground: #31353a;--vscode-symbolIcon-packageForeground: #31353a;--vscode-symbolIcon-propertyForeground: #31353a;--vscode-symbolIcon-referenceForeground: #31353a;--vscode-symbolIcon-snippetForeground: #31353a;--vscode-symbolIcon-stringForeground: #31353a;--vscode-symbolIcon-structForeground: #31353a;--vscode-symbolIcon-textForeground: #31353a;--vscode-symbolIcon-typeParameterForeground: #31353a;--vscode-symbolIcon-unitForeground: #31353a;--vscode-symbolIcon-variableForeground: #007acc;--vscode-peekViewTitle-background: #f3f3f3;--vscode-peekViewTitleLabel-foreground: #000000;--vscode-peekViewTitleDescription-foreground: #616161;--vscode-peekView-border: #0063d3;--vscode-peekViewResult-background: #f3f3f3;--vscode-peekViewResult-lineForeground: #646465;--vscode-peekViewResult-fileForeground: #1e1e1e;--vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);--vscode-peekViewResult-selectionForeground: #6c6c6c;--vscode-peekViewEditor-background: #f2f8fc;--vscode-peekViewEditorGutter-background: #f2f8fc;--vscode-peekViewEditorStickyScroll-background: #f2f8fc;--vscode-peekViewEditorStickyScrollGutter-background: #f2f8fc;--vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);--vscode-peekViewEditor-matchHighlightBackground: rgba(245, 216, 2, 0.87);--vscode-editorMarkerNavigationError-background: #e51400;--vscode-editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, 0.1);--vscode-editorMarkerNavigationWarning-background: #bf8803;--vscode-editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, 0.1);--vscode-editorMarkerNavigationInfo-background: #0063d3;--vscode-editorMarkerNavigationInfo-headerBackground: rgba(0, 99, 211, 0.1);--vscode-editorMarkerNavigation-background: #ffffff;--vscode-editor-foldBackground: rgba(47, 116, 255, 0.05);--vscode-editor-foldPlaceholderForeground: #808080;--vscode-editorGutter-foldingControlForeground: #5b6066;--vscode-editorSuggestWidget-background: #f3f3f3;--vscode-editorSuggestWidget-border: #c8c8c8;--vscode-editorSuggestWidget-foreground: #31353a;--vscode-editorSuggestWidget-selectedForeground: #111214;--vscode-editorSuggestWidget-selectedIconForeground: #5b6066;--vscode-editorSuggestWidget-selectedBackground: rgba(86, 99, 119, 0.11);--vscode-editorSuggestWidget-highlightForeground: #0066bf;--vscode-editorSuggestWidget-focusHighlightForeground: #0066bf;--vscode-editorSuggestWidgetStatus-foreground: rgba(49, 53, 58, 0.5);--vscode-inlineEdit-originalBackground: rgba(232, 70, 58, 0.03);--vscode-inlineEdit-modifiedBackground: rgba(64, 176, 139, 0.05);--vscode-inlineEdit-originalChangedLineBackground: rgba(232, 70, 58, 0.13);--vscode-inlineEdit-originalChangedTextBackground: rgba(232, 70, 58, 0.13);--vscode-inlineEdit-modifiedChangedLineBackground: rgba(64, 176, 139, 0.09);--vscode-inlineEdit-modifiedChangedTextBackground: rgba(64, 176, 139, 0.13);--vscode-inlineEdit-gutterIndicator.primaryForeground: #ffffff;--vscode-inlineEdit-gutterIndicator.primaryBorder: #31353a;--vscode-inlineEdit-gutterIndicator.primaryBackground: rgba(49, 53, 58, 0.5);--vscode-inlineEdit-gutterIndicator.secondaryForeground: #ffffff;--vscode-inlineEdit-gutterIndicator.secondaryBorder: #5f6a79;--vscode-inlineEdit-gutterIndicator.secondaryBackground: #5f6a79;--vscode-inlineEdit-gutterIndicator.successfulForeground: #ffffff;--vscode-inlineEdit-gutterIndicator.successfulBorder: #31353a;--vscode-inlineEdit-gutterIndicator.successfulBackground: #31353a;--vscode-inlineEdit-gutterIndicator.background: rgba(95, 95, 95, 0.09);--vscode-inlineEdit-originalBorder: rgba(232, 70, 58, 0.16);--vscode-inlineEdit-modifiedBorder: rgba(26, 70, 55, 0.18);--vscode-inlineEdit-tabWillAcceptModifiedBorder: rgba(26, 70, 55, 0.18);--vscode-inlineEdit-tabWillAcceptOriginalBorder: rgba(232, 70, 58, 0.16);--vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);--vscode-editor-wordHighlightBackground: rgba(114, 118, 123, 0.24);--vscode-editor-wordHighlightStrongBackground: rgba(14, 99, 156, 0.25);--vscode-editor-wordHighlightTextBackground: rgba(114, 118, 123, 0.24);--vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);--vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);--vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);--vscode-editorHoverWidget-highlightForeground: #0066bf;--vscode-editor-placeholder.foreground: rgba(0, 0, 0, 0.47);--vscode-editorGutter-modifiedBackground: #2090d3;--vscode-editorGutter-modifiedSecondaryBackground: #aad8f2;--vscode-editorGutter-addedBackground: #48985d;--vscode-editorGutter-addedSecondaryBackground: #a7d5b3;--vscode-editorGutter-deletedBackground: #e51400;--vscode-editorGutter-deletedSecondaryBackground: #ff3d2b;--vscode-minimapGutter-modifiedBackground: #2090d3;--vscode-minimapGutter-addedBackground: #48985d;--vscode-minimapGutter-deletedBackground: #e51400;--vscode-editorOverviewRuler-modifiedForeground: rgba(32, 144, 211, 0.6);--vscode-editorOverviewRuler-addedForeground: rgba(72, 152, 93, 0.6);--vscode-editorOverviewRuler-deletedForeground: rgba(229, 20, 0, 0.6);--vscode-editorGutter-itemGlyphForeground: #31353a;--vscode-editorGutter-itemBackground: #dee0e5;--vscode-agentSessionReadIndicator-foreground: rgba(49, 53, 58, 0.15);--vscode-terminal-foreground: #333333;--vscode-terminal-selectionBackground: rgba(47, 116, 255, 0.18);--vscode-terminal-inactiveSelectionBackground: #e5ebf1;--vscode-terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25);--vscode-terminalCommandDecoration-successBackground: #2090d3;--vscode-terminalCommandDecoration-errorBackground: #e51400;--vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);--vscode-terminal-border: rgba(128, 128, 128, 0.35);--vscode-terminalOverviewRuler-border: rgba(127, 127, 127, 0.3);--vscode-terminal-findMatchBackground: #a8ac94;--vscode-terminal-hoverHighlightBackground: rgba(173, 214, 255, 0.07);--vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);--vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);--vscode-terminal-dropBackground: rgba(33, 97, 224, 0.16);--vscode-terminal-tab.activeBorder: #ffffff;--vscode-terminal-initialHintForeground: rgba(0, 0, 0, 0.47);--vscode-scmGraph-historyItemRefColor: #0063d3;--vscode-scmGraph-historyItemRemoteRefColor: #652d90;--vscode-scmGraph-historyItemBaseRefColor: #ea5c00;--vscode-scmGraph-historyItemHoverDefaultLabelForeground: #31353a;--vscode-scmGraph-historyItemHoverDefaultLabelBackground: #c4c4c4;--vscode-scmGraph-historyItemHoverLabelForeground: #ffffff;--vscode-scmGraph-historyItemHoverAdditionsForeground: #587c0c;--vscode-scmGraph-historyItemHoverDeletionsForeground: #ad0707;--vscode-scmGraph-foreground1: #ffb000;--vscode-scmGraph-foreground2: #dc267f;--vscode-scmGraph-foreground3: #994f00;--vscode-scmGraph-foreground4: #40b0a6;--vscode-scmGraph-foreground5: #b66dff;--vscode-commentsView-resolvedIcon: #8a9096;--vscode-commentsView-unresolvedIcon: rgba(0, 0, 0, 0);--vscode-editorCommentsWidget-replyInputBackground: #f3f3f3;--vscode-editorCommentsWidget-resolvedBorder: #8a9096;--vscode-editorCommentsWidget-unresolvedBorder: rgba(0, 0, 0, 0);--vscode-editorCommentsWidget-rangeBackground: rgba(0, 0, 0, 0);--vscode-editorCommentsWidget-rangeActiveBackground: rgba(0, 0, 0, 0);--vscode-editorGutter-commentRangeForeground: #dee0e5;--vscode-editorOverviewRuler-commentForeground: #dee0e5;--vscode-editorOverviewRuler-commentUnresolvedForeground: #dee0e5;--vscode-editorOverviewRuler-commentDraftForeground: #dee0e5;--vscode-editorGutter-commentGlyphForeground: #31353a;--vscode-editorGutter-commentUnresolvedGlyphForeground: #31353a;--vscode-editorGutter-commentDraftGlyphForeground: #31353a;--vscode-ports-iconRunningProcessForeground: #369432;--vscode-welcomePage-tileBackground: #f3f3f3;--vscode-welcomePage-tileHoverBackground: #dbdbdb;--vscode-welcomePage-tileBorder: rgba(0, 0, 0, 0.1);--vscode-welcomePage-progress.background: rgba(86, 99, 119, 0.07);--vscode-welcomePage-progress.foreground: #006ab1;--vscode-walkthrough-stepTitle.foreground: #000000;--vscode-extensionIcon-verifiedForeground: #006ab1;--vscode-keybindingTable-headerBackground: rgba(49, 53, 58, 0.04);--vscode-keybindingTable-rowsBackground: rgba(49, 53, 58, 0.04);--vscode-extensionButton-background: #31353a;--vscode-extensionButton-foreground: #ffffff;--vscode-extensionButton-hoverBackground: #72767b;--vscode-extensionButton-separator: rgba(193, 195, 205, 0.12);--vscode-extensionButton-prominentBackground: #31353a;--vscode-extensionButton-prominentForeground: #ffffff;--vscode-extensionButton-prominentHoverBackground: #72767b;--vscode-debugToolBar-background: #edeff2;--vscode-debugIcon-startForeground: #388a34;--vscode-notebook-cellBorderColor: #e8e8e8;--vscode-notebook-focusedEditorBorder: rgba(0, 0, 0, 0);--vscode-notebookStatusSuccessIcon-foreground: #388a34;--vscode-notebookEditorOverviewRuler-runningCellForeground: #388a34;--vscode-notebookStatusErrorIcon-foreground: #cc4b53;--vscode-notebookStatusRunningIcon-foreground: #31353a;--vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);--vscode-notebook-selectedCellBackground: rgba(200, 221, 241, 0.31);--vscode-notebook-selectedCellBorder: #e8e8e8;--vscode-notebook-focusedCellBorder: rgba(0, 0, 0, 0);--vscode-notebook-inactiveFocusedCellBorder: #e8e8e8;--vscode-notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08);--vscode-notebook-cellInsertionIndicator: rgba(0, 0, 0, 0);--vscode-notebookScrollbarSlider-background: rgba(100, 100, 100, 0.4);--vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);--vscode-notebookScrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);--vscode-notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2);--vscode-notebook-cellEditorBackground: #ffffff;--vscode-notebook-editorBackground: #ffffff;--vscode-inlineChat-foreground: #31353a;--vscode-inlineChat-background: #f3f3f3;--vscode-inlineChat-border: #c8c8c8;--vscode-inlineChat-shadow: rgba(0, 0, 0, 0.08);--vscode-inlineChatInput-border: #c8c8c8;--vscode-inlineChatInput-focusBorder: rgba(0, 0, 0, 0);--vscode-inlineChatInput-placeholderForeground: #5b6066;--vscode-inlineChatInput-background: rgba(86, 99, 119, 0.07);--vscode-inlineChatDiff-inserted: rgba(64, 176, 139, 0.09);--vscode-editorOverviewRuler-inlineChatInserted: rgba(64, 176, 139, 0.14);--vscode-editorMinimap-inlineChatInserted: rgba(64, 176, 139, 0.14);--vscode-inlineChatDiff-removed: rgba(232, 70, 58, 0.08);--vscode-editorOverviewRuler-inlineChatRemoved: rgba(232, 70, 58, 0.13);--vscode-chat-requestBorder: rgba(0, 0, 0, 0.1);--vscode-chat-requestBackground: rgba(255, 255, 255, 0.62);--vscode-chat-slashCommandBackground: rgba(173, 206, 255, 0.48);--vscode-chat-slashCommandForeground: #26569e;--vscode-chat-avatarBackground: #f2f2f2;--vscode-chat-avatarForeground: #31353a;--vscode-chat-editedFileForeground: #895503;--vscode-chat-requestCodeBorder: rgba(14, 99, 156, 0.25);--vscode-chat-requestBubbleBackground: rgba(47, 116, 255, 0.05);--vscode-chat-requestBubbleHoverBackground: rgba(47, 116, 255, 0.11);--vscode-chat-checkpointSeparator: #a9a9a9;--vscode-chat-linesAddedForeground: #107c10;--vscode-chat-linesRemovedForeground: #bc2f32;--vscode-extensionIcon-starForeground: #df6100;--vscode-extensionIcon-preReleaseForeground: #1d9271;--vscode-extensionIcon-sponsorForeground: #b51e78;--vscode-extensionIcon-privateForeground: rgba(0, 0, 0, 0.38);--vscode-debugExceptionWidget-border: #a31515;--vscode-debugExceptionWidget-background: #f1dfde;--vscode-editor-inlineValuesForeground: rgba(0, 0, 0, 0.5);--vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);--vscode-debugIcon-breakpointForeground: #cc4b53;--vscode-debugIcon-breakpointDisabledForeground: #848484;--vscode-debugIcon-breakpointUnverifiedForeground: #848484;--vscode-debugIcon-breakpointCurrentStackframeForeground: #be8700;--vscode-debugIcon-breakpointStackframeForeground: #89d185;--vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 102, 0.45);--vscode-editor-focusedStackFrameHighlightBackground: rgba(206, 231, 206, 0.45);--vscode-multiDiffEditor-headerBackground: #f8f8f9;--vscode-multiDiffEditor-background: #ffffff;--vscode-multiDiffEditor-border: #cccccc;--vscode-minimap-chatEditHighlight: rgba(255, 255, 255, 0.6);--vscode-chatManagement-sashBorder: rgba(128, 128, 128, 0.35);--vscode-gauge-foreground: #007acc;--vscode-gauge-background: rgba(0, 122, 204, 0.3);--vscode-gauge-warningForeground: #b89500;--vscode-gauge-warningBackground: rgba(184, 149, 0, 0.3);--vscode-gauge-errorForeground: #e8463a;--vscode-gauge-errorBackground: rgba(232, 70, 58, 0.3);--vscode-interactive-activeCodeBorder: #007acc;--vscode-interactive-inactiveCodeBorder: rgba(86, 99, 119, 0.11);--vscode-testing-iconFailed: #f14c4c;--vscode-testing-iconErrored: #f14c4c;--vscode-testing-iconPassed: #73c991;--vscode-testing-runAction: #73c991;--vscode-testing-iconQueued: #cca700;--vscode-testing-iconUnset: #848484;--vscode-testing-iconSkipped: #848484;--vscode-testing-peekBorder: #e51400;--vscode-testing-messagePeekBorder: #0063d3;--vscode-testing-peekHeaderBackground: rgba(229, 20, 0, 0.1);--vscode-testing-messagePeekHeaderBackground: rgba(0, 99, 211, 0.1);--vscode-testing-coveredBackground: rgba(64, 176, 139, 0.18);--vscode-testing-coveredBorder: rgba(64, 176, 139, 0.14);--vscode-testing-coveredGutterBackground: rgba(64, 176, 139, 0.11);--vscode-testing-uncoveredBranchBackground: #f7c3bf;--vscode-testing-uncoveredBackground: rgba(232, 70, 58, 0.16);--vscode-testing-uncoveredBorder: rgba(232, 70, 58, 0.12);--vscode-testing-uncoveredGutterBackground: rgba(232, 70, 58, 0.24);--vscode-testing-coverCountBadgeBackground: #c4c4c4;--vscode-testing-coverCountBadgeForeground: #333333;--vscode-testing-message.error.badgeBackground: #e51400;--vscode-testing-message.error.badgeBorder: #e51400;--vscode-testing-message.error.badgeForeground: #ffffff;--vscode-testing-message.info.decorationForeground: rgba(49, 53, 58, 0.5);--vscode-testing-iconErrored.retired: rgba(241, 76, 76, 0.7);--vscode-testing-iconFailed.retired: rgba(241, 76, 76, 0.7);--vscode-testing-iconPassed.retired: rgba(115, 201, 145, 0.7);--vscode-testing-iconQueued.retired: rgba(204, 167, 0, 0.7);--vscode-testing-iconUnset.retired: rgba(132, 132, 132, 0.7);--vscode-testing-iconSkipped.retired: rgba(132, 132, 132, 0.7);--vscode-searchEditor-textInputBorder: #cecece;--vscode-statusBar-debuggingBackground: #cc6633;--vscode-statusBar-debuggingForeground: #ffffff;--vscode-commandCenter-debuggingBackground: rgba(204, 102, 51, 0.26);--vscode-debugTokenExpression-name: #9b46b0;--vscode-debugTokenExpression-type: #4a90e2;--vscode-debugTokenExpression-value: rgba(108, 108, 108, 0.8);--vscode-debugTokenExpression-string: #a31515;--vscode-debugTokenExpression-boolean: #0000ff;--vscode-debugTokenExpression-number: #098658;--vscode-debugTokenExpression-error: #e51400;--vscode-debugView-exceptionLabelForeground: #ffffff;--vscode-debugView-exceptionLabelBackground: #a31515;--vscode-debugView-stateLabelForeground: #31353a;--vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);--vscode-debugView-valueChangedHighlight: #569cd6;--vscode-debugConsole-infoForeground: #0063d3;--vscode-debugConsole-warningForeground: #bf8803;--vscode-debugConsole-errorForeground: #cc4b53;--vscode-debugConsole-sourceForeground: #31353a;--vscode-debugConsoleInputIcon-foreground: #31353a;--vscode-debugIcon-pauseForeground: #007acc;--vscode-debugIcon-stopForeground: #a1260d;--vscode-debugIcon-disconnectForeground: #a1260d;--vscode-debugIcon-restartForeground: #388a34;--vscode-debugIcon-stepOverForeground: #007acc;--vscode-debugIcon-stepIntoForeground: #007acc;--vscode-debugIcon-stepOutForeground: #007acc;--vscode-debugIcon-continueForeground: #007acc;--vscode-debugIcon-stepBackForeground: #007acc;--vscode-mergeEditor-change.background: rgba(155, 185, 85, 0.2);--vscode-mergeEditor-change.word.background: rgba(156, 204, 44, 0.4);--vscode-mergeEditor-changeBase.background: #ffcccc;--vscode-mergeEditor-changeBase.word.background: #ffa3a3;--vscode-mergeEditor-conflict.unhandledUnfocused.border: #ffa600;--vscode-mergeEditor-conflict.unhandledFocused.border: #ffa600;--vscode-mergeEditor-conflict.handledUnfocused.border: rgba(134, 134, 134, 0.29);--vscode-mergeEditor-conflict.handledFocused.border: rgba(193, 193, 193, 0.8);--vscode-mergeEditor-conflict.handled.minimapOverViewRuler: rgba(173, 172, 168, 0.93);--vscode-mergeEditor-conflict.unhandled.minimapOverViewRuler: #fcba03;--vscode-mergeEditor-conflictingLines.background: rgba(255, 234, 0, 0.28);--vscode-mergeEditor-conflict.input1.background: rgba(64, 200, 174, 0.2);--vscode-mergeEditor-conflict.input2.background: rgba(64, 166, 255, 0.2);--vscode-terminal-ansiBlack: #000000;--vscode-terminal-ansiRed: #cd3131;--vscode-terminal-ansiGreen: #107c10;--vscode-terminal-ansiYellow: #949800;--vscode-terminal-ansiBlue: #0451a5;--vscode-terminal-ansiMagenta: #bc05bc;--vscode-terminal-ansiCyan: #0598bc;--vscode-terminal-ansiWhite: #555555;--vscode-terminal-ansiBrightBlack: #666666;--vscode-terminal-ansiBrightRed: #cd3131;--vscode-terminal-ansiBrightGreen: #14ce14;--vscode-terminal-ansiBrightYellow: #b5ba00;--vscode-terminal-ansiBrightBlue: #0451a5;--vscode-terminal-ansiBrightMagenta: #bc05bc;--vscode-terminal-ansiBrightCyan: #0598bc;--vscode-terminal-ansiBrightWhite: #a5a5a5;--vscode-simpleFindWidget-sashBorder: #c8c8c8;--vscode-terminalStickyScrollHover-background: #f0f0f0;--vscode-terminalCommandGuide-foreground: rgba(86, 99, 119, 0.11);--vscode-terminalSymbolIcon-flagForeground: #d67e00;--vscode-terminalSymbolIcon-aliasForeground: #b180d7;--vscode-terminalSymbolIcon-optionValueForeground: #007acc;--vscode-terminalSymbolIcon-methodForeground: #b180d7;--vscode-terminalSymbolIcon-argumentForeground: #007acc;--vscode-terminalSymbolIcon-optionForeground: #d67e00;--vscode-terminalSymbolIcon-fileForeground: #31353a;--vscode-terminalSymbolIcon-folderForeground: #31353a;--vscode-terminalSymbolIcon-commitForeground: #31353a;--vscode-terminalSymbolIcon-branchForeground: #31353a;--vscode-terminalSymbolIcon-tagForeground: #31353a;--vscode-terminalSymbolIcon-stashForeground: #31353a;--vscode-terminalSymbolIcon-remoteForeground: #31353a;--vscode-terminalSymbolIcon-pullRequestForeground: #31353a;--vscode-terminalSymbolIcon-pullRequestDoneForeground: #31353a;--vscode-terminalSymbolIcon-symbolicLinkFileForeground: #31353a;--vscode-terminalSymbolIcon-symbolicLinkFolderForeground: #31353a;--vscode-terminalSymbolIcon-symbolText: #31353a;--vscode-markdownAlert-note.foreground: #0063d3;--vscode-markdownAlert-tip.foreground: #388a34;--vscode-markdownAlert-important.foreground: #652d90;--vscode-markdownAlert-warning.foreground: #bf8803;--vscode-markdownAlert-caution.foreground: #e51400;--vscode-walkThrough-embeddedEditorBackground: #f4f4f4;--vscode-profiles-sashBorder: rgba(128, 128, 128, 0.35);--vscode-icube-inlineChat.regionHighlight: rgba(225, 225, 225, 0.2);--vscode-icube-inlineChatDiff.inserted: rgba(64, 176, 139, 0.09);--vscode-icube-inlineChatDiff.removed: rgba(232, 70, 58, 0.08);--vscode-icube-simpleInlineChat.regionHighlight: rgba(225, 225, 225, 0.2);--vscode-icube-simpleInlineChatDiff.inserted: rgba(64, 176, 139, 0.12);--vscode-icube-simpleInlineChatDiff.removed: rgba(232, 70, 58, 0.12);--vscode-gitDecoration-addedResourceForeground: #587c0c;--vscode-gitDecoration-modifiedResourceForeground: #f0a50f;--vscode-gitDecoration-deletedResourceForeground: #ad0707;--vscode-gitDecoration-renamedResourceForeground: #00aa62;--vscode-gitDecoration-untrackedResourceForeground: #00aa62;--vscode-gitDecoration-ignoredResourceForeground: #8e8e90;--vscode-gitDecoration-stageModifiedResourceForeground: #f0a50f;--vscode-gitDecoration-stageDeletedResourceForeground: #ad0707;--vscode-gitDecoration-conflictingResourceForeground: #ad0707;--vscode-gitDecoration-submoduleResourceForeground: #1258a7;--vscode-git-blame.editorDecorationForeground: #969696;}</style><style id="solo-lite-theme-variables">:root {
--workspace-gap-width: 4px;
--header-height: 48px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-full: 9999px;
--radius-2: 2px;
--radius-4: 4px;
--radius-6: 6px;
--radius-8: 8px;
--radius-12: 12px;
--radius-16: 16px;
--radius-20: 20px;
--radius-24: 24px;
--radius-32: 32px;
--radius-radius-2xs-4: 4px;
--radius-radius-xs-6: 6px;
--radius-radius-sm-8: 8px;
--radius-radius-md-12: 12px;
--radius-radius-lg-16: 16px;
--radius-radius-xl-20: 20px;
--radius-radius-2xl-24: 24px;
--radius-radius-3xl-32: 32px;
--radius-radius-full: 9999px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 24px;
--spacing-xxl: 32px;
--spacer-0: 0px;
--spacer-2: 2px;
--spacer-4: 4px;
--spacer-6: 6px;
--spacer-8: 8px;
--spacer-12: 12px;
--spacer-16: 16px;
--spacer-20: 20px;
--spacer-24: 24px;
--spacer-32: 32px;
--spacer-40: 40px;
--spacer-48: 48px;
--spacer-64: 64px;
--font-size-xs: 10px;
--font-size-sm: 11px;
--font-size-md: 12px;
--font-size-regular: 13px;
--font-size-base: 14px;
--font-size-lg: 16px;
--font-size-xl: 20px;
--font-size-xxl: 24px;
--font-family-default:
'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'PingFang SC', 'Microsoft YaHei',
'Hiragino Sans GB', Roboto, sans-serif;
--font-family-heading:
'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'PingFang SC', 'Microsoft YaHei',
'Hiragino Sans GB', Roboto, sans-serif;
--font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
--font-weight-default: 400;
--font-weight-code: 450;
--font-weight-medium: 500;
--font-weight-strong: 600;
--chat-body-md: 13px/20px var(--font-family-default);
--chat-body-md-strong: 500 13px/20px var(--font-family-default);
--chat-body-base: 14px/22px var(--font-family-default);
--chat-body-base-strong: 500 14px/22px var(--font-family-default);
--chat-spacer-2xs: 2px;
--chat-spacer-xs: 4px;
--chat-spacer-sm: 8px;
--chat-spacer-md: 12px;
--chat-spacer-lg: 16px;
--chat-spacer-xl: 20px;
--chat-radius-xs: 4px;
--chat-radius-sm: 8px;
--chat-radius-md: 12px;
--chat-radius-lg: 16px;
--chat-list-item-height: 28px;
--transition-fast: 0.15s ease;
--transition-normal: 0.2s ease;
--transition-slow: 0.3s ease;
/* ===== Z-Index Layer System ===== */
--z-base: 0;
--z-above: 1;
--z-above-2: 2;
--z-sticky: 10;
--z-local-overlay: 100;
--z-dropdown: 1000;
--z-popover: 1010;
--z-modal-backdrop: 1090;
--z-modal: 1100;
--z-drawer: 1120;
--z-confirm: 1150;
--z-notification: 1200;
--z-tooltip: 1300;
--z-fullscreen: 1400;
/* 仅限基础设施 / 调试工具,业务组件禁止直接使用 */
--z-max: 9999;
}
[data-theme='light'], .vs.solo-lite {
--shadow-elevation-50: 0 1px 2px -1px rgba(24, 24, 24, 0.08);
--shadow-elevation-100: 0 3px 9px 0 rgba(24, 24, 24, 0.06);
--shadow-elevation-100-float: 0 -3px 9px 0 rgba(24, 24, 24, 0.06);
--shadow-elevation-200: 0 6px 24px -1px rgba(24, 24, 24, 0.06);
--shadow-elevation-200-reverse: 0 -6px 24px -1px rgba(24, 24, 24, 0.06);
--shadow-elevation-300: 0 2px 8px -1px rgba(24, 24, 24, 0.02), 0 10px 24px -1px rgba(24, 24, 24, 0.06);
--shadow-elevation-100-tooltip: var(--shadow-elevation-100);
--shadow-elevation-200-menu-panel: var(--shadow-elevation-200);
--shadow-elevation-300-modal-panel: var(--shadow-elevation-300);
/* 输入框阴影颜色 */
--shadow-chat-input: 0 3px 8px 0 rgba(24, 24, 24, 0.04), 0 6px 24px -1px rgba(24, 24, 24, 0.06);
--shadow-chat-input-focused: 0 4px 12px 0 rgba(24, 24, 24, 0.04), 0 6px 32px -1px rgba(24, 24, 24, 0.06);
--bg-bg-base-default: #ffffff;
--bg-bg-base-secondary: #f5f5f5;
--bg-bg-base-tertiary: #e5e5e5;
--bg-bg-menu: #ffffff;
--bg-bg-tooltip: #fafafa;
--bg-bg-input: #ffffff;
--bg-bg-overlay-l1: rgba(115, 115, 115, 0.08);
--bg-bg-overlay-l2: rgba(115, 115, 115, 0.12);
--bg-bg-overlay-l3: rgba(115, 115, 115, 0.16);
--bg-bg-overlay-l4: rgba(115, 115, 115, 0.20);
--bg-bg-white: #ffffff;
--bg-bg-brand: #4b3fe3;
--bg-bg-brand-hover: #6a6fff;
--bg-bg-brand-active: #3f31c6;
--bg-bg-brand-disabled: rgba(75, 63, 227, 0.22);
--bg-bg-brand-popup: rgba(170, 183, 255, 0.36);
/* brand-sub 兼容(品牌色已统一,sub 映射为主品牌色) */
--bg-bg-brand-sub: var(--bg-bg-brand);
--bg-bg-brand-hover-sub: var(--bg-bg-brand-hover);
--bg-bg-brand-disabled-sub: var(--bg-bg-brand-disabled);
--bg-bg-brand-popup-sub: var(--bg-bg-brand-popup);
--bg-bg-invert: #262626;
--bg-bg-invert-hover: #404040;
--bg-bg-invert-active: #171717;
--bg-bg-invert-disabled: rgba(115, 115, 115, 0.20);
--bg-bg-marketplace-banner-overlay-start: rgba(82, 130, 193, 0);
--bg-bg-marketplace-banner-overlay-end: rgba(82, 130, 193, 0.8);
--bg-bg-marketplace-banner-control: rgba(0, 0, 0, 0.25);
--bg-bg-card: #fafafa;
--bg-bg-card-hover: #ffffff;
--bg-bg-marketplace-banner-plugin-tag: #e5f3ff;
--bg-bg-marketplace-banner-preview-mask-start: rgba(255, 255, 255, 0.9);
--bg-bg-marketplace-banner-preview-mask-end: rgba(255, 255, 255, 0.54);
--shadow-marketplace-banner-preview-card: 0px 6px 12px -1px rgba(0, 0, 0, 0.18), 0px 10px 24px -1px rgba(0, 0, 0, 0.2);
--shadow-marketplace-banner-preview-card-small: 0px 2.8023247718811035px 5.604649543762207px -0.4670540988445282px rgba(0, 0, 0, 0.18), 0px 4.670541763305664px 11.209299087524414px -0.4670540988445282px rgba(0, 0, 0, 0.2);
--shadow-marketplace-banner-preview-card-large: 0px 4.55377721786499px 9.10755443572998px -0.758962869644165px rgba(0, 0, 0, 0.18), 0px 7.589629650115967px 18.21510887145996px -0.758962869644165px rgba(0, 0, 0, 0.2);
--shadow-marketplace-banner-preview-input: 0px 0px 24px -1px rgba(24, 24, 24, 0.06), 0px -12px 8px -1px rgba(24, 24, 24, 0.02);
--chat-bg-card: var(--bg-bg-card);
--chat-bg-card-hover: var(--bg-bg-base-default);
--special-bgtabsoverlay: rgba(255, 255, 255, 0.12);
--special-tabsoverlay: rgba(193, 195, 205, 0.12);
--text-text-default: #171717;
--text-text-default-hover: #262626;
--text-text-default-active: #262626;
--text-text-secondary: #404040;
--text-text-secondary-hover: #171717;
--text-text-secondary-active: #171717;
--text-text-tertiary: #737373;
--text-text-disabled: #a1a1a1;
--text-text-brand: #4b3fe3;
--text-text-brand-hover: #6a6fff;
--text-text-brand-sub: var(--text-text-brand);
--text-text-brand-hover-sub: var(--text-text-brand-hover);
--text-text-onbrand: #171717;
--text-text-onaccent: #ffffff;
--text-text-marketplace-banner-on-light: #0a0a0a;
--text-text-marketplace-banner-plugin-tag: #054c8f;
--icon-icon-default: #262626;
--icon-icon-default-hover: #171717;
--icon-icon-default-active: #171717;
--icon-icon-secondary: #404040;
--icon-icon-secondary-hover: #262626;
--icon-icon-secondary-active: #262626;
--icon-icon-tertiary: #737373;
--icon-icon-disabled: #a1a1a1;
--icon-icon-brand: #4b3fe3;
--icon-icon-brand-hover: #6a6fff;
--icon-icon-brand-sub: var(--icon-icon-brand);
--icon-icon-brand-hover-sub: var(--icon-icon-brand-hover);
--icon-icon-onbrand: #0a0a0a;
--icon-icon-onaccent: #ffffff;
--icon-icon-white: #ffffff;
--border-border-neutral-l1: rgba(115, 115, 115, 0.12);
--border-border-neutral-l2: rgba(115, 115, 115, 0.18);
--border-border-neutral-l3: rgba(115, 115, 115, 0.36);
--border-border-brand: #4b3fe3;
--border-border-brand-sub: var(--border-border-brand);
--border-border-contrast: #000000;
--status-primary-default: #2f74ff;
--status-primary-hover: #4c88ff;
--status-primary-active: #1759dd;
--status-primary-surface-l1: rgba(47, 116, 255, 0.12);
--status-primary-surface-l2: rgba(47, 116, 255, 0.18);
--status-primary-surface-l3: rgba(47, 116, 255, 0.36);
--status-success-default: #15a877;
--status-success-hover: #2fb287;
--status-success-active: #1e8b56;
--status-success-surface-l1: rgba(64, 176, 139, 0.12);
--status-success-surface-l2: rgba(64, 176, 139, 0.18);
--status-success-surface-l3: rgba(64, 176, 139, 0.36);
--status-alert-default: #fea900;
--status-alert-hover: #ffb700;
--status-alert-active: #e59100;
--status-alert-surface-l1: rgba(254, 169, 0, 0.14);
--status-alert-surface-l2: rgba(254, 169, 0, 0.20);
--status-alert-surface-l3: rgba(254, 169, 0, 0.36);
--status-warning-default: #e27900;
--status-warning-hover: #f39a35;
--status-warning-active: #c46f11;
--status-warning-surface-l1: rgba(226, 121, 0, 0.12);
--status-warning-surface-l2: rgba(226, 121, 0, 0.16);
--status-warning-surface-l3: rgba(226, 121, 0, 0.36);
--status-error-default: #e8463a;
--status-error-hover: #ea574c;
--status-error-active: #c9382f;
--status-error-surface-l1: rgba(232, 70, 58, 0.12);
--status-error-surface-l2: rgba(232, 70, 58, 0.16);
--status-error-surface-l3: rgba(232, 70, 58, 0.36);
--accent-accent-teal: #00b983;
--accent-accent-coral: #ff6b45;
--accent-accent-amber: #f2a90c;
--accent-accent-lime: #5fc000;
--accent-accent-cyan: #00b6f5;
--accent-accent-blue: #3f85ff;
--accent-accent-magenta: #f53cff;
--accent-accent-violet: #9570ff;
--accent-accent-slate: #747e94;
--code-code-text: #17181a;
--code-code-doc: #8393a3;
--code-code-link: #2f74ff;
--code-code-number: #e54595;
--code-code-action: #5f36b2;
--code-code-instruction: #b15ef2;
--code-code-function: #ff5d4d;
--code-code-constant: #175ce6;
--code-code-parameter: #4da621;
--code-code-attribute: #c99100;
--code-code-tag: #e24864;
--code-code-terminal: #17181a;
--code-code-contrast: #17181a;
--code-code-editor: #17181a;
--special-white: #ffffff;
--special-black: #000000;
--viz-viz-series-amber: #edaa45;
--viz-viz-series-coral: #f87454;
--viz-viz-series-indigo: #b6a3ff;
--viz-viz-series-lime: #a6ea39;
--viz-viz-series-magenta: #fb9dd7;
--viz-viz-series-mint: #1dc981;
--viz-viz-series-sky: #22a5f7;
--viz-viz-series-slate: #859ead;
--viz-viz-series-teal: #59e8e8;
--viz-viz-series-violet: #b655fc;
--viz-viz-ui-bg-chart: #ffffff;
--viz-viz-ui-bg-tooltip: #fafafa;
--viz-viz-ui-chart-axis: rgba(115, 115, 115, 0.18);
--viz-viz-ui-chart-subtitle: #404040;
--viz-viz-ui-chart-tick: #404040;
--viz-viz-ui-chart-title: #171717;
--viz-viz-ui-legend-label: #404040;
--viz-viz-ui-legend-value: #171717;
--brand-blue-100: #e5f3ff;
--brand-blue-200: #cce6ff;
--brand-blue-300: #b2daff;
--brand-blue-400: #99ceff;
--brand-blue-500: #80c1ff;
--brand-blue-600: #64b4ff;
--brand-blue-700: #3792e6;
--brand-blue-800: #1071cb;
--brand-blue-900: #054c8f;
--brand-blue-1000: #00284d;
--brand-blue-grey-100: #f1eff4;
--brand-blue-grey-200: #e0e1e6;
--brand-blue-grey-300: #cfd3d8;
--brand-blue-grey-400: #bfc5ca;
--brand-blue-grey-500: #b0b5ba;
--brand-blue-grey-600: #a0a6ab;
--brand-blue-grey-700: #80898e;
--brand-blue-grey-800: #5e696e;
--brand-blue-grey-900: #404a4f;
--brand-blue-grey-1000: #21262b;
--brand-green-grey-100: #f1f4f4;
--brand-green-grey-200: #e0e6e6;
--brand-green-grey-300: #cfd8d8;
--brand-green-grey-400: #bfcaca;
--brand-green-grey-500: #b0baba;
--brand-green-grey-600: #a0abab;
--brand-green-grey-700: #808e8e;
--brand-green-grey-800: #5e6e6e;
--brand-green-grey-900: #404f4f;
--brand-green-grey-1000: #212b2b;
--brand-purple-100: #e8e5ff;
--brand-purple-200: #d2ccff;
--brand-purple-300: #bbb2ff;
--brand-purple-400: #a599ff;
--brand-purple-500: #8e80ff;
--brand-purple-600: #7864ff;
--brand-purple-700: #4c37e6;
--brand-purple-800: #2610cb;
--brand-purple-900: #15058f;
--brand-purple-1000: #09004d;
--brand-red-100: #ffe5e5;
--brand-red-200: #ffcccc;
--brand-red-300: #ffb2b2;
--brand-red-400: #ff9999;
--brand-red-500: #ff8080;
--brand-red-600: #ff6464;
--brand-red-700: #e63737;
--brand-red-800: #cb1010;
--brand-red-900: #8f0505;
--brand-red-1000: #4d0000;
--brand-yellow-100: #fff6e5;
--brand-yellow-200: #ffeccc;
--brand-yellow-300: #ffe3b2;
--brand-yellow-400: #ffda99;
--brand-yellow-500: #ffd080;
--brand-yellow-600: #ffc864;
--brand-yellow-700: #e6a637;
--brand-yellow-800: #cb8710;
--brand-yellow-900: #8f5c05;
--brand-yellow-1000: #4d3000;
--brand-blue-grey-100: #f1eff4;
--brand-blue-grey-200: #e0e1e6;
--brand-blue-grey-300: #cfd3d8;
--brand-blue-grey-400: #bfc5ca;
--brand-blue-grey-500: #b0b5ba;
--brand-blue-grey-600: #a0a6ab;
--brand-blue-grey-700: #80898e;
--brand-blue-grey-800: #5e696e;
--brand-blue-grey-900: #404a4f;
--brand-blue-grey-1000: #21262b;
--brand-green-grey-100: #f1f4f4;
--brand-green-grey-200: #e0e6e6;
--brand-green-grey-300: #cfd8d8;
--brand-green-grey-400: #bfcaca;
--brand-green-grey-500: #b0baba;
--brand-green-grey-600: #a0abab;
--brand-green-grey-700: #808e8e;
--brand-green-grey-800: #5e6e6e;
--brand-green-grey-900: #404f4f;
--brand-green-grey-1000: #212b2b;
--brand-neutral-grey-100: #f2f2f2;
--brand-neutral-grey-200: #e3e3e3;
--brand-neutral-grey-300: #d6d6d6;
--brand-neutral-grey-400: #c7c7c7;
--brand-neutral-grey-500: #bababa;
--brand-neutral-grey-600: #ababab;
--brand-neutral-grey-700: #8a8a8a;
--brand-neutral-grey-800: #686868;
--brand-neutral-grey-900: #474747;
--brand-neutral-grey-1000: #262626;
--brand-brand-50: #f2f7ff;
--brand-brand-100: #e5eaff;
--brand-brand-200: #cfd8ff;
--brand-brand-300: #aab7ff;
--brand-brand-400: #8894ff;
--brand-brand-500: #6a6fff;
--brand-brand-600: #4b3fe3;
--brand-brand-700: #3f31c6;
--brand-brand-800: #2c2290;
--brand-brand-900: #1a1759;
--brand-brand-950: #010109;
--brand-brand-grey-50: #fafafa;
--brand-brand-grey-100: #f5f5f5;
--brand-brand-grey-200: #e5e5e5;
--brand-brand-grey-300: #d4d4d4;
--brand-brand-grey-400: #a1a1a1;
--brand-brand-grey-500: #737373;
--brand-brand-grey-600: #525252;
--brand-brand-grey-700: #404040;
--brand-brand-grey-800: #262626;
--brand-brand-grey-900: #171717;
--brand-brand-grey-950: #0a0a0a;
--brand-brand-grey-50: #fafafa;
--brand-brand-grey-100: #f5f5f5;
--brand-brand-grey-200: #e5e5e5;
--brand-brand-grey-300: #d4d4d4;
--brand-brand-grey-400: #a1a1a1;
--brand-brand-grey-500: #737373;
--brand-brand-grey-600: #525252;
--brand-brand-grey-700: #404040;
--brand-brand-grey-800: #262626;
--brand-brand-grey-900: #171717;
--brand-brand-grey-950: #0a0a0a;
--body-body-xs: 10px/1.5 var(--font-family-default);
--body-body-sm: 11px/1.5 var(--font-family-default);
--body-body-sm-strong: 600 11px/1.5 var(--font-family-default);
--body-body-md: 12px/1.5 var(--font-family-default);
--body-body-md-strong: 600 12px/1.5 var(--font-family-default);
--body-body-base: 14px/1.5 var(--font-family-default);
--body-body-base-strong: 600 14px/1.5 var(--font-family-default);
--heading-heading-3xs: 600 10px/1.4 var(--font-family-heading);
--heading-heading-2xs: 600 11px/1.4 var(--font-family-heading);
--heading-heading-xs: 600 12px/1.4 var(--font-family-heading);
--heading-heading-sm: 600 13px/1.4 var(--font-family-heading);
--heading-heading-md: 600 14px/1.4 var(--font-family-heading);
--heading-heading-lg: 600 16px/1.4 var(--font-family-heading);
--heading-heading-xl: 600 20px/1.4 var(--font-family-heading);
--heading-heading-2xl: 600 24px/1.4 var(--font-family-heading);
--heading-heading-3xl: 600 32px/1.4 var(--font-family-heading);
--bg-bg-overlay-l0: rgba(86, 99, 119, 0.03);
--bg-primary-item: rgba(86, 99, 119, 0.15);
--bg-primary-item-hover: rgba(86, 99, 119, 0.22);
--border-primary-item: rgba(77, 107, 153, 0.09);
--border-primary-item-hover: rgba(77, 107, 153, 0.15);
--bg-bg-menu-old: #f8f9fa;
/* 首页输入框边框颜色(纯色,用于内凹圆弧等需要精确边框的场景) */
--homepage-input-border-color: #dfe3eb;
--welcome-logo-bg: var(--bg-bg-brand, #0fdc78);
--welcome-logo-color: #000000;
--user-message-bg-solid: #E3F8ED;
--user-message-bg-solid-transparent: rgba(227, 248, 237, 0);
--user-message-bg-solid-sub: #E9E6FF;
--user-message-bg-solid-sub-transparent: rgba(233, 230, 255, 0);
--sheet-text-color: #000000;
--slash-mention-bg: rgba(63, 133, 255, 0.15);
--builtin-slash-mention-bg: rgba(149, 112, 255, 0.15);
--gradient-golden: linear-gradient(180deg, #c0a115 0%, #dfbd27 100%);
--special-bggoldoverlay: rgba(210, 181, 19, 0.12);
--query-tag-bg-grey: rgba(116, 126, 148, 0.12);
--bg-bg-brand-old: #0fdc78;
--gradient-brand: linear-gradient(90deg, #0ac27b 0%, #0ecd70 36%, #06c179 72%, #63c5b1 100%);
--text-text-preformat-foreground: #a31515;
}
[data-theme='dark'], .vs-dark.solo-lite {
--shadow-elevation-50: 0 1px 2px -1px rgba(0, 0, 0, 0.45);
--shadow-elevation-100: 0 3px 9px 0 rgba(0, 0, 0, 0.25);
--shadow-elevation-100-float: 0 -3px 9px 0 rgba(0, 0, 0, 0.25);
--shadow-elevation-200: 0 6px 24px -1px rgba(0, 0, 0, 0.25);
--shadow-elevation-200-reverse: 0 -6px 24px -1px rgba(0, 0, 0, 0.25);
--shadow-elevation-300: 0 2px 8px -1px rgba(0, 0, 0, 0.18), 0 10px 24px -1px rgba(0, 0, 0, 0.30);
--shadow-elevation-100-tooltip: var(--shadow-elevation-100);
--shadow-elevation-200-menu-panel: var(--shadow-elevation-200);
--shadow-elevation-300-modal-panel: var(--shadow-elevation-300);
/* 输入框阴影颜色 */
--shadow-chat-input: 0 3px 8px 0 rgba(24, 24, 24, 0.08), 0 6px 24px -1px rgba(24, 24, 24, 0.12);
--shadow-chat-input-focused: 0 4px 12px 0 rgba(24, 24, 24, 0.08), 0 6px 32px -1px rgba(24, 24, 24, 0.12);
--bg-bg-base-default: #171717;
--bg-bg-base-secondary: #262626;
--bg-bg-base-tertiary: #404040;
--bg-bg-menu: #171717;
--bg-bg-tooltip: #171717;
--bg-bg-input: #171717;
--bg-bg-overlay-l1: rgba(212, 212, 212, 0.04);
--bg-bg-overlay-l2: rgba(212, 212, 212, 0.06);
--bg-bg-overlay-l3: rgba(212, 212, 212, 0.08);
--bg-bg-overlay-l4: rgba(212, 212, 212, 0.12);
--bg-bg-white: #ffffff;
--bg-bg-brand: #4b3fe3;
--bg-bg-brand-hover: #6a6fff;
--bg-bg-brand-active: #3f31c6;
--bg-bg-brand-disabled: rgba(75, 63, 227, 0.35);
--bg-bg-brand-popup: rgba(106, 111, 255, 0.15);
--bg-bg-brand-sub: var(--bg-bg-brand);
--bg-bg-brand-hover-sub: var(--bg-bg-brand-hover);
--bg-bg-brand-disabled-sub: var(--bg-bg-brand-disabled);
--bg-bg-brand-popup-sub: var(--bg-bg-brand-popup);
--bg-bg-invert: #e5e5e5;
--bg-bg-invert-hover: #f5f5f5;
--bg-bg-invert-active: #e5e5e5;
--bg-bg-invert-disabled: rgba(212, 212, 212, 0.06);
--bg-bg-marketplace-banner-overlay-start: rgba(82, 130, 193, 0);
--bg-bg-marketplace-banner-overlay-end: rgba(82, 130, 193, 0.8);
--bg-bg-marketplace-banner-control: rgba(0, 0, 0, 0.25);
--bg-bg-card: #202020;
--bg-bg-card-hover: #171717;
--bg-bg-marketplace-banner-plugin-tag: #e5f3ff;
--bg-bg-marketplace-banner-preview-mask-start: rgba(255, 255, 255, 0.9);
--bg-bg-marketplace-banner-preview-mask-end: rgba(255, 255, 255, 0.54);
--shadow-marketplace-banner-preview-card: 0px 6px 12px -1px rgba(0, 0, 0, 0.18), 0px 10px 24px -1px rgba(0, 0, 0, 0.2);
--shadow-marketplace-banner-preview-card-small: 0px 2.8023247718811035px 5.604649543762207px -0.4670540988445282px rgba(0, 0, 0, 0.18), 0px 4.670541763305664px 11.209299087524414px -0.4670540988445282px rgba(0, 0, 0, 0.2);
--shadow-marketplace-banner-preview-card-large: 0px 4.55377721786499px 9.10755443572998px -0.758962869644165px rgba(0, 0, 0, 0.18), 0px 7.589629650115967px 18.21510887145996px -0.758962869644165px rgba(0, 0, 0, 0.2);
--shadow-marketplace-banner-preview-input: 0px 0px 24px -1px rgba(24, 24, 24, 0.06), 0px -12px 8px -1px rgba(24, 24, 24, 0.02);
--chat-bg-card: #202020;
--chat-bg-card-hover: var(--bg-bg-base-default);
--special-bgtabsoverlay: rgba(0, 0, 0, 0.20);
--special-tabsoverlay: rgba(13, 14, 15, 0.18);
--text-text-default: #e5e5e5;
--text-text-default-hover: #fafafa;
--text-text-default-active: #fafafa;
--text-text-secondary: #a1a1a1;
--text-text-secondary-hover: #e5e5e5;
--text-text-secondary-active: #e5e5e5;
--text-text-tertiary: #737373;
--text-text-disabled: #525252;
--text-text-brand: #6a6fff;
--text-text-brand-hover: #4b3fe3;
--text-text-brand-sub: var(--text-text-brand);
--text-text-brand-hover-sub: var(--text-text-brand-hover);
--text-text-onbrand: #171717;
--text-text-onaccent: #171717;
--text-text-marketplace-banner-on-light: #0a0a0a;
--text-text-marketplace-banner-plugin-tag: #054c8f;
--icon-icon-default: #e5e5e5;
--icon-icon-default-hover: #fafafa;
--icon-icon-default-active: #fafafa;
--icon-icon-secondary: #a1a1a1;
--icon-icon-secondary-hover: #e5e5e5;
--icon-icon-secondary-active: #e5e5e5;
--icon-icon-tertiary: #737373;
--icon-icon-disabled: #525252;
--icon-icon-brand: #6a6fff;
--icon-icon-brand-hover: #4b3fe3;
--icon-icon-brand-sub: var(--icon-icon-brand);
--icon-icon-brand-hover-sub: var(--icon-icon-brand-hover);
--icon-icon-onbrand: #0a0a0a;
--icon-icon-onaccent: #0A0A0A;
--icon-icon-white: #ffffff;
--border-border-neutral-l1: rgba(229, 229, 229, 0.10);
--border-border-neutral-l2: rgba(229, 229, 229, 0.16);
--border-border-neutral-l3: rgba(229, 229, 229, 0.20);
--border-border-brand: #6a6fff;
--border-border-brand-sub: var(--border-border-brand);
--border-border-contrast: #ffffff;
--status-primary-default: #387bff;
--status-primary-hover: #4c88ff;
--status-primary-active: #1759dd;
--status-primary-surface-l1: rgba(53, 121, 255, 0.18);
--status-primary-surface-l2: rgba(53, 121, 255, 0.28);
--status-primary-surface-l3: rgba(53, 121, 255, 0.36);
--status-success-default: #33c192;
--status-success-hover: #5ed4ad;
--status-success-active: #27b082;
--status-success-surface-l1: rgba(0, 165, 110, 0.18);
--status-success-surface-l2: rgba(0, 165, 110, 0.28);
--status-success-surface-l3: rgba(0, 165, 110, 0.36);
--status-alert-default: #d29d00;
--status-alert-hover: #dfb949;
--status-alert-active: #ab8820;
--status-alert-surface-l1: rgba(210, 157, 0, 0.16);
--status-alert-surface-l2: rgba(210, 157, 0, 0.28);
--status-alert-surface-l3: rgba(210, 157, 0, 0.36);
--status-warning-default: #d27e24;
--status-warning-hover: #d78b28;
--status-warning-active: #b46510;
--status-warning-surface-l1: rgba(210, 126, 36, 0.16);
--status-warning-surface-l2: rgba(210, 126, 36, 0.28);
--status-warning-surface-l3: rgba(210, 126, 36, 0.36);
--status-error-default: #f65a5a;
--status-error-hover: #f86262;
--status-error-active: #b33636;
--status-error-surface-l1: rgba(246, 70, 70, 0.18);
--status-error-surface-l2: rgba(246, 70, 70, 0.28);
--status-error-surface-l3: rgba(246, 70, 70, 0.36);
--accent-accent-teal: #2dd288;
--accent-accent-coral: #ff9392;
--accent-accent-amber: #dcb364;
--accent-accent-lime: #8acb3a;
--accent-accent-cyan: #04cbe5;
--accent-accent-blue: #7bb8ff;
--accent-accent-magenta: #ec93ff;
--accent-accent-violet: #bfa5ff;
--accent-accent-slate: #afb9cf;
--code-code-text: #e0e3ee;
--code-code-doc: #7f838c;
--code-code-link: #3c7eff;
--code-code-number: #f48cca;
--code-code-action: #b38cff;
--code-code-instruction: #f0d8ff;
--code-code-function: #f29d79;
--code-code-constant: #80bbff;
--code-code-parameter: #82d99f;
--code-code-attribute: #ded47e;
--code-code-tag: #f2858c;
--code-code-terminal: #e0e3ee;
--code-code-contrast: #e0e3ee;
--code-code-editor: #e0e3ee;
--special-white: #ffffff;
--special-black: #000000;
--viz-viz-series-amber: #edaa45;
--viz-viz-series-coral: #f87454;
--viz-viz-series-indigo: #b6a3ff;
--viz-viz-series-lime: #a6ea39;
--viz-viz-series-magenta: #fb9dd7;
--viz-viz-series-mint: #1dc981;
--viz-viz-series-sky: #22a5f7;
--viz-viz-series-slate: #859ead;
--viz-viz-series-teal: #78f2f2;
--viz-viz-series-violet: #b655fc;
--viz-viz-ui-bg-chart: #171717;
--viz-viz-ui-bg-tooltip: #0a0a0a;
--viz-viz-ui-chart-axis: rgba(229, 229, 229, 0.16);
--viz-viz-ui-chart-subtitle: #737373;
--viz-viz-ui-chart-tick: #737373;
--viz-viz-ui-chart-title: #e5e5e5;
--viz-viz-ui-legend-label: #737373;
--viz-viz-ui-legend-value: #e5e5e5;
--brand-blue-100: #e5f3ff;
--brand-blue-200: #cce6ff;
--brand-blue-300: #b2daff;
--brand-blue-400: #99ceff;
--brand-blue-500: #80c1ff;
--brand-blue-600: #64b4ff;
--brand-blue-700: #3792e6;
--brand-blue-800: #1071cb;
--brand-blue-900: #054c8f;
--brand-blue-1000: #00284d;
--brand-blue-grey-100: #f1eff4;
--brand-blue-grey-200: #e0e1e6;
--brand-blue-grey-300: #cfd3d8;
--brand-blue-grey-400: #bfc5ca;
--brand-blue-grey-500: #b0b5ba;
--brand-blue-grey-600: #a0a6ab;
--brand-blue-grey-700: #80898e;
--brand-blue-grey-800: #5e696e;
--brand-blue-grey-900: #404a4f;
--brand-blue-grey-1000: #21262b;
--brand-green-grey-100: #f1f4f4;
--brand-green-grey-200: #e0e6e6;
--brand-green-grey-300: #cfd8d8;
--brand-green-grey-400: #bfcaca;
--brand-green-grey-500: #b0baba;
--brand-green-grey-600: #a0abab;
--brand-green-grey-700: #808e8e;
--brand-green-grey-800: #5e6e6e;
--brand-green-grey-900: #404f4f;
--brand-green-grey-1000: #212b2b;
--brand-purple-100: #e8e5ff;
--brand-purple-200: #d2ccff;
--brand-purple-300: #bbb2ff;
--brand-purple-400: #a599ff;
--brand-purple-500: #8e80ff;
--brand-purple-600: #7864ff;
--brand-purple-700: #4c37e6;
--brand-purple-800: #2610cb;
--brand-purple-900: #15058f;
--brand-purple-1000: #09004d;
--brand-red-100: #ffe5e5;
--brand-red-200: #ffcccc;
--brand-red-300: #ffb2b2;
--brand-red-400: #ff9999;
--brand-red-500: #ff8080;
--brand-red-600: #ff6464;
--brand-red-700: #e63737;
--brand-red-800: #cb1010;
--brand-red-900: #8f0505;
--brand-red-1000: #4d0000;
--brand-yellow-100: #fff6e5;
--brand-yellow-200: #ffeccc;
--brand-yellow-300: #ffe3b2;
--brand-yellow-400: #ffda99;
--brand-yellow-500: #ffd080;
--brand-yellow-600: #ffc864;
--brand-yellow-700: #e6a637;
--brand-yellow-800: #cb8710;
--brand-yellow-900: #8f5c05;
--brand-yellow-1000: #4d3000;
--brand-blue-grey-100: #f1eff4;
--brand-blue-grey-200: #e0e1e6;
--brand-blue-grey-300: #cfd3d8;
--brand-blue-grey-400: #bfc5ca;
--brand-blue-grey-500: #b0b5ba;
--brand-blue-grey-600: #a0a6ab;
--brand-blue-grey-700: #80898e;
--brand-blue-grey-800: #5e696e;
--brand-blue-grey-900: #404a4f;
--brand-blue-grey-1000: #21262b;
--brand-green-grey-100: #f1f4f4;
--brand-green-grey-200: #e0e6e6;
--brand-green-grey-300: #cfd8d8;
--brand-green-grey-400: #bfcaca;
--brand-green-grey-500: #b0baba;
--brand-green-grey-600: #a0abab;
--brand-green-grey-700: #808e8e;
--brand-green-grey-800: #5e6e6e;
--brand-green-grey-900: #404f4f;
--brand-green-grey-1000: #212b2b;
--brand-neutral-grey-100: #f2f2f2;
--brand-neutral-grey-200: #e3e3e3;
--brand-neutral-grey-300: #d6d6d6;
--brand-neutral-grey-400: #c7c7c7;
--brand-neutral-grey-500: #bababa;
--brand-neutral-grey-600: #ababab;
--brand-neutral-grey-700: #8a8a8a;
--brand-neutral-grey-800: #686868;
--brand-neutral-grey-900: #474747;
--brand-neutral-grey-1000: #262626;
--brand-brand-50: #f2f7ff;
--brand-brand-100: #e5eaff;
--brand-brand-200: #cfd8ff;
--brand-brand-300: #aab7ff;
--brand-brand-400: #8894ff;
--brand-brand-500: #6a6fff;
--brand-brand-600: #4b3fe3;
--brand-brand-700: #3f31c6;
--brand-brand-800: #2c2290;
--brand-brand-900: #1a1759;
--brand-brand-950: #010109;
--brand-brand-grey-50: #fafafa;
--brand-brand-grey-100: #f5f5f5;
--brand-brand-grey-200: #e5e5e5;
--brand-brand-grey-300: #d4d4d4;
--brand-brand-grey-400: #a1a1a1;
--brand-brand-grey-500: #737373;
--brand-brand-grey-600: #525252;
--brand-brand-grey-700: #404040;
--brand-brand-grey-800: #262626;
--brand-brand-grey-900: #171717;
--brand-brand-grey-950: #0a0a0a;
--brand-brand-grey-50: #fafafa;
--brand-brand-grey-100: #f5f5f5;
--brand-brand-grey-200: #e5e5e5;
--brand-brand-grey-300: #d4d4d4;
--brand-brand-grey-400: #a1a1a1;
--brand-brand-grey-500: #737373;
--brand-brand-grey-600: #525252;
--brand-brand-grey-700: #404040;
--brand-brand-grey-800: #262626;
--brand-brand-grey-900: #171717;
--brand-brand-grey-950: #0a0a0a;
--body-body-xs: 10px/1.5 var(--font-family-default);
--body-body-sm: 11px/1.5 var(--font-family-default);
--body-body-sm-strong: 600 11px/1.5 var(--font-family-default);
--body-body-md: 12px/1.5 var(--font-family-default);
--body-body-md-strong: 600 12px/1.5 var(--font-family-default);
--body-body-base: 14px/1.5 var(--font-family-default);
--body-body-base-strong: 600 14px/1.5 var(--font-family-default);
--heading-heading-3xs: 600 10px/1.4 var(--font-family-heading);
--heading-heading-2xs: 600 11px/1.4 var(--font-family-heading);
--heading-heading-xs: 600 12px/1.4 var(--font-family-heading);
--heading-heading-sm: 600 13px/1.4 var(--font-family-heading);
--heading-heading-md: 600 14px/1.4 var(--font-family-heading);
--heading-heading-lg: 600 16px/1.4 var(--font-family-heading);
--heading-heading-xl: 600 20px/1.4 var(--font-family-heading);
--heading-heading-2xl: 600 24px/1.4 var(--font-family-heading);
--heading-heading-3xl: 600 32px/1.4 var(--font-family-heading);
--bg-bg-overlay-l0: rgba(224, 226, 242, 0.03);
--bg-primary-item: rgba(224, 226, 242, 0.08);
--bg-primary-item-hover: rgba(224, 226, 242, 0.12);
--border-primary-item: rgba(224, 226, 242, 0.06);
--border-primary-item-hover: rgba(224, 226, 242, 0.1);
/* 首页输入框边框颜色(纯色,用于内凹圆弧等需要精确边框的场景) */
--homepage-input-border-color: #343538;
--welcome-logo-bg: #000000;
--welcome-logo-color: var(--bg-bg-brand, #0fdc78);
--user-message-bg-solid: #1D352A;
--user-message-bg-solid-transparent: rgba(29, 53, 42, 0);
--user-message-bg-solid-sub: #2B2A38;
--user-message-bg-solid-sub-transparent: rgba(43, 42, 56, 0);
--sheet-text-color: #ffffff;
--slash-mention-bg: rgba(63, 133, 255, 0.15);
--builtin-slash-mention-bg: rgba(149, 112, 255, 0.15);
--gradient-golden: linear-gradient(180deg, #DAB444 0%, #FFEA8E 100%);
--special-bggoldoverlay: rgba(139, 128, 65, 0.12);
--query-tag-bg-grey: rgba(116, 126, 148, 0.18);
--bg-bg-brand-old: #32f08c;
--gradient-brand: linear-gradient(90deg, #3ee1a3 0%, #32f08c 36%, #60f2bd 71.63%, #a0fde7 100%);
--text-text-preformat-foreground: #d7ba7d;
}
[data-theme='dark-blue'], .vs-dark.solo-lite {
--shadow-elevation-50: 0 1px 2px -1px rgba(0, 0, 0, 0.45);
--shadow-elevation-100: 0 3px 9px 0 rgba(0, 0, 0, 0.25);
--shadow-elevation-100-float: 0 -3px 9px 0 rgba(0, 0, 0, 0.25);
--shadow-elevation-200: 0 6px 24px -1px rgba(0, 0, 0, 0.25);
--shadow-elevation-200-reverse: 0 -6px 24px -1px rgba(0, 0, 0, 0.25);
--shadow-elevation-300: 0 2px 8px -1px rgba(0, 0, 0, 0.18), 0 10px 24px -1px rgba(0, 0, 0, 0.30);
--shadow-elevation-100-tooltip: var(--shadow-elevation-100);
--shadow-elevation-200-menu-panel: var(--shadow-elevation-200);
--shadow-elevation-300-modal-panel: var(--shadow-elevation-300);
/* 输入框阴影颜色 */
--shadow-chat-input: 0 3px 8px 0 rgba(24, 24, 24, 0.08), 0 6px 24px -1px rgba(24, 24, 24, 0.12);
--shadow-chat-input-focused: 0 4px 12px 0 rgba(24, 24, 24, 0.08), 0 6px 32px -1px rgba(24, 24, 24, 0.12);
--bg-bg-base-default: #171717;
--bg-bg-base-secondary: #262626;
--bg-bg-base-tertiary: #404040;
--bg-bg-menu: #171717;
--bg-bg-tooltip: #171717;
--bg-bg-input: #171717;
--bg-bg-overlay-l1: rgba(212, 212, 212, 0.04);
--bg-bg-overlay-l2: rgba(212, 212, 212, 0.06);
--bg-bg-overlay-l3: rgba(212, 212, 212, 0.08);
--bg-bg-overlay-l4: rgba(212, 212, 212, 0.12);
--bg-bg-white: #ffffff;
--bg-bg-brand: #4b3fe3;
--bg-bg-brand-hover: #6a6fff;
--bg-bg-brand-active: #3f31c6;
--bg-bg-brand-disabled: rgba(75, 63, 227, 0.35);
--bg-bg-brand-popup: rgba(106, 111, 255, 0.15);
--bg-bg-brand-sub: var(--bg-bg-brand);
--bg-bg-brand-hover-sub: var(--bg-bg-brand-hover);
--bg-bg-brand-disabled-sub: var(--bg-bg-brand-disabled);
--bg-bg-brand-popup-sub: var(--bg-bg-brand-popup);
--bg-bg-invert: #e5e5e5;
--bg-bg-invert-hover: #f5f5f5;
--bg-bg-invert-active: #e5e5e5;
--bg-bg-invert-disabled: rgba(212, 212, 212, 0.06);
--bg-bg-marketplace-banner-overlay-start: rgba(82, 130, 193, 0);
--bg-bg-marketplace-banner-overlay-end: rgba(82, 130, 193, 0.8);
--bg-bg-marketplace-banner-control: rgba(0, 0, 0, 0.25);
--bg-bg-card: #202020;
--bg-bg-card-hover: #171717;
--bg-bg-marketplace-banner-plugin-tag: #e5f3ff;
--bg-bg-marketplace-banner-preview-mask-start: rgba(255, 255, 255, 0.9);
--bg-bg-marketplace-banner-preview-mask-end: rgba(255, 255, 255, 0.54);
--shadow-marketplace-banner-preview-card: 0px 6px 12px -1px rgba(0, 0, 0, 0.18), 0px 10px 24px -1px rgba(0, 0, 0, 0.2);
--shadow-marketplace-banner-preview-card-small: 0px 2.8023247718811035px 5.604649543762207px -0.4670540988445282px rgba(0, 0, 0, 0.18), 0px 4.670541763305664px 11.209299087524414px -0.4670540988445282px rgba(0, 0, 0, 0.2);
--shadow-marketplace-banner-preview-card-large: 0px 4.55377721786499px 9.10755443572998px -0.758962869644165px rgba(0, 0, 0, 0.18), 0px 7.589629650115967px 18.21510887145996px -0.758962869644165px rgba(0, 0, 0, 0.2);
--shadow-marketplace-banner-preview-input: 0px 0px 24px -1px rgba(24, 24, 24, 0.06), 0px -12px 8px -1px rgba(24, 24, 24, 0.02);
--chat-bg-card: var(--bg-bg-card);
--chat-bg-card-hover: var(--bg-bg-base-default);
--special-bgtabsoverlay: rgba(0, 0, 0, 0.20);
--special-tabsoverlay: rgba(13, 14, 15, 0.18);
--text-text-default: #e5e5e5;
--text-text-default-hover: #fafafa;
--text-text-default-active: #fafafa;
--text-text-secondary: #a1a1a1;
--text-text-secondary-hover: #e5e5e5;
--text-text-secondary-active: #e5e5e5;
--text-text-tertiary: #737373;
--text-text-disabled: #525252;
--text-text-brand: #6a6fff;
--text-text-brand-hover: #4b3fe3;
--text-text-brand-sub: var(--text-text-brand);
--text-text-brand-hover-sub: var(--text-text-brand-hover);
--text-text-onbrand: #171717;
--text-text-onaccent: #171717;
--text-text-marketplace-banner-on-light: #0a0a0a;
--text-text-marketplace-banner-plugin-tag: #054c8f;
--icon-icon-default: #e5e5e5;
--icon-icon-default-hover: #fafafa;
--icon-icon-default-active: #fafafa;
--icon-icon-secondary: #a1a1a1;
--icon-icon-secondary-hover: #e5e5e5;
--icon-icon-secondary-active: #e5e5e5;
--icon-icon-tertiary: #737373;
--icon-icon-disabled: #525252;
--icon-icon-brand: #6a6fff;
--icon-icon-brand-hover: #4b3fe3;
--icon-icon-brand-sub: var(--icon-icon-brand);
--icon-icon-brand-hover-sub: var(--icon-icon-brand-hover);
--icon-icon-onbrand: #0a0a0a;
--icon-icon-onaccent: #0A0A0A;
--icon-icon-white: #ffffff;
--border-border-neutral-l1: rgba(229, 229, 229, 0.10);
--border-border-neutral-l2: rgba(229, 229, 229, 0.16);
--border-border-neutral-l3: rgba(229, 229, 229, 0.20);
--border-border-brand: #6a6fff;
--border-border-brand-sub: var(--border-border-brand);
--border-border-contrast: #ffffff;
--status-primary-default: #387bff;
--status-primary-hover: #4c88ff;
--status-primary-active: #1759dd;
--status-primary-surface-l1: rgba(53, 121, 255, 0.18);
--status-primary-surface-l2: rgba(53, 121, 255, 0.28);
--status-primary-surface-l3: rgba(53, 121, 255, 0.36);
--status-success-default: #33c192;
--status-success-hover: #5ed4ad;
--status-success-active: #27b082;
--status-success-surface-l1: rgba(0, 165, 110, 0.18);
--status-success-surface-l2: rgba(0, 165, 110, 0.28);
--status-success-surface-l3: rgba(0, 165, 110, 0.36);
--status-alert-default: #d29d00;
--status-alert-hover: #dfb949;
--status-alert-active: #ab8820;
--status-alert-surface-l1: rgba(210, 157, 0, 0.16);
--status-alert-surface-l2: rgba(210, 157, 0, 0.28);
--status-alert-surface-l3: rgba(210, 157, 0, 0.36);
--status-warning-default: #d27e24;
--status-warning-hover: #d78b28;
--status-warning-active: #b46510;
--status-warning-surface-l1: rgba(210, 126, 36, 0.16);
--status-warning-surface-l2: rgba(210, 126, 36, 0.28);
--status-warning-surface-l3: rgba(210, 126, 36, 0.36);
--status-error-default: #f65a5a;
--status-error-hover: #f86262;
--status-error-active: #b33636;
--status-error-surface-l1: rgba(246, 70, 70, 0.18);
--status-error-surface-l2: rgba(246, 70, 70, 0.28);
--status-error-surface-l3: rgba(246, 70, 70, 0.36);
--accent-accent-teal: #2dd288;
--accent-accent-coral: #ff9392;
--accent-accent-amber: #dcb364;
--accent-accent-lime: #8acb3a;
--accent-accent-cyan: #04cbe5;
--accent-accent-blue: #7bb8ff;
--accent-accent-magenta: #ec93ff;
--accent-accent-violet: #bfa5ff;
--accent-accent-slate: #afb9cf;
--code-code-text: #e0e3ee;
--code-code-doc: #7f838c;
--code-code-link: #3c7eff;
--code-code-number: #f48cca;
--code-code-action: #b38cff;
--code-code-instruction: #f0d8ff;
--code-code-function: #f29d79;
--code-code-constant: #80bbff;
--code-code-parameter: #82d99f;
--code-code-attribute: #ded47e;
--code-code-tag: #f2858c;
--code-code-terminal: #e0e3ee;
--code-code-contrast: #e0e3ee;
--code-code-editor: #e0e3ee;
--special-white: #ffffff;
--special-black: #000000;
--viz-viz-series-amber: #edaa45;
--viz-viz-series-coral: #f87454;
--viz-viz-series-indigo: #b6a3ff;
--viz-viz-series-lime: #a6ea39;
--viz-viz-series-magenta: #fb9dd7;
--viz-viz-series-mint: #1dc981;
--viz-viz-series-sky: #22a5f7;
--viz-viz-series-slate: #859ead;
--viz-viz-series-teal: #78f2f2;
--viz-viz-series-violet: #b655fc;
--viz-viz-ui-bg-chart: #171717;
--viz-viz-ui-bg-tooltip: #0a0a0a;
--viz-viz-ui-chart-axis: rgba(229, 229, 229, 0.16);
--viz-viz-ui-chart-subtitle: #737373;
--viz-viz-ui-chart-tick: #737373;
--viz-viz-ui-chart-title: #e5e5e5;
--viz-viz-ui-legend-label: #737373;
--viz-viz-ui-legend-value: #e5e5e5;
--brand-blue-100: #e5f3ff;
--brand-blue-200: #cce6ff;
--brand-blue-300: #b2daff;
--brand-blue-400: #99ceff;
--brand-blue-500: #80c1ff;
--brand-blue-600: #64b4ff;
--brand-blue-700: #3792e6;
--brand-blue-800: #1071cb;
--brand-blue-900: #054c8f;
--brand-blue-1000: #00284d;
--brand-blue-grey-100: #f1eff4;
--brand-blue-grey-200: #e0e1e6;
--brand-blue-grey-300: #cfd3d8;
--brand-blue-grey-400: #bfc5ca;
--brand-blue-grey-500: #b0b5ba;
--brand-blue-grey-600: #a0a6ab;
--brand-blue-grey-700: #80898e;
--brand-blue-grey-800: #5e696e;
--brand-blue-grey-900: #404a4f;
--brand-blue-grey-1000: #21262b;
--brand-green-grey-100: #f1f4f4;
--brand-green-grey-200: #e0e6e6;
--brand-green-grey-300: #cfd8d8;
--brand-green-grey-400: #bfcaca;
--brand-green-grey-500: #b0baba;
--brand-green-grey-600: #a0abab;
--brand-green-grey-700: #808e8e;
--brand-green-grey-800: #5e6e6e;
--brand-green-grey-900: #404f4f;
--brand-green-grey-1000: #212b2b;
--brand-purple-100: #e8e5ff;
--brand-purple-200: #d2ccff;
--brand-purple-300: #bbb2ff;
--brand-purple-400: #a599ff;
--brand-purple-500: #8e80ff;
--brand-purple-600: #7864ff;
--brand-purple-700: #4c37e6;
--brand-purple-800: #2610cb;
--brand-purple-900: #15058f;
--brand-purple-1000: #09004d;
--brand-red-100: #ffe5e5;
--brand-red-200: #ffcccc;
--brand-red-300: #ffb2b2;
--brand-red-400: #ff9999;
--brand-red-500: #ff8080;
--brand-red-600: #ff6464;
--brand-red-700: #e63737;
--brand-red-800: #cb1010;
--brand-red-900: #8f0505;
--brand-red-1000: #4d0000;
--brand-yellow-100: #fff6e5;
--brand-yellow-200: #ffeccc;
--brand-yellow-300: #ffe3b2;
--brand-yellow-400: #ffda99;
--brand-yellow-500: #ffd080;
--brand-yellow-600: #ffc864;
--brand-yellow-700: #e6a637;
--brand-yellow-800: #cb8710;
--brand-yellow-900: #8f5c05;
--brand-yellow-1000: #4d3000;
--brand-blue-grey-100: #f1eff4;
--brand-blue-grey-200: #e0e1e6;
--brand-blue-grey-300: #cfd3d8;
--brand-blue-grey-400: #bfc5ca;
--brand-blue-grey-500: #b0b5ba;
--brand-blue-grey-600: #a0a6ab;
--brand-blue-grey-700: #80898e;
--brand-blue-grey-800: #5e696e;
--brand-blue-grey-900: #404a4f;
--brand-blue-grey-1000: #21262b;
--brand-green-grey-100: #f1f4f4;
--brand-green-grey-200: #e0e6e6;
--brand-green-grey-300: #cfd8d8;
--brand-green-grey-400: #bfcaca;
--brand-green-grey-500: #b0baba;
--brand-green-grey-600: #a0abab;
--brand-green-grey-700: #808e8e;
--brand-green-grey-800: #5e6e6e;
--brand-green-grey-900: #404f4f;
--brand-green-grey-1000: #212b2b;
--brand-neutral-grey-100: #f2f2f2;
--brand-neutral-grey-200: #e3e3e3;
--brand-neutral-grey-300: #d6d6d6;
--brand-neutral-grey-400: #c7c7c7;
--brand-neutral-grey-500: #bababa;
--brand-neutral-grey-600: #ababab;
--brand-neutral-grey-700: #8a8a8a;
--brand-neutral-grey-800: #686868;
--brand-neutral-grey-900: #474747;
--brand-neutral-grey-1000: #262626;
--brand-brand-50: #f2f7ff;
--brand-brand-100: #e5eaff;
--brand-brand-200: #cfd8ff;
--brand-brand-300: #aab7ff;
--brand-brand-400: #8894ff;
--brand-brand-500: #6a6fff;
--brand-brand-600: #4b3fe3;
--brand-brand-700: #3f31c6;
--brand-brand-800: #2c2290;
--brand-brand-900: #1a1759;
--brand-brand-950: #010109;
--brand-brand-grey-50: #fafafa;
--brand-brand-grey-100: #f5f5f5;
--brand-brand-grey-200: #e5e5e5;
--brand-brand-grey-300: #d4d4d4;
--brand-brand-grey-400: #a1a1a1;
--brand-brand-grey-500: #737373;
--brand-brand-grey-600: #525252;
--brand-brand-grey-700: #404040;
--brand-brand-grey-800: #262626;
--brand-brand-grey-900: #171717;
--brand-brand-grey-950: #0a0a0a;
--brand-brand-grey-50: #fafafa;
--brand-brand-grey-100: #f5f5f5;
--brand-brand-grey-200: #e5e5e5;
--brand-brand-grey-300: #d4d4d4;
--brand-brand-grey-400: #a1a1a1;
--brand-brand-grey-500: #737373;
--brand-brand-grey-600: #525252;
--brand-brand-grey-700: #404040;
--brand-brand-grey-800: #262626;
--brand-brand-grey-900: #171717;
--brand-brand-grey-950: #0a0a0a;
--body-body-xs: 10px/1.5 var(--font-family-default);
--body-body-sm: 11px/1.5 var(--font-family-default);
--body-body-sm-strong: 600 11px/1.5 var(--font-family-default);
--body-body-md: 12px/1.5 var(--font-family-default);
--body-body-md-strong: 600 12px/1.5 var(--font-family-default);
--body-body-base: 14px/1.5 var(--font-family-default);
--body-body-base-strong: 600 14px/1.5 var(--font-family-default);
--heading-heading-3xs: 600 10px/1.4 var(--font-family-heading);
--heading-heading-2xs: 600 11px/1.4 var(--font-family-heading);
--heading-heading-xs: 600 12px/1.4 var(--font-family-heading);
--heading-heading-sm: 600 13px/1.4 var(--font-family-heading);
--heading-heading-md: 600 14px/1.4 var(--font-family-heading);
--heading-heading-lg: 600 16px/1.4 var(--font-family-heading);
--heading-heading-xl: 600 20px/1.4 var(--font-family-heading);
--heading-heading-2xl: 600 24px/1.4 var(--font-family-heading);
--heading-heading-3xl: 600 32px/1.4 var(--font-family-heading);
--bg-bg-overlay-l0: rgba(176, 192, 244, 0.03);
--bg-primary-item: rgba(176, 192, 244, 0.09);
--bg-primary-item-hover: rgba(176, 192, 244, 0.13);
--border-primary-item: rgba(176, 192, 244, 0.06);
--border-primary-item-hover: rgba(176, 192, 244, 0.1);
/* 首页输入框边框颜色(纯色,用于内凹圆弧等需要精确边框的场景) */
--homepage-input-border-color: #343538;
--user-message-bg-solid: #1D352A;
--user-message-bg-solid-transparent: rgba(29, 53, 42, 0);
--user-message-bg-solid-sub: #2B2A38;
--user-message-bg-solid-sub-transparent: rgba(43, 42, 56, 0);
--sheet-text-color: #ffffff;
--slash-mention-bg: rgba(63, 133, 255, 0.15);
--builtin-slash-mention-bg: rgba(149, 112, 255, 0.15);
--gradient-golden: linear-gradient(180deg, #DAB444 0%, #FFEA8E 100%);
--special-bggoldoverlay: rgba(139, 128, 65, 0.12);
--query-tag-bg-grey: rgba(116, 126, 148, 0.18);
--bg-bg-brand-old: #32f08c;
--gradient-brand: linear-gradient(90deg, #3ee1a3 0%, #32f08c 36%, #60f2bd 71.63%, #a0fde7 100%);
}
</style><style data-trae-edit-ui="true" id="trae-previewer-tools-styles">:root,
[data-trae-theme='dark'] {
--trae-bg-base-default: #171717;
--trae-bg-menu: #222427;
--trae-bg-overlay-l1: rgba(255, 255, 255, 0.04);
--trae-bg-overlay-l2: rgba(255, 255, 255, 0.08);
--trae-bg-overlay-l3: rgba(255, 255, 255, 0.12);
--trae-bg-overlay-l4: rgba(255, 255, 255, 0.16);
--trae-bg-invert: #f5f9fe;
--trae-bg-invert-hover: #e8ecf0;
--trae-bg-invert-active: #dce0e4;
--trae-bg-invert-disabled: rgba(224, 226, 242, 0.12);
--trae-border-l1: #e0e2f217;
--trae-border-l2: rgba(255, 255, 255, 0.12);
--trae-border-l3: rgba(255, 255, 255, 0.08);
--trae-border-neutral-l3: rgba(229, 229, 229, 0.20);
--trae-border-brand: #6a6fff;
--trae-text-default: #f5f9fe;
--trae-text-default-hover: #f5f9fe;
--trae-text-default-active: #f5f9fe;
--trae-text-secondary: rgba(245, 249, 254, 0.5);
--trae-text-tertiary: rgba(245, 249, 254, 0.4);
--trae-text-disabled: #666b75;
--trae-text-onaccent: #222427;
--trae-icon-default: #f5f9fe;
--trae-icon-secondary: rgba(245, 249, 254, 0.5);
--trae-icon-brand: #6a6fff;
--trae-icon-onaccent: #222427;
--trae-status-success: #22c55e;
--trae-status-primary: #3b82f6;
--trae-status-primary-default: #387bff;
--trae-status-primary-surface-l1: rgba(53, 121, 255, 0.18);
--trae-status-success-default: #33c192;
--trae-status-success-surface-l1: rgba(0, 165, 110, 0.18);
--trae-status-error-default: #f65a5a;
--trae-status-error-surface-l1: rgba(246, 70, 70, 0.18);
--trae-annotation-marker-bg: #4b3fe3;
--trae-annotation-marker-text: #ffffff;
--trae-annotation-region-border: var(--trae-status-primary-default);
--trae-annotation-rect-border: var(--trae-status-error-default);
--trae-annotation-arrow-anchor-bg: var(--trae-status-primary-default);
--trae-panel-shadow: 0px 6px 24px -1px rgba(0, 0, 0, 0.16);
--trae-floating-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
--trae-shadow-elevation-50: 0 1px 2px -1px rgba(0, 0, 0, 0.45);
--trae-tab-active-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.16);
}
[data-trae-theme='light'] {
--trae-bg-base-default: #fafafa;
--trae-bg-menu: #ffffff;
--trae-bg-overlay-l1: rgba(0, 0, 0, 0.04);
--trae-bg-overlay-l2: rgba(0, 0, 0, 0.06);
--trae-bg-overlay-l3: rgba(0, 0, 0, 0.08);
--trae-bg-overlay-l4: rgba(0, 0, 0, 0.12);
--trae-bg-invert: #1f2328;
--trae-bg-invert-hover: #32383f;
--trae-bg-invert-active: #444d56;
--trae-bg-invert-disabled: rgba(115, 115, 115, 0.20);
--trae-border-l1: rgba(0, 0, 0, 0.1);
--trae-border-l2: rgba(0, 0, 0, 0.12);
--trae-border-l3: rgba(0, 0, 0, 0.08);
--trae-border-neutral-l3: rgba(115, 115, 115, 0.36);
--trae-border-brand: #4b3fe3;
--trae-text-default: #1f2328;
--trae-text-default-hover: #111214;
--trae-text-default-active: #111214;
--trae-text-secondary: rgba(31, 35, 40, 0.5);
--trae-text-tertiary: rgba(31, 35, 40, 0.4);
--trae-text-disabled: #a1a1a1;
--trae-text-onaccent: #ffffff;
--trae-icon-default: #1f2328;
--trae-icon-secondary: rgba(31, 35, 40, 0.5);
--trae-icon-brand: #4b3fe3;
--trae-icon-onaccent: #ffffff;
--trae-status-success: #22c55e;
--trae-status-primary: #3b82f6;
--trae-status-primary-default: #2f74ff;
--trae-status-primary-surface-l1: rgba(47, 116, 255, 0.12);
--trae-status-success-default: #15a877;
--trae-status-success-surface-l1: rgba(64, 176, 139, 0.12);
--trae-status-error-default: #e8463a;
--trae-status-error-surface-l1: rgba(232, 70, 58, 0.12);
--trae-annotation-marker-bg: #4b3fe3;
--trae-annotation-marker-text: #ffffff;
--trae-annotation-region-border: var(--trae-status-primary-default);
--trae-annotation-rect-border: var(--trae-status-error-default);
--trae-annotation-arrow-anchor-bg: var(--trae-status-primary-default);
--trae-panel-shadow: 0px 6px 24px -1px rgba(24, 24, 24, 0.06);
--trae-floating-shadow: 0px 2px 8px 0px rgba(24, 24, 24, 0.2);
--trae-shadow-elevation-50: 0 1px 2px -1px rgba(24, 24, 24, 0.08);
--trae-tab-active-shadow: 0px 1px 2px -1px rgba(24, 24, 24, 0.08);
}
@keyframes trae-spin {
to {
transform: rotate(360deg);
}
}
.trae-edit-mode-active body *:not([data-trae-edit-ui]):not([data-trae-edit-ui] *) {
transition: none !important;
animation-play-state: paused !important;
}
.trae-browser-inspect-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS,无法访问 :root 变量 */
z-index: 1400; /* z-layer: fullscreen (1400) */
pointer-events: auto;
background: transparent;
}
.trae-browser-inspect-highlight-box {
position: absolute;
top: 0;
left: 0;
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS,无法访问 :root 变量 */
z-index: 1401; /* above overlay */
display: none;
}
.trae-browser-inspect-highlight-tag {
position: absolute;
left: 0px;
top: 0px;
height: 18px;
padding: 0 6px;
box-sizing: border-box;
border-radius: 4px;
background-color: var(--trae-status-success-default);
color: var(--trae-text-onaccent);
font-size: 12px;
font-weight: 400;
display: none;
align-items: center;
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS,无法访问 :root 变量 */
z-index: 1402; /* above highlight-box */
}
.trae-browser-inspect-highlight-box-show {
display: flex;
}
.trae-browser-inspect-highlight-tag.trae-browser-inspect-highlight-box-show {
display: none;
}
.trae-browser-inspect-select-button.trae-browser-inspect-highlight-box-show {
display: block !important;
}
.trae-browser-inspect-select-button {
position: absolute;
top: 0;
left: 0;
display: none;
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS,无法访问 :root 变量 */
z-index: 1402; /* above overlay, must receive pointer events */
}
.trae-browser-inspect-select-highlight-box {
background: transparent !important;
}
.trae-browser-inspect-select-highlight-box .trae-browser-inspect-highlight-tag {
background-color: var(--trae-status-success-default);
}
.trae-add-to-chat-card {
display: block;
overflow: hidden;
background: var(--trae-bg-menu);
border: 1px solid var(--trae-border-l1);
border-radius: 8px;
box-shadow: var(--trae-floating-shadow);
transition:
width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.trae-add-to-chat-content {
position: relative;
width: max-content;
}
.trae-fade-exit {
opacity: 0;
transition: opacity 0.15s ease-out;
}
.trae-fade-enter {
opacity: 1;
transition: opacity 0.2s ease-in;
}
.trae-buttons-view {
display: flex;
align-items: center;
gap: 0;
padding: 4px;
background: transparent;
}
.trae-action-button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
transform: none !important;
transition: none !important;
animation: none !important;
}
.trae-action-button:hover {
background: var(--trae-bg-overlay-l2);
}
.trae-action-button:active {
background: var(--trae-bg-overlay-l3);
}
.trae-action-button:focus-visible {
outline: 2px solid var(--trae-status-primary);
outline-offset: 1px;
}
.trae-action-button-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--trae-icon-default);
flex-shrink: 0;
}
.trae-action-button-title {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 16px;
color: var(--trae-text-default);
white-space: nowrap;
}
.trae-edit-toolbar-button-active {
background: var(--trae-status-primary-surface-l1) !important;
color: var(--trae-status-primary-default) !important;
}
.trae-edit-toolbar button[data-action='alignment-dropdown']:hover,
.trae-edit-toolbar button[data-action='text-align-dropdown']:hover,
.trae-edit-toolbar button[data-action='font-decrease']:hover,
.trae-edit-toolbar button[data-action='font-increase']:hover,
.trae-edit-toolbar button[data-action^='align-']:hover {
border-radius: 8px;
background: var(--bg-bg-overlay-l1, rgba(115, 115, 115, 0.08)) !important;
}
.trae-edit-toolbar button[data-action='alignment-dropdown']:active,
.trae-edit-toolbar button[data-action='text-align-dropdown']:active,
.trae-edit-toolbar button[data-action='font-decrease']:active,
.trae-edit-toolbar button[data-action='font-increase']:active,
.trae-edit-toolbar button[data-action^='align-']:active {
border-radius: 8px;
background: var(--bg-bg-overlay-l2, rgba(115, 115, 115, 0.12)) !important;
}
.trae-comment-input {
background: transparent;
color: var(--trae-text-default);
caret-color: var(--trae-text-default);
}
.trae-comment-input::placeholder {
color: var(--trae-text-tertiary);
}
.trae-edit-panel [data-trae-tooltip] {
position: relative;
}
.trae-edit-panel [data-trae-tooltip]::after {
content: attr(data-trae-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
z-index: var(--z-max, 9999);
padding: 6px 10px;
border-radius: 6px;
background: var(--bg-bg-invert, var(--trae-bg-invert));
color: var(--text-text-onaccent, var(--trae-text-onaccent));
box-shadow: var(--trae-floating-shadow);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 16px;
letter-spacing: 0.039px;
white-space: nowrap;
pointer-events: none;
box-sizing: border-box;
opacity: 0;
transform: translateX(-50%);
visibility: hidden;
}
.trae-edit-panel [data-trae-tooltip]::before {
content: '';
position: absolute;
left: 50%;
bottom: calc(100% + 5px);
z-index: var(--z-max, 9999);
width: 8px;
height: 4px;
background: var(--bg-bg-invert, var(--trae-bg-invert));
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform: translateX(-50%);
pointer-events: none;
opacity: 0;
visibility: hidden;
}
.trae-edit-panel [data-trae-tooltip]:hover::after,
.trae-edit-panel [data-trae-tooltip]:focus-visible::after,
.trae-edit-panel [data-trae-tooltip]:hover::before,
.trae-edit-panel [data-trae-tooltip]:focus-visible::before {
opacity: 1;
visibility: visible;
}
.trae-comment-btn {
justify-content: center;
cursor: pointer;
transition: background-color 0.15s ease;
}
.trae-comment-btn:disabled {
cursor: not-allowed;
}
.trae-comment-btn:focus-visible {
outline: 2px solid var(--trae-status-primary);
outline-offset: 1px;
}
.trae-comment-btn-primary {
background: var(--trae-bg-invert);
color: var(--trae-text-onaccent);
}
.trae-comment-btn-primary:hover:not(:disabled) {
background: var(--trae-bg-invert-hover);
}
.trae-comment-btn-primary:active:not(:disabled) {
background: var(--trae-bg-invert-active);
}
.trae-comment-btn-primary:disabled {
background: var(--trae-bg-invert-disabled);
color: var(--trae-text-disabled);
}
.trae-comment-btn-secondary {
background: var(--trae-bg-overlay-l2);
color: var(--trae-text-default);
}
.trae-comment-btn-secondary:hover:not(:disabled) {
background: var(--trae-bg-overlay-l3);
}
.trae-comment-btn-secondary:active:not(:disabled) {
background: var(--trae-bg-overlay-l4);
}
.trae-comment-btn-secondary:disabled {
background: var(--trae-bg-overlay-l2);
color: var(--trae-text-disabled);
}
.trae-comment-btn-text {
background: transparent;
color: var(--trae-text-default);
}
.trae-comment-btn-text:hover:not(:disabled) {
border-radius: 8px;
background: var(--bg-bg-overlay-l1, var(--trae-bg-overlay-l1));
color: var(--trae-text-default-hover);
}
.trae-comment-btn-text:active:not(:disabled) {
border-radius: 8px;
background: var(--trae-bg-overlay-l2);
color: var(--trae-text-default-active);
}
.trae-comment-btn-text:disabled {
background: transparent;
color: var(--trae-text-disabled);
}
.trae-marking-btn {
justify-content: center;
}
.trae-marking-btn:hover:not(:disabled) {
background: var(--trae-bg-overlay-l1) !important;
}
.trae-marking-btn:active:not(:disabled) {
background: var(--trae-bg-overlay-l2) !important;
}
.trae-marking-btn-active {
background: var(--trae-status-primary-surface-l1) !important;
color: var(--trae-status-primary-default) !important;
}
.trae-marking-btn:disabled {
color: var(--trae-text-disabled) !important;
cursor: not-allowed !important;
}
.trae-action-button-shortcut {
display: flex;
align-items: center;
gap: 2px;
color: var(--trae-icon-secondary);
flex-shrink: 0;
}
.trae-shortcut-container {
display: flex;
align-items: center;
gap: 2px;
}
.trae-shortcut-key {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 12px;
color: var(--trae-icon-secondary);
}
.trae-add-to-chat-divider {
width: 2px;
height: 12px;
padding: 0 6px;
box-sizing: content-box;
background-clip: content-box;
background-color: var(--trae-border-l2);
flex-shrink: 0;
}
.trae-editor-view {
display: flex;
flex-direction: column;
width: 320px;
padding: 8px;
background: transparent;
}
.trae-editor-text-container {
display: flex;
align-items: center;
padding: 8px;
background: var(--trae-bg-overlay-l1);
border: 1px solid var(--trae-border-l3);
border-radius: 4px;
gap: 8px;
}
.trae-editor-textarea {
flex: 1;
padding: 0 2px;
border: none;
background: transparent;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 20px;
color: var(--trae-text-default);
resize: none;
outline: none;
overflow-y: auto;
max-height: 140px;
}
.trae-editor-textarea::placeholder {
color: var(--trae-text-tertiary);
}
.trae-editor-action-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
max-height: 0;
opacity: 0;
overflow: hidden;
transition:
max-height 0.2s ease-out,
opacity 0.2s ease-out,
margin-top 0.2s ease-out;
}
.trae-editor-action-bar-visible {
max-height: 32px;
opacity: 1;
margin-top: 8px;
}
.trae-editor-cancel-button {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
padding: 0 4px;
background: var(--trae-bg-overlay-l2);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.trae-editor-cancel-button:hover {
background: var(--trae-bg-overlay-l3);
}
.trae-editor-cancel-button:active {
background: var(--trae-bg-overlay-l3);
}
.trae-editor-cancel-button:focus-visible {
outline: 2px solid var(--trae-status-primary);
outline-offset: 1px;
}
.trae-editor-cancel-text {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 16px;
color: var(--trae-text-default);
white-space: nowrap;
padding: 0 4px;
}
.trae-editor-submit-button {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
padding: 0 8px;
background: var(--trae-bg-invert);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.trae-editor-submit-button:hover {
background: var(--trae-bg-invert-hover);
}
.trae-editor-submit-button:active {
background: var(--trae-bg-invert-active);
}
.trae-editor-submit-button:focus-visible {
outline: 2px solid var(--trae-status-primary);
outline-offset: 1px;
}
.trae-editor-submit-text {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 16px;
color: var(--trae-text-onaccent);
white-space: nowrap;
padding: 0 4px;
}
.trae-editor-submit-icon {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
color: var(--trae-icon-onaccent);
flex-shrink: 0;
}
.trae-success-view {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 12px;
height: 32px;
white-space: nowrap;
}
.trae-success-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--trae-status-success);
flex-shrink: 0;
}
.trae-success-text {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 18px;
color: var(--trae-text-default);
user-select: none;
}
</style></head>
<body>
<h1>物理万花筒</h1>
<div id="controls">
<div class="control-group">
<label for="pieceCount">碎片数量</label>
<input id="pieceCount" type="range" min="30" max="260" value="120">
<span class="value-display" id="pieceCountVal">120</span>
</div>
<div class="control-group">
<label for="segments">棱镜份数</label>
<input id="segments" type="range" min="3" max="12" value="6">
<span class="value-display" id="segmentsVal">6</span>
</div>
<div class="control-group">
<label for="aperture">桶宽孔径</label>
<input id="aperture" type="range" min="0.40" max="1.00" step="0.02" value="1.00">
<span class="value-display" id="apertureVal">1.00</span>
</div>
<div class="control-group">
<label for="minScale">最小倍率</label>
<input id="minScale" type="range" min="0.2" max="1.2" step="0.05" value="0.50">
<span class="value-display" id="minScaleVal">0.50</span>
</div>
<div class="control-group">
<label for="maxScale">最大倍率</label>
<input id="maxScale" type="range" min="1.0" max="4.0" step="0.05" value="3.00">
<span class="value-display" id="maxScaleVal">3.00</span>
</div>
<div class="control-group">
<label for="gravity">重力强度</label>
<input id="gravity" type="range" min="0" max="0.30" step="0.01" value="0.07">
<span class="value-display" id="gravityVal">0.07</span>
</div>
<div class="control-group">
<label for="friction">静摩擦</label>
<input id="friction" type="range" min="0.02" max="0.20" step="0.01" value="0.11">
<span class="value-display" id="frictionVal">0.11</span>
</div>
<label class="checkbox-group">
<input id="enableGravity" type="checkbox">
<span>启用重力</span>
</label>
<label class="checkbox-group">
<input id="autoRotate" type="checkbox" checked="">
<span>自动微转</span>
</label>
<label class="checkbox-group">
<input id="soundEnabled" type="checkbox" checked="">
<span>音效</span>
</label>
<button id="applyBtn">应用设置</button>
<button id="shakeBtn">手动摇晃万花筒</button>
</div>
<div id="errorMsg" class="error"></div>
<div id="presets">
<span class="preset-label">预设:</span>
<button data-preset="default">默认</button>
<button data-preset="dense">密集</button>
<button data-preset="large">大碎片</button>
<button data-preset="gravity">高重力</button>
<button id="savePresetBtn">保存当前</button>
</div>
<div id="canvas-wrapper" style="width: 374px; height: 374px;">
<canvas id="kaleidoscope" width="374" height="374"></canvas>
</div>
<div id="hint">按住鼠标拖动旋转镜筒|双击画面摇晃万花筒</div>
<script>
/* ===================== 工具函数 ===================== */
const rand = (min, max) => Math.random() * (max - min) + min;
const randInt = (min, max) => Math.floor(rand(min, max + 1));
const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
/* ===================== 配置与状态 ===================== */
const canvas = document.getElementById('kaleidoscope');
const ctx = canvas.getContext('2d');
const wrapper = document.getElementById('canvas-wrapper');
const errorMsg = document.getElementById('errorMsg');
// 万花筒整体参数
let config = {
pieceCount: 120,
segments: 6,
aperture: 1.0,
minScale: 0.5,
maxScale: 3.0,
gravity: 0.07,
friction: 0.11,
enableGravity: false,
autoRotate: true,
soundEnabled: true
};
let pieces = [];
let overallRotation = 0; // 镜筒整体旋转角度(弧度)
let isDragging = false;
let lastDragAngle = 0;
let canvasSize = 0;
let boundaryRadius = 0;
// 触摸双击判定
let lastTouchTime = 0;
let lastTouchX = 0;
let lastTouchY = 0;
// 背景噪点纹理画布
let noiseCanvas = document.createElement('canvas');
// Web Audio 上下文
let audioCtx = null;
// 复古彩色色池
const palette = [
'#e74c3c', '#c0392b', '#e67e22', '#d35400',
'#f1c40f', '#f39c12', '#2ecc71', '#27ae60',
'#1abc9c', '#16a085', '#3498db', '#2980b9',
'#9b59b6', '#8e44ad', '#e84393', '#fd79a8',
'#a29bfe', '#74b9ff', '#55efc4', '#ffeaa7',
'#fab1a0', '#ff7675', '#d63031', '#00b894'
];
// 默认预设
const defaultPresets = {
default: { pieceCount: 120, segments: 6, aperture: 1.00, minScale: 0.50, maxScale: 3.00, gravity: 0.07, friction: 0.11, enableGravity: false, autoRotate: true, soundEnabled: true },
dense: { pieceCount: 220, segments: 8, aperture: 0.92, minScale: 0.30, maxScale: 2.00, gravity: 0.05, friction: 0.12, enableGravity: true, autoRotate: true, soundEnabled: true },
large: { pieceCount: 60, segments: 4, aperture: 1.00, minScale: 1.20, maxScale: 4.00, gravity: 0.10, friction: 0.08, enableGravity: true, autoRotate: true, soundEnabled: true },
gravity: { pieceCount: 140, segments: 6, aperture: 1.00, minScale: 0.50, maxScale: 3.00, gravity: 0.25, friction: 0.05, enableGravity: true, autoRotate: true, soundEnabled: true }
};
// 从 localStorage 读取预设,没有则使用默认
let presets = loadPresets();
function loadPresets() {
try {
const saved = localStorage.getItem('kaleidoscope_presets');
return saved ? JSON.parse(saved) : { ...defaultPresets };
} catch (e) {
return { ...defaultPresets };
}
}
function savePresetsToStorage() {
try {
localStorage.setItem('kaleidoscope_presets', JSON.stringify(presets));
} catch (e) {
// 忽略存储失败
}
}
/* ===================== 碎片类 ===================== */
class Piece {
constructor() {
// 在圆形边界内随机分布,偏向中心但避免全部挤在中间
const angle = rand(0, Math.PI * 2);
const r = Math.sqrt(rand(0, 1)) * boundaryRadius * 0.92;
this.x = Math.cos(angle) * r;
this.y = Math.sin(angle) * r;
this.rotation = rand(0, Math.PI * 2);
this.rotVel = rand(-0.02, 0.02);
this.sizeScale = rand(config.minScale, config.maxScale);
this.mass = this.sizeScale; // 质量等于尺寸倍率
// 碰撞用近似包围圆半径(覆盖最大多角形伸展)
this.approxRadius = this.sizeScale * (canvasSize / 60) * 1.3;
this.vx = 0;
this.vy = 0;
this.color = palette[randInt(0, palette.length - 1)];
this.alpha = rand(0.62, 0.94);
this.sleeping = false;
// 形状类型与生成路径
this.typeRoll = Math.random();
this.shape = this.generateShape();
}
generateShape() {
const s = this.sizeScale * (canvasSize / 60); // 基础尺寸参照画布大小
const shape = { type: '', points: [], radius: s, aspect: 1, cornerRadius: 0 };
if (this.typeRoll < 0.50) {
// 50% 不规则多角碎片
shape.type = 'poly';
const sides = randInt(3, 7);
for (let i = 0; i < sides; i++) {
const baseAngle = (i / sides) * Math.PI * 2;
const angleNoise = rand(-0.25, 0.25);
const rNoise = rand(0.7, 1.3);
shape.points.push({
angle: baseAngle + angleNoise,
r: s * rNoise
});
}
} else if (this.typeRoll < 0.75) {
// 25% 椭圆 / 扁片(云母薄片)
shape.type = 'ellipse';
shape.radiusX = s * rand(1.1, 1.6);
shape.radiusY = s * rand(0.25, 0.55);
shape.rotation = rand(0, Math.PI * 2);
} else if (this.typeRoll < 0.85) {
// 10% 近圆轻微变形
shape.type = 'nearCircle';
shape.points = [];
for (let i = 0; i < 8; i++) {
const a = (i / 8) * Math.PI * 2;
shape.points.push({
angle: a,
r: s * rand(0.85, 1.15)
});
}
} else if (this.typeRoll < 0.95) {
// 10% 水滴 / 三角 / 梯形混合
shape.type = 'mixedDrop';
const sub = Math.random();
if (sub < 0.45) {
shape.subtype = 'drop';
shape.radius = s;
} else if (sub < 0.75) {
shape.subtype = 'triangle';
shape.radius = s * 1.2;
} else {
shape.subtype = 'trapezoid';
shape.radius = s;
}
} else {
// 5% 标准几何图形
shape.type = 'prim';
const prim = Math.random();
if (prim < 0.33) shape.subtype = 'equilateral';
else if (prim < 0.66) shape.subtype = 'circle';
else shape.subtype = 'square';
shape.radius = s;
}
return shape;
}
wake() {
this.sleeping = false;
}
}
/* ===================== 初始化与重置 ===================== */
function resizeCanvas() {
const maxSize = Math.min(window.innerWidth - 32, window.innerHeight - 280, 540);
canvas.width = maxSize;
canvas.height = maxSize;
canvasSize = maxSize;
boundaryRadius = (maxSize / 2) * config.aperture;
wrapper.style.width = maxSize + 'px';
wrapper.style.height = maxSize + 'px';
generateNoiseTexture();
}
function resetPieces() {
resizeCanvas();
pieces = [];
for (let i = 0; i < config.pieceCount; i++) {
pieces.push(new Piece());
}
// 初始时让碎片先做一次碰撞解析,避免大量重叠
for (let step = 0; step < 8; step++) {
resolveCollisions();
for (const p of pieces) {
const dist = Math.hypot(p.x, p.y);
if (dist > boundaryRadius - p.sizeScale * 2) {
const nx = p.x / dist;
const ny = p.y / dist;
const overlap = dist - (boundaryRadius - p.sizeScale * 2);
p.x -= nx * overlap;
p.y -= ny * overlap;
}
}
}
}
// 预生成噪点纹理,避免每帧随机生成大量点
function generateNoiseTexture() {
noiseCanvas.width = canvasSize;
noiseCanvas.height = canvasSize;
const nctx = noiseCanvas.getContext('2d');
nctx.clearRect(0, 0, canvasSize, canvasSize);
const count = Math.floor(canvasSize * canvasSize / 45);
for (let i = 0; i < count; i++) {
const x = rand(0, canvasSize);
const y = rand(0, canvasSize);
const r = rand(0.3, 1.3);
nctx.fillStyle = `rgba(255, 255, 255, ${rand(0.015, 0.07)})`;
nctx.beginPath();
nctx.arc(x, y, r, 0, Math.PI * 2);
nctx.fill();
}
}
/* ===================== 音效 ===================== */
function initAudio() {
if (!audioCtx) {
const AudioContext = window.AudioContext || window.webkitAudioContext;
if (AudioContext) audioCtx = new AudioContext();
}
if (audioCtx && audioCtx.state === 'suspended') {
audioCtx.resume();
}
}
function playShakeSound() {
if (!config.soundEnabled || !audioCtx) return;
if (audioCtx.state === 'suspended') audioCtx.resume();
const t = audioCtx.currentTime;
const count = clamp(Math.floor(pieces.length / 35), 3, 10);
for (let i = 0; i < count; i++) {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
const pan = audioCtx.createStereoPanner ? audioCtx.createStereoPanner() : null;
osc.type = Math.random() > 0.5 ? 'sine' : 'triangle';
osc.frequency.value = rand(900, 3200);
const delay = rand(0, 0.08);
const startT = t + delay;
const peak = rand(0.015, 0.045);
gain.gain.setValueAtTime(0, startT);
gain.gain.linearRampToValueAtTime(peak, startT + 0.005);
gain.gain.exponentialRampToValueAtTime(0.001, startT + 0.10);
osc.connect(gain);
if (pan) {
pan.pan.value = rand(-0.6, 0.6);
gain.connect(pan);
pan.connect(audioCtx.destination);
} else {
gain.connect(audioCtx.destination);
}
osc.start(startT);
osc.stop(startT + 0.12);
}
}
/* ===================== 物理更新 ===================== */
function updatePhysics() {
// 重力方向跟随镜筒整体旋转
const gx = config.enableGravity
? Math.sin(overallRotation) * config.gravity
: 0;
const gy = config.enableGravity
? Math.cos(overallRotation) * config.gravity
: 0;
for (const p of pieces) {
if (p.sleeping) continue;
// 静摩擦阈值:小碎片额外叠加更高静摩擦
const staticThreshold = config.friction * p.mass + Math.max(0, 0.08 - p.mass * 0.03);
const drive = Math.hypot(gx, gy);
const speed = Math.hypot(p.vx, p.vy);
// 休眠判定:速度 + 重力驱动力 小于 静摩擦阈值
if (speed + drive < staticThreshold && speed < 0.05) {
p.vx = 0;
p.vy = 0;
p.rotVel *= 0.5;
if (Math.abs(p.rotVel) < 0.001) {
p.rotVel = 0;
p.sleeping = true;
continue;
}
}
// 应用重力
p.vx += gx / p.mass;
p.vy += gy / p.mass;
// 动摩擦衰减
p.vx *= 0.985;
p.vy *= 0.985;
p.rotVel *= 0.99;
// 更新位置
p.x += p.vx;
p.y += p.vy;
p.rotation += p.rotVel;
// 圆形边界约束与反弹
const dist = Math.hypot(p.x, p.y);
if (dist > boundaryRadius - p.sizeScale * 2) {
const nx = p.x / dist;
const ny = p.y / dist;
const overlap = dist - (boundaryRadius - p.sizeScale * 2);
p.x -= nx * overlap;
p.y -= ny * overlap;
// 反弹:速度在法向分量反向并衰减
const vn = p.vx * nx + p.vy * ny;
p.vx -= 2 * vn * nx * 0.4;
p.vy -= 2 * vn * ny * 0.4;
p.wake();
}
}
resolveCollisions();
}
/* ===================== 碎片间碰撞(圆形近似) ===================== */
function resolveCollisions() {
const len = pieces.length;
for (let i = 0; i < len; i++) {
const a = pieces[i];
if (a.sleeping) continue;
for (let j = i + 1; j < len; j++) {
const b = pieces[j];
if (b.sleeping) continue;
const dx = b.x - a.x;
const dy = b.y - a.y;
const dist = Math.hypot(dx, dy);
const minDist = a.approxRadius + b.approxRadius;
if (dist < minDist && dist > 0.001) {
const nx = dx / dist;
const ny = dy / dist;
const overlap = minDist - dist;
const totalMass = a.mass + b.mass;
// 按质量比例分离,避免重叠
a.x -= nx * overlap * (b.mass / totalMass);
a.y -= ny * overlap * (b.mass / totalMass);
b.x += nx * overlap * (a.mass / totalMass);
b.y += ny * overlap * (a.mass / totalMass);
// 法向相对速度
const rvx = b.vx - a.vx;
const rvy = b.vy - a.vy;
const velAlongNormal = rvx * nx + rvy * ny;
if (velAlongNormal > 0) continue; // 已经在分离
// 弹性碰撞冲量
const restitution = 0.35;
const impulse = -(1 + restitution) * velAlongNormal / totalMass;
a.vx -= impulse * b.mass * nx;
a.vy -= impulse * b.mass * ny;
b.vx += impulse * a.mass * nx;
b.vy += impulse * a.mass * ny;
// 切向摩擦:轻微交换旋转
a.rotVel += rand(-0.005, 0.005);
b.rotVel += rand(-0.005, 0.005);
a.wake();
b.wake();
}
}
}
}
/* ===================== 摇晃 ===================== */
function shakeKaleidoscope() {
initAudio();
for (const p of pieces) {
p.vx += rand(-3, 3);
p.vy += rand(-3, 3);
p.rotVel += rand(-0.15, 0.15);
p.wake();
}
playShakeSound();
}
/* ===================== 绘制 ===================== */
function drawPiece(p, ctx) {
ctx.save();
ctx.translate(p.x, p.y);
ctx.rotate(p.rotation);
ctx.fillStyle = p.color;
ctx.globalAlpha = p.alpha;
const shape = p.shape;
ctx.beginPath();
if (shape.type === 'poly' || shape.type === 'nearCircle') {
const pts = shape.points;
for (let i = 0; i < pts.length; i++) {
const r = pts[i].r;
const a = pts[i].angle;
const x = Math.cos(a) * r;
const y = Math.sin(a) * r;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
} else if (shape.type === 'ellipse') {
ctx.ellipse(0, 0, shape.radiusX, shape.radiusY, shape.rotation, 0, Math.PI * 2);
} else if (shape.type === 'mixedDrop') {
const r = shape.radius;
if (shape.subtype === 'drop') {
ctx.moveTo(0, -r);
ctx.bezierCurveTo(r * 0.8, -r * 0.4, r * 0.8, r * 0.6, 0, r);
ctx.bezierCurveTo(-r * 0.8, r * 0.6, -r * 0.8, -r * 0.4, 0, -r);
} else if (shape.subtype === 'triangle') {
ctx.moveTo(0, -r);
ctx.lineTo(r * 0.9, r * 0.7);
ctx.lineTo(-r * 0.9, r * 0.7);
} else if (shape.subtype === 'trapezoid') {
ctx.moveTo(-r * 0.4, -r * 0.7);
ctx.lineTo(r * 0.4, -r * 0.7);
ctx.lineTo(r * 0.8, r * 0.7);
ctx.lineTo(-r * 0.8, r * 0.7);
}
ctx.closePath();
} else if (shape.type === 'prim') {
const r = shape.radius;
if (shape.subtype === 'equilateral') {
ctx.moveTo(0, -r);
ctx.lineTo(r * 0.866, r * 0.5);
ctx.lineTo(-r * 0.866, r * 0.5);
ctx.closePath();
} else if (shape.subtype === 'circle') {
ctx.arc(0, 0, r, 0, Math.PI * 2);
} else if (shape.subtype === 'square') {
ctx.rect(-r * 0.7, -r * 0.7, r * 1.4, r * 1.4);
}
}
ctx.fill();
ctx.restore();
}
// 绘制背景噪点与暗角(在中心坐标系中调用)
function drawBackgroundTexture(ctx) {
// 噪点纹理
ctx.save();
ctx.globalAlpha = 0.22;
ctx.drawImage(noiseCanvas, -canvasSize / 2, -canvasSize / 2);
ctx.restore();
// 径向暗角:中心亮、边缘暗
const vignette = ctx.createRadialGradient(
0, 0, boundaryRadius * 0.25,
0, 0, boundaryRadius
);
vignette.addColorStop(0, 'rgba(0, 0, 0, 0)');
vignette.addColorStop(0.6, 'rgba(0, 0, 0, 0.18)');
vignette.addColorStop(1, 'rgba(0, 0, 0, 0.55)');
ctx.fillStyle = vignette;
ctx.beginPath();
ctx.arc(0, 0, boundaryRadius, 0, Math.PI * 2);
ctx.fill();
}
// 绘制棱镜扇形边界高光
function drawPrismHighlights(ctx, segAngle) {
ctx.save();
ctx.strokeStyle = 'rgba(255, 255, 240, 0.14)';
ctx.lineWidth = 1.2;
ctx.shadowColor = 'rgba(255, 255, 220, 0.25)';
ctx.shadowBlur = 4;
for (let seg = 0; seg < config.segments; seg++) {
ctx.save();
ctx.rotate(seg * segAngle);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(boundaryRadius, 0);
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
function drawScene() {
const cx = canvas.width / 2;
const cy = canvas.height / 2;
// 清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 保存中心坐标系
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(overallRotation);
const segAngle = (Math.PI * 2) / config.segments;
// 先绘制背景噪点与暗角
drawBackgroundTexture(ctx);
// 每个扇区绘制全部碎片,奇数扇区镜像
for (let seg = 0; seg < config.segments; seg++) {
ctx.save();
ctx.rotate(seg * segAngle);
// 奇数扇区做 Y 轴翻转实现镜像反射
if (seg % 2 === 1) {
ctx.scale(1, -1);
}
for (const p of pieces) {
drawPiece(p, ctx);
}
ctx.restore();
}
// 棱镜边界高光
drawPrismHighlights(ctx, segAngle);
ctx.restore();
// 玻璃光晕叠层:screen 混合模式弱模糊
ctx.save();
ctx.globalCompositeOperation = 'screen';
ctx.globalAlpha = 0.12;
ctx.filter = 'blur(12px)';
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(cx, cy, boundaryRadius * 0.85, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
// 清除 filter 以免影响后续绘制
ctx.filter = 'none';
// 圆形视口遮罩:只保留中心圆
ctx.save();
ctx.globalCompositeOperation = 'destination-in';
ctx.beginPath();
ctx.arc(cx, cy, canvasSize / 2, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
/* ===================== 动画循环 ===================== */
function loop() {
// 自动微转:不拖拽时以极慢速度旋转镜筒
if (!isDragging && config.autoRotate) {
overallRotation += 0.0005;
}
updatePhysics();
drawScene();
requestAnimationFrame(loop);
}
/* ===================== UI 绑定 ===================== */
function bindSlider(id, displayId) {
const el = document.getElementById(id);
const disp = document.getElementById(displayId);
el.addEventListener('input', () => {
disp.textContent = el.value;
});
}
bindSlider('pieceCount', 'pieceCountVal');
bindSlider('segments', 'segmentsVal');
bindSlider('aperture', 'apertureVal');
bindSlider('minScale', 'minScaleVal');
bindSlider('maxScale', 'maxScaleVal');
bindSlider('gravity', 'gravityVal');
bindSlider('friction', 'frictionVal');
function syncUI() {
document.getElementById('pieceCount').value = config.pieceCount;
document.getElementById('pieceCountVal').textContent = config.pieceCount;
document.getElementById('segments').value = config.segments;
document.getElementById('segmentsVal').textContent = config.segments;
document.getElementById('aperture').value = config.aperture;
document.getElementById('apertureVal').textContent = config.aperture.toFixed(2);
document.getElementById('minScale').value = config.minScale;
document.getElementById('minScaleVal').textContent = config.minScale.toFixed(2);
document.getElementById('maxScale').value = config.maxScale;
document.getElementById('maxScaleVal').textContent = config.maxScale.toFixed(2);
document.getElementById('gravity').value = config.gravity;
document.getElementById('gravityVal').textContent = config.gravity.toFixed(2);
document.getElementById('friction').value = config.friction;
document.getElementById('frictionVal').textContent = config.friction.toFixed(2);
document.getElementById('enableGravity').checked = config.enableGravity;
document.getElementById('autoRotate').checked = config.autoRotate;
document.getElementById('soundEnabled').checked = config.soundEnabled;
}
function applySettings(resetRotation = true) {
const minScale = parseFloat(document.getElementById('minScale').value);
const maxScale = parseFloat(document.getElementById('maxScale').value);
if (minScale > maxScale) {
errorMsg.textContent = '错误:碎片最小倍率不能大于最大倍率';
return;
}
errorMsg.textContent = '';
config.pieceCount = parseInt(document.getElementById('pieceCount').value, 10);
config.segments = parseInt(document.getElementById('segments').value, 10);
config.aperture = parseFloat(document.getElementById('aperture').value);
config.minScale = minScale;
config.maxScale = maxScale;
config.gravity = parseFloat(document.getElementById('gravity').value);
config.friction = parseFloat(document.getElementById('friction').value);
config.enableGravity = document.getElementById('enableGravity').checked;
config.autoRotate = document.getElementById('autoRotate').checked;
config.soundEnabled = document.getElementById('soundEnabled').checked;
if (resetRotation) overallRotation = 0;
resetPieces();
}
document.getElementById('applyBtn').addEventListener('click', () => applySettings(true));
document.getElementById('shakeBtn').addEventListener('click', shakeKaleidoscope);
/* ===================== 预设管理 ===================== */
function applyPreset(name) {
if (!presets[name]) return;
config = { ...presets[name] };
syncUI();
applySettings(true);
}
function saveCurrentPreset() {
const name = prompt('给当前配置取个名字(英文/数字):', 'myPreset');
if (!name) return;
const key = name.trim().replace(/\s+/g, '_');
if (!key) return;
presets[key] = { ...config };
savePresetsToStorage();
addPresetButton(key, name);
}
function addPresetButton(key, label) {
const container = document.getElementById('presets');
// 避免重复添加
if (container.querySelector(`[data-preset="${key}"]`)) return;
const btn = document.createElement('button');
btn.dataset.preset = key;
btn.textContent = label;
btn.addEventListener('click', () => applyPreset(key));
container.insertBefore(btn, document.getElementById('savePresetBtn'));
}
document.querySelectorAll('#presets button[data-preset]').forEach(btn => {
btn.addEventListener('click', () => applyPreset(btn.dataset.preset));
});
document.getElementById('savePresetBtn').addEventListener('click', saveCurrentPreset);
// 加载时把本地保存的自定义预设也渲染成按钮
function renderCustomPresets() {
for (const key of Object.keys(presets)) {
if (defaultPresets[key]) continue; // 默认按钮已在 HTML 中
addPresetButton(key, key);
}
}
/* ===================== 鼠标交互 ===================== */
function getPointerPos(e) {
const rect = canvas.getBoundingClientRect();
let clientX, clientY;
if (e.touches && e.touches.length > 0) {
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
} else {
clientX = e.clientX;
clientY = e.clientY;
}
return {
x: clientX - rect.left - rect.width / 2,
y: clientY - rect.top - rect.height / 2
};
}
function startDrag(e) {
e.preventDefault();
initAudio();
isDragging = true;
const pos = getPointerPos(e);
lastDragAngle = Math.atan2(pos.y, pos.x);
// 拖动唤醒全部碎片
for (const p of pieces) p.wake();
}
function moveDrag(e) {
if (!isDragging) return;
e.preventDefault();
const pos = getPointerPos(e);
const angle = Math.atan2(pos.y, pos.x);
const delta = angle - lastDragAngle;
overallRotation += delta;
lastDragAngle = angle;
}
function endDrag() {
isDragging = false;
}
canvas.addEventListener('mousedown', startDrag);
window.addEventListener('mousemove', moveDrag);
window.addEventListener('mouseup', endDrag);
canvas.addEventListener('dblclick', (e) => {
e.preventDefault();
shakeKaleidoscope();
});
/* ===================== 触摸交互 ===================== */
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
const now = Date.now();
// 两次短触摸判定摇晃
const dist = Math.hypot(touch.clientX - lastTouchX, touch.clientY - lastTouchY);
if (now - lastTouchTime < 350 && dist < 40) {
shakeKaleidoscope();
}
lastTouchTime = now;
lastTouchX = touch.clientX;
lastTouchY = touch.clientY;
startDrag(e);
}, { passive: false });
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
moveDrag(e);
}, { passive: false });
canvas.addEventListener('touchend', (e) => {
e.preventDefault();
endDrag();
}, { passive: false });
/* ===================== 窗口调整 ===================== */
window.addEventListener('resize', () => {
resizeCanvas();
// 窗口变化时保持现有碎片,仅重设边界,碎片可能飞出边界会在下一帧被推回
});
/* ===================== 启动 ===================== */
renderCustomPresets();
resizeCanvas();
resetPieces();
syncUI();
loop();
</script>
<div class="light"></div><div data-trae-edit-ui="true"></div></body></html>