:root{--bg-color: #121212;--surface-color: #1e1e1e;--primary-color: #bb86fc;--secondary-color: #03dac6;--error-color: #cf6679;--text-primary: #ffffff;--text-secondary: #b0b0b0;--font-family: "Inter", sans-serif;--worker-bg: #a00090;--controller-bg: #503080}html{height:100%}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-family);margin:0;padding:0;display:flex;flex-direction:column;align-items:center;min-height:100vh}h1,h2,h3{color:var(--text-primary)}button{background-color:var(--primary-color);color:#000;border:none;padding:10px 20px;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s;margin:5px}button.fabutton{padding:5px;width:40px;height:40px;background-color:transparent;color:gray}button:disabled{background-color:gray;color:#a9a9a9;cursor:not-allowed}button:hover{background-color:#9965f4}button.secondary{background-color:var(--secondary-color)}button.danger{background-color:var(--error-color);color:#fff}button.remove-worker{padding:6px 10px;margin-left:20px}input,select{background-color:var(--surface-color);border:1px solid #333;color:var(--text-primary);padding:8px;border-radius:4px;font-size:1rem;margin:5px}.card{background-color:var(--surface-color);padding:20px;border-radius:8px;margin-bottom:20px;box-shadow:0 4px 6px #0000004d}.worker-item{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid #333}.level-meter{width:100px;height:10px;background-color:#333;border-radius:5px;overflow:hidden;margin:0 10px}.level-bar{height:100%;background-color:var(--secondary-color);width:0%;transition:width .1s linear}.hidden{display:none!important}div.flex-center-all{display:flex;align-items:center;justify-content:space-between;height:100vh;width:100vw;flex-direction:column;position:fixed;inset:0}.worker{background-color:var(--worker-bg);color:#fff;text-align:center}.worker canvas{border:solid 2px black}.worker h1{font-size:3em}.worker p.status{color:gray;font-size:.8em}.worker img.icon-1,.worker #upload-indicator{width:200px;height:auto}.worker a{margin-bottom:25px}.worker #audio-input-container,.worker #level-container{margin:10px 0;display:flex;align-items:center;justify-content:center;flex-direction:column}.blink_me{animation:blinker 1s linear infinite}@keyframes blinker{50%{opacity:0}}.tip{font-size:.8em;text-align:left;width:100%}.tip span.example{font-weight:700;color:var(--secondary-color);font-style:italic}.tip li{color:var(--primary-color);margin-right:6pt}.tutorial-container{position:relative;display:inline-block}.tutorial-bubble{position:absolute;top:120%;left:50%;transform:translate(-50%);background:var(--primary-color);color:#fff;padding:15px;border-radius:12px;width:250px;box-shadow:0 4px 15px #0000004d;z-index:1000;text-align:center;font-size:.9em;animation:fadeIn .3s ease-out}.tutorial-bubble:after{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:10px;border-style:solid;border-color:transparent transparent var(--primary-color) transparent}.tutorial-bubble h4{margin:0 0 8px;font-size:1.1em}.tutorial-bubble p{margin:0 0 12px;line-height:1.4;color:#ffffffe6}.tutorial-bubble .btn-got-it{background:#fff;color:var(--primary-color);border:none;padding:5px 15px;border-radius:20px;cursor:pointer;font-weight:700;font-size:.8em;transition:transform .2s}.tutorial-bubble .btn-got-it:hover{transform:scale(1.05)}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}
