:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{width:100%;min-width:320px;height:100vh;min-height:100vh;margin:0;padding:0;overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.app-container{opacity:0;animation:.5s ease-in-out forwards appFadeIn}@keyframes appFadeIn{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.app-container{opacity:1;animation:none}}.monaco-menu-container,.context-view,.monaco-editor .context-view{z-index:10000!important}.monaco-editor .suggest-widget,.monaco-editor .parameter-hints-widget{z-index:9999!important}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.monaco-menu-container,.context-view,.monaco-editor .context-view,.monaco-editor .context-view.monaco-menu-container{z-index:10000!important}.monaco-editor .suggest-widget,.monaco-editor .parameter-hints-widget{z-index:9999!important}.monaco-menu{background-color:#252526!important;border:1px solid #454545!important;box-shadow:0 2px 8px #00000080!important}.monaco-menu .monaco-action-bar .action-item{color:#ccc!important}.monaco-menu .monaco-action-bar .action-item:hover{background-color:#2a2d2e!important}.monaco-menu .monaco-action-bar .action-label{cursor:pointer!important;padding:4px 20px!important}.control-bar{background-color:#1e1e1e;border-bottom:1px solid #333;gap:12px;padding:12px;display:flex}.control-button{color:#e0e0e0;cursor:pointer;background-color:#2d2d2d;border:1px solid #444;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.control-button:hover{background-color:#3d3d3d;border-color:#555}.control-button:active{transform:translateY(1px)}.control-button.play-commit{background-color:#0e639c;border-color:#17b}.control-button.play-commit:hover{background-color:#17b;border-color:#1488cc}.control-button.mute-bugs.active{background-color:#c72e2e;border-color:#d44444}.control-button.mute-bugs.active:hover{background-color:#d44444;border-color:#e55555}.control-button.run-code{background-color:#16a34a;border-color:#22c55e;align-items:center;gap:8px;display:flex}.control-button.run-code:hover{background-color:#22c55e;border-color:#4ade80}.control-button.run-code.running{cursor:not-allowed;opacity:.7;background-color:#6b7280;border-color:#9ca3af}.run-triangle{font-size:12px;transition:transform .2s;display:inline-block}.control-button.run-code:hover .run-triangle{transform:scale(1.2)}.control-button.run-code.running .run-triangle{animation:1s ease-in-out infinite pulse-triangle}@keyframes pulse-triangle{0%,to{opacity:1}50%{opacity:.5}}.terminal{background-color:#1e1e1e;border-top:1px solid #333;flex-direction:column;height:200px;font-family:Consolas,Monaco,Courier New,monospace;display:flex}.terminal-header{background-color:#252526;border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.terminal-title{color:#ccc;align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.terminal-icon{color:#4ec9b0;font-size:14px}.terminal-status{align-items:center;display:flex}.status-running{color:#4ec9b0;align-items:center;gap:6px;font-size:11px;font-weight:500;display:flex}.spinner{border:2px solid #333;border-top-color:#4ec9b0;border-radius:50%;width:12px;height:12px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.terminal-content{background-color:#1e1e1e;flex:1;padding:12px;overflow-y:auto}.terminal-output{color:#d4d4d4;white-space:pre-wrap;word-wrap:break-word;margin:0;font-size:13px;line-height:1.5}.terminal-placeholder{color:#6a6a6a;text-align:center;padding:20px;font-size:13px;font-style:italic}.terminal-content::-webkit-scrollbar{width:10px}.terminal-content::-webkit-scrollbar-track{background:#1e1e1e}.terminal-content::-webkit-scrollbar-thumb{background:#424242;border-radius:5px}.terminal-content::-webkit-scrollbar-thumb:hover{background:#4e4e4e}.editor-panel{background-color:#1e1e1e;flex-direction:column;height:100%;display:flex}.editor-header{background-color:#252526;border-bottom:1px solid #333;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.header-left{align-items:center;gap:12px;display:flex}.language-detector{background-color:#2d2d2d;border:1px solid #444;border-radius:4px;align-items:center;gap:8px;padding:4px 12px;transition:opacity .3s;display:flex}.language-detector.hidden{opacity:0;pointer-events:none}.language-icon{font-size:16px;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.language-label{color:#888;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:500}.language-badge{color:#000;border-radius:12px;padding:4px 10px;font-size:12px;font-weight:600;transition:all .3s}.language-badge.javascript{background:linear-gradient(135deg,#f7df1e 0%,#f0db4f 100%);box-shadow:0 2px 8px #f7df1e4d}.language-badge.python{background:linear-gradient(135deg,#3776ab 0%,#ffd343 100%);box-shadow:0 2px 8px #3776ab4d}.supported-languages{color:#888;background-color:#1e1e1e;border:1px solid #444;border-radius:4px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;display:flex}.support-icon{font-size:14px}.support-text{letter-spacing:.3px;font-weight:500}.example-selector{align-items:center;display:flex}.example-dropdown{color:#ccc;cursor:pointer;background-color:#2d2d2d;border:1px solid #444;border-radius:3px;min-width:180px;padding:6px 12px;font-size:13px;transition:all .2s}.example-dropdown:hover{background-color:#3d3d3d;border-color:#555}.example-dropdown:focus{border-color:#0e639c;outline:none}.editor-container{z-index:1;flex:1;min-height:0;position:relative;overflow:hidden}.waveform-visualizer{background-color:#1e1e1e;border-left:1px solid #333;flex-direction:column;flex:1;min-height:0;display:flex}.visualizer-header{background-color:#252526;border-bottom:1px solid #333;padding:12px 16px}.visualizer-header h2{color:#ccc;text-transform:uppercase;letter-spacing:.5px;margin:0;font-size:14px;font-weight:600}.canvas-container{flex:1;justify-content:center;align-items:center;padding:16px;display:flex;position:relative;overflow:hidden}.canvas-container canvas{border-radius:4px;width:100%;height:100%;display:block}@media (max-width:768px){.waveform-visualizer{border-top:1px solid #333;border-left:none}.visualizer-header h2{font-size:13px}.canvas-container{padding:12px}}@media (max-width:480px){.visualizer-header{padding:8px 12px}.visualizer-header h2{font-size:12px}.canvas-container{padding:8px}}.visualizer-error{text-align:center;color:#ccc;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex}.visualizer-error p{margin:8px 0}.visualizer-error p:first-child{color:#f59e0b;font-size:16px;font-weight:600}.visualizer-error .error-details{color:#888;word-wrap:break-word;max-width:400px;font-size:12px}.quality-indicator{color:#ccc;background-color:#252526;border:1px solid #333;border-radius:6px;flex-shrink:0;margin:8px 12px;padding:10px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.quality-header{color:#fff;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;font-weight:600;display:flex}.quality-icon{font-size:18px}.quality-waiting{text-align:center;color:#888;padding:20px;font-size:13px}.quality-content{flex-direction:column;gap:8px;display:flex}.quality-row{justify-content:space-between;align-items:center;font-size:12px;display:flex}.quality-label{color:#999;font-weight:500}.quality-value{color:#fff;font-weight:600}.mood-badge{color:#000;text-transform:uppercase;letter-spacing:.5px;border-radius:12px;padding:4px 12px;font-size:12px;font-weight:700}.intensity-bar-container{background-color:#1e1e1e;border:1px solid #444;border-radius:9px;flex:1;height:18px;margin-left:12px;position:relative;overflow:hidden}.intensity-bar-fill{border-radius:10px;height:100%;transition:width .3s,background-color .3s}.intensity-value{color:#fff;text-shadow:0 0 3px #000c;font-size:11px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.health-bar-container{background-color:#1e1e1e;border:1px solid #444;border-radius:3px;height:6px;margin-top:8px;overflow:hidden}.health-bar{border-radius:4px;height:100%;transition:width .5s,background-color .3s;box-shadow:0 0 10px}.shortcuts-help-button{color:#fff;cursor:pointer;z-index:1000;background-color:#0e639c;border:2px solid #17b;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:24px;transition:all .3s;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:0 4px 12px #0000004d}.shortcuts-help-button:hover{background-color:#17b;transform:scale(1.1);box-shadow:0 6px 16px #0006}.shortcuts-overlay{z-index:2000;background-color:#000000b3;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.shortcuts-panel{background-color:#252526;border:1px solid #444;border-radius:8px;width:90%;max-width:500px;padding:24px;animation:.3s slideUp;box-shadow:0 8px 32px #00000080}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.shortcuts-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.shortcuts-header h3{color:#fff;margin:0;font-size:20px;font-weight:600}.shortcuts-close{color:#ccc;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:32px;transition:all .2s;display:flex}.shortcuts-close:hover{color:#fff;background-color:#3d3d3d}.shortcuts-list{flex-direction:column;gap:12px;display:flex}.shortcut-item{background-color:#1e1e1e;border:1px solid #333;border-radius:6px;align-items:center;gap:12px;padding:12px;display:flex}.shortcut-icon{text-align:center;width:32px;font-size:24px}.shortcut-keys{color:#fff;text-align:center;background-color:#2d2d2d;border:1px solid #444;border-radius:4px;min-width:100px;padding:6px 12px;font-family:Courier New,monospace;font-size:13px;font-weight:600}.shortcut-description{color:#ccc;flex:1;font-size:14px}.shortcuts-footer{text-align:center;color:#888;margin-top:16px;font-size:12px}#root{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.app{color:#d4d4d4;background-color:#1e1e1e;flex-direction:column;width:100%;height:100vh;display:flex}.audio-warning{color:#000;z-index:1000;background-color:#f59e0b;width:100%;padding:.75rem 1rem;box-shadow:0 2px 4px #0003}.warning-content{justify-content:center;align-items:center;gap:.75rem;max-width:1400px;margin:0 auto;display:flex}.warning-icon{flex-shrink:0;font-size:1.25rem}.warning-text{flex:1;font-size:.875rem;font-weight:500}.warning-close{color:#000;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:1.5rem;transition:background-color .2s;display:flex}.warning-close:hover{background-color:#0000001a}.split-screen-layout{grid-template-columns:1fr 1fr;width:100%;height:100%;display:grid;overflow:hidden}.left-panel{border-right:1px solid #333;grid-column:1;height:100%;overflow:hidden}.right-panel{flex-direction:column;grid-column:2;height:100%;display:flex;overflow:hidden}@media (max-width:768px){.split-screen-layout{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.left-panel{border-bottom:1px solid #333;border-right:none;grid-area:1/1}.right-panel{grid-area:2/1}}.intro-logo{will-change:transform;flex-shrink:0;justify-content:center;align-items:center;width:clamp(60px,15vw,120px);height:clamp(60px,15vw,120px);animation:3s ease-in-out infinite logo-pulse;display:flex}@keyframes logo-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}@media (max-width:767px){.intro-logo{width:clamp(50px,20vw,80px);height:clamp(50px,20vw,80px)}}@media (min-width:768px) and (max-width:1023px){.intro-logo{width:clamp(70px,12vw,100px);height:clamp(70px,12vw,100px)}}@media (min-width:1920px){.intro-logo{width:120px;height:120px}}@media (prefers-reduced-motion:reduce){.intro-logo{animation:none}}.intro-screen{cursor:pointer;z-index:9999;opacity:1;background-color:#000;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .5s ease-in-out;display:flex;position:fixed;top:0;left:0}.intro-screen:focus{outline:none}.intro-screen.fade-out{opacity:0}.intro-content{flex-direction:column;align-items:center;gap:2rem;display:flex}.intro-title{color:#00d9ff;text-align:center;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:clamp(2.5rem,8vw,5rem);font-weight:700}.cursor{margin-left:.1em;animation:1s step-end infinite blink}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.intro-tagline{color:#ccc;text-align:center;max-width:90vw;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:clamp(1rem,3vw,1.5rem);font-style:italic;font-weight:300;animation:.5s ease-in fadeIn}.skip-instruction{color:#666;text-align:center;border-radius:4px;padding:.5rem 1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:clamp(.875rem,2vw,1rem);transition:color .2s,background-color .2s;position:absolute;bottom:2rem}.skip-instruction:focus{outline-offset:4px;color:#00d9ff;outline:2px solid #00d9ff}.skip-instruction:hover{color:#00d9ff;background-color:#00d9ff1a}@media (prefers-reduced-motion:reduce){.intro-screen{transition:none}.cursor,.intro-tagline{opacity:1;animation:none}.intro-content{animation:none}.intro-screen.fade-out{transition:opacity .1s ease-in-out}}@media (max-width:767px){.intro-content{gap:1.5rem;padding:1rem}.intro-title{font-size:clamp(2rem,10vw,3rem)}.intro-tagline{padding:0 1rem;font-size:clamp(.875rem,4vw,1.25rem)}.skip-instruction{font-size:clamp(.75rem,2.5vw,.875rem);bottom:1.5rem}}@media (max-width:480px){.intro-content{gap:1rem;padding:.75rem}.intro-title{font-size:clamp(1.75rem,12vw,2.5rem)}.intro-tagline{font-size:clamp(.75rem,4.5vw,1rem);line-height:1.4}.skip-instruction{font-size:.75rem;bottom:1rem}}@media (min-width:768px) and (max-width:1023px){.intro-content{gap:2rem}.intro-title{font-size:clamp(3rem,7vw,4rem)}.intro-tagline{font-size:clamp(1.125rem,2.5vw,1.375rem)}.skip-instruction{font-size:.9375rem;bottom:2rem}}@media (min-width:1024px) and (max-width:1919px){.intro-content{gap:2.5rem}.intro-title{font-size:clamp(3.5rem,6vw,4.5rem)}.intro-tagline{font-size:clamp(1.25rem,2vw,1.5rem)}}@media (min-width:1920px){.intro-content{gap:3rem}.intro-title{max-width:1400px;font-size:5rem}.intro-tagline{max-width:1200px;font-size:1.5rem}.skip-instruction{font-size:1rem}}@media (min-width:2560px){.intro-content{gap:3.5rem}.intro-title{font-size:6rem}.intro-tagline{font-size:1.75rem}}