.vsb-tool{--vsb-accent:var(--color-accent);--vsb-accent-bright:var(--color-accent-bright);--vsb-ok:#15803d;--vsb-ok-bg:#15803d1a;--vsb-ok-bd:#15803d47;--vsb-warn:#b45309;--vsb-warn-bg:#b453091a;--vsb-warn-bd:#b4530947;--vsb-err:#b91c1c;--vsb-err-bg:#b91c1c1a;--vsb-err-bd:#b91c1c47;--vsb-accent-bg:#ff7a001a;--vsb-accent-bd:#ff7a004d}:root.dark .vsb-tool{--vsb-ok:#4ade80;--vsb-ok-bg:#4ade801f;--vsb-ok-bd:#4ade804d;--vsb-warn:#fbbf24;--vsb-warn-bg:#fbbf241f;--vsb-warn-bd:#fbbf244d;--vsb-err:#f87171;--vsb-err-bg:#f871711f;--vsb-err-bd:#f871714d;--vsb-accent-bg:#ff7a0024;--vsb-accent-bd:#ff7a0061}.vsb-card{background-color:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:.75rem;transition:border-color .2s,box-shadow .2s}.vsb-card:hover{border-color:var(--vsb-accent-bd)}.vsb-tile{background-color:var(--color-canvas-soft);border:1px solid var(--color-hairline);border-radius:.625rem;transition:border-color .2s,transform .2s}:root.dark .vsb-tool .vsb-tile{background-color:var(--color-canvas-soft-2)}.vsb-tile:hover{border-color:var(--vsb-accent-bd)}.vsb-canvas-container{aspect-ratio:16/9;border:1px solid var(--vsb-accent-bd);background-color:#050505;border-radius:1rem;width:100%;max-height:560px;transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 24px 50px -20px #0009,inset 0 0 60px -30px #ff7a0040}.vsb-canvas-container.is-running{border-color:#ff7a008c;box-shadow:0 0 26px #ff7a002e,0 24px 50px -20px #0009,inset 0 0 60px -30px #ff7a004d}@media (width<=640px){.vsb-canvas-container{aspect-ratio:4/3;max-height:420px}}.vsb-canvas-container:fullscreen{aspect-ratio:auto;border:none;border-radius:0;max-height:none}#vsb-canvas{width:100%;height:100%;display:block}.vsb-hud-chip{-webkit-backdrop-filter:blur(10px);color:#e5e5e5;background-color:#0a0a0ad1;border:1px solid #ffffff1f}.vsb-overlay{background:radial-gradient(#140c048c,#050505e6);justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.vsb-opt-btn{border:1px solid var(--color-hairline);background-color:var(--color-canvas);color:var(--color-body);user-select:none;transition:all .15s ease-in-out}.vsb-opt-btn:hover{border-color:var(--vsb-accent-bd);color:var(--color-ink)}.vsb-opt-btn.chip-active{box-shadow:0 0 0 1px var(--vsb-accent), 0 0 14px -2px #ff7a0059;border-color:var(--vsb-accent)!important;background-color:var(--vsb-accent-bg)!important;color:var(--color-ink)!important}.vsb-config-locked{opacity:.65;pointer-events:none}.vsb-btn-primary{background-color:var(--vsb-accent);color:#0a0a0a;transition:transform .1s,box-shadow .15s,background-color .15s;box-shadow:0 8px 22px -8px #ff7a0099}.vsb-btn-primary:hover{background-color:var(--vsb-accent-bright)}.vsb-btn-primary:active{transform:scale(.98)}.vsb-btn-danger{background-color:var(--vsb-err)!important;color:#fff!important;box-shadow:0 8px 22px -8px #dc26268c!important}.vsb-btn-secondary{border:1px solid var(--color-hairline);background-color:var(--color-canvas);color:var(--color-body);transition:border-color .15s,color .15s}.vsb-btn-secondary:hover{border-color:var(--vsb-accent-bd);color:var(--color-ink)}.vsb-badge{border:1px solid var(--color-hairline);background-color:var(--color-canvas-soft);color:var(--color-mute);border-radius:9999px;align-items:center;gap:.375rem;padding:.125rem .5rem;font-size:11px;font-weight:600;display:inline-flex}.vsb-badge-ok{color:var(--vsb-ok);background-color:var(--vsb-ok-bg);border-color:var(--vsb-ok-bd)}.vsb-badge-warn{color:var(--vsb-warn);background-color:var(--vsb-warn-bg);border-color:var(--vsb-warn-bd)}.vsb-badge-err{color:var(--vsb-err);background-color:var(--vsb-err-bg);border-color:var(--vsb-err-bd)}.vsb-badge-accent{color:var(--vsb-accent);background-color:var(--vsb-accent-bg);border-color:var(--vsb-accent-bd)}.vsb-progress-track{background:var(--color-canvas-soft-2);border-radius:9999px;height:6px;overflow:hidden}.vsb-progress-fill{background:linear-gradient(90deg,#ff7a00 0%,#ff8a1f 50%,#fbbf24 100%);border-radius:9999px;width:0%;height:100%;transition:width .15s linear}.vsb-progress-fill.is-warmup{background:repeating-linear-gradient(45deg,#ff7a008c 0 8px,#ff7a0040 8px 16px)}.vsb-slider{appearance:none;background:var(--color-canvas-soft-2);border:1px solid var(--color-hairline);border-radius:9999px;outline:none;height:6px}.vsb-slider::-webkit-slider-thumb{appearance:none;background:var(--vsb-accent);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:transform .1s;box-shadow:0 0 8px #ff7a0099}.vsb-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.vsb-slider::-moz-range-thumb{background:var(--vsb-accent);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 0 8px #ff7a0099}.vsb-graph-fps-path{filter:drop-shadow(0 0 4px #ff7a008c)}.vsb-graph-ft-path{filter:drop-shadow(0 0 4px #fbbf2480)}.vsb-faq-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}.vsb-tool button:focus-visible,.vsb-tool a:focus-visible,.vsb-tool input:focus-visible{outline:2px solid var(--vsb-accent-bright);outline-offset:2px}@media (prefers-reduced-motion:reduce){.vsb-tool .animate-pulse,.vsb-tool .animate-ping{animation:none!important}.vsb-progress-fill{transition:none}}
