#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:inherit;background-color:#000;min-height:100%}.logo{display:none}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}:root{--bg-color: #000000;--text-color: #e6e6fa;--accent-color: #ff2b6d;--secondary-accent: #00f0ff;--dark-accent: #0c0c14;--terminal-green: #00ff41;--terminal-red: #ff003c;--border-color: #1f1f3a;--panel-bg: #0c0c14;--mono-font: "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#000!important;color:var(--text-color);font-family:var(--mono-font);line-height:1.6;padding:0;margin:0;min-height:100%;height:100%;overflow-x:hidden;position:relative}.app-container{max-width:100%;margin:0;padding:20px;min-height:100vh;background-color:#000;display:flex;flex-direction:column;position:relative;z-index:1;gap:20px}h1,h2,h3{color:var(--accent-color);text-transform:uppercase;letter-spacing:2px;margin-bottom:15px;border-bottom:2px solid var(--accent-color);padding-bottom:5px;font-family:var(--mono-font)}h1{font-size:.75rem;text-align:center;margin-bottom:10px;border-bottom:none;position:relative;color:var(--accent-color);letter-spacing:.5px;text-transform:uppercase;font-family:var(--mono-font);font-weight:700;padding:5px 8px;display:inline-block;margin-left:auto;margin-right:auto}h1:after{content:"";position:absolute;left:50%;bottom:-4px;transform:translate(-50%);width:60px;height:1px;background-color:var(--accent-color)}.title-container{display:flex;justify-content:center;width:100%;margin-bottom:10px}.controls{display:none}button{display:block}.controls button{display:none}.auto-chat{display:inline-flex!important}.clear-button{display:none}.visualizer-container{border:none;background-color:transparent;position:relative;padding:0;border-radius:0;box-shadow:none;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;height:90vh}.message-container{margin-top:0;flex:1;min-width:0;border:2px solid var(--accent-color);background-color:var(--panel-bg);position:relative;padding:40px 15px 15px;border-radius:0;box-shadow:none;height:280px;display:flex;flex-direction:column}.message-header{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid var(--border-color)}.message-header h2{margin:0;font-size:1rem;border:none}.received-message{display:none}.received-message::-webkit-scrollbar,.received-message::-webkit-scrollbar-track,.received-message::-webkit-scrollbar-thumb,.received-message::-webkit-scrollbar-thumb:hover,.received-message:empty:before{display:none}.received-message::-webkit-scrollbar{width:8px}.received-message::-webkit-scrollbar-track{background:rgba(0,0,0,.4);border-left:1px solid rgba(255,43,109,.2)}.received-message::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:0;border:1px solid black}.received-message::-webkit-scrollbar-thumb:hover{background:var(--secondary-accent)}.message-line{margin-bottom:16px;width:100%;box-sizing:border-box;font-family:var(--mono-font);word-break:break-word;display:block;background-color:#0003;padding:8px;border-left:3px solid var(--accent-color);border-bottom:none;transition:all .3s ease;position:relative;white-space:pre-wrap;margin-top:8px}.message-line:after{content:"";display:block;height:6px;width:100%;position:absolute;bottom:-7px;left:0}.received-message:empty:before{content:"NO INCOMING TRANSMISSION DETECTED...\a_ ";white-space:pre;color:var(--text-color);opacity:.7;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.terminal-cursor{display:inline-block;width:10px;height:1.2em;background-color:transparent;vertical-align:middle;margin-left:2px;animation:blink 1s step-start infinite;font-weight:700}@keyframes blink{50%{opacity:0}}.transmit-container{margin-top:0;flex:1;min-width:0;border:2px solid var(--accent-color);background-color:var(--panel-bg);position:relative;padding:40px 15px 15px;border-radius:0;box-shadow:none}textarea{width:100%;height:100px;background-color:#000;color:var(--text-color);border:1px solid var(--accent-color);padding:10px;font-family:var(--mono-font);resize:none;margin-bottom:10px;border-radius:0}.transmit-container button{display:block;background-color:var(--accent-color);color:var(--text-color);border:3px solid var(--secondary-accent);padding:10px 15px;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;font-family:var(--mono-font);letter-spacing:1px;border-radius:0;box-shadow:0 0 10px #00f0ff4d;position:relative;transition:all .2s ease;outline:none}.transmit-container button:hover{background-color:var(--terminal-red);border-color:var(--terminal-red);box-shadow:0 0 15px #ff003c66}.transmit-container button:active{transform:translateY(1px);box-shadow:0 0 5px #ff003c66}.transmit-container button:disabled{background-color:var(--dark-accent);border-color:var(--border-color);box-shadow:none;cursor:not-allowed;opacity:.6}.transmit-container button:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,rgba(0,240,255,.8),transparent)}.stats-container{padding:10px;font-size:.8rem;border-top:1px solid var(--border-color);color:var(--secondary-accent)}.stats-container h3{font-size:.9rem;color:var(--accent-color);margin-bottom:5px;border:none}.stats-container p{margin:3px 0;font-family:var(--mono-font)}.status-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#0c0c14cc;padding:5px 10px;border:1px solid var(--accent-color);color:var(--accent-color);font-size:.9rem;animation:blink 1.5s infinite;text-transform:uppercase;letter-spacing:1px;border-radius:0;z-index:10}.status-indicator.audio-not-ready{color:var(--secondary-accent);border-color:var(--secondary-accent);cursor:pointer;animation:blink 1s infinite}.status-indicator.audio-not-ready:hover{background-color:#00f0ff1a;box-shadow:0 0 10px #00f0ff80}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.debug-container{display:none}.frequency-visualizer{height:150px;display:flex;align-items:flex-end;background-color:#000;padding:5px;border:none;border-radius:0}.frequency-bar{flex:1;background:linear-gradient(to top,var(--accent-color) 0%,var(--secondary-accent) 50%,var(--terminal-green) 100%);margin:0 1px;min-width:2px;transform-origin:bottom;box-shadow:0 0 5px #ff2b6db3}.frequency-bar:nth-child(4n){background:linear-gradient(to top,var(--accent-color),#ff9e80)}.frequency-bar:nth-child(4n+1){background:linear-gradient(to top,var(--accent-color),var(--secondary-accent))}.frequency-bar:nth-child(4n+2){background:linear-gradient(to top,var(--accent-color),#ff80ab)}.frequency-bar:nth-child(4n+3){background:linear-gradient(to top,var(--accent-color),var(--terminal-green))}.frequency-range-info{margin-top:5px;padding:5px 10px;font-size:.7rem;color:var(--secondary-accent);background-color:#00000080;border-top:1px solid var(--border-color);text-align:center;font-family:var(--mono-font);letter-spacing:.5px}@media (max-width: 768px){.app-container{padding:10px}h1{font-size:1.5rem}.message-transmit-wrapper{flex-direction:column;gap:15px;margin-top:15px}.message-container{margin-bottom:0;height:200px;flex:none;width:100%}.transmit-container{margin-top:0;flex:none;width:100%}.visualizer-container{margin-bottom:15px}.frequency-visualizer{height:100px}.sent-messages-container{font-size:.9rem}textarea{height:80px;font-size:.9rem}.message-line{margin-bottom:8px;padding-bottom:6px}.status-indicator{font-size:.8rem;padding:4px 8px}.section-title{height:25px;font-size:.8rem;line-height:25px}}@media (max-width: 375px){.app-container{padding:5px}.message-container{height:180px;padding-top:30px;padding-left:10px;padding-right:10px}.transmit-container{padding-top:30px;padding-left:10px;padding-right:10px}.message-transmit-wrapper{gap:10px}.section-title{height:22px;font-size:.75rem;line-height:22px}.frequency-visualizer{height:80px}textarea{height:70px}}.visualizer-container:before,.message-container:before,.transmit-container:before,.visualizer-container:after,.message-container:after,.transmit-container:after{display:none!important;content:none!important;visibility:hidden!important}.section-title{position:absolute;top:0;left:0;right:0;height:30px;background-color:var(--accent-color);color:#000;font-weight:700;text-align:left;padding-left:15px;line-height:30px;font-size:.9rem;letter-spacing:1px;z-index:100;text-transform:uppercase;border-bottom:2px solid var(--accent-color);text-shadow:0 0 5px rgba(0,0,0,.5);box-shadow:inset 0 0 10px #0000004d;border-radius:0}.visualizer-container .section-title{display:none}.message-container{height:280px}html{background-color:#000;min-height:100%;height:100%;overflow-x:hidden;margin:0;padding:0}body:after{content:"";display:block;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000;z-index:-10;height:200vh}.message-transmit-wrapper{display:flex;flex-direction:row;justify-content:space-between;gap:20px;width:100%;margin-top:20px}.floating-stats-container{position:absolute;top:10px;right:10px;background-color:#000000b3;border:1px solid var(--accent-color);padding:5px 8px;z-index:100;font-size:.7rem;color:var(--secondary-accent);font-family:var(--mono-font);text-transform:uppercase;max-width:150px;letter-spacing:.5px;display:flex;flex-direction:column;gap:2px}.stats-label{color:var(--accent-color);font-size:.75rem;font-weight:700;margin-bottom:2px;letter-spacing:.5px;border-bottom:1px solid var(--accent-color);padding-bottom:2px}.stats-value{font-size:.65rem;white-space:nowrap;color:var(--text-color)}.stats-container{display:none}.app-footer{margin-top:30px;text-align:center;font-size:.65rem;color:var(--text-color);opacity:.6;font-family:var(--mono-font);padding-bottom:15px}.app-footer a{color:var(--accent-color);text-decoration:none;transition:opacity .2s ease}.app-footer a:hover{opacity:1;text-decoration:underline}.streaming-message{position:relative;background-color:#0009;border-left:4px solid #0084ff;padding-left:8px!important;animation:pulse 1.5s infinite alternate;letter-spacing:.05em;font-weight:500}@keyframes pulse{0%{border-left-color:#0084ff}to{border-left-color:#00e1ff}}.status-indicator.streaming{animation:blink .8s step-start infinite;color:#00e1ff;font-weight:700}.message-separator{height:1px;margin-top:12px;margin-bottom:8px;background:linear-gradient(to right,rgba(255,43,109,.7),rgba(0,240,255,.5),rgba(255,43,109,.7));opacity:.8}.streaming-message .timestamp{background-color:#000000b3;padding:2px 5px;border-radius:2px;color:#00f0ff}.streaming-message:after{content:"";position:absolute;top:0;right:0;bottom:0;width:5px;background:linear-gradient(to bottom,transparent,var(--secondary-accent),transparent);opacity:.7;animation:highlight-pulse 1s infinite}@keyframes highlight-pulse{0%,to{opacity:.3}50%{opacity:.7}}.status-indicator.streaming{background-color:#000000e6;border:2px solid var(--secondary-accent);color:var(--secondary-accent);animation:blink 1s infinite;z-index:100;font-weight:700}.status-indicator.transmitting{background-color:#000000e6;border:2px solid var(--terminal-green);color:var(--terminal-green);animation:none;z-index:100;font-weight:700;box-shadow:0 0 8px #00ff4180}.timeout-message{background-color:#1e000099;border-left:4px solid #ff3300;padding:6px 8px;margin:6px 0}.sent-message{color:var(--terminal-green)!important;border-left:4px solid var(--terminal-green);background-color:transparent!important;padding:2px 8px;margin-left:-8px;box-shadow:none;line-height:1.2}.message-line:not(.sent-message):not(.streaming-message):not(.timeout-message){color:var(--text-color)!important;border-left:4px solid var(--terminal-red);background-color:transparent!important;padding:2px 8px;margin-left:-8px;box-shadow:none;line-height:1.2}div.message-line.sent-message,div.message-line.sent-message *,div.message-line.sent-message>span{color:var(--terminal-green)!important}.sent-message>*{color:var(--terminal-green)!important}.sent-indicator{color:var(--terminal-green)!important;font-weight:700!important;text-shadow:0 0 5px rgba(0,255,65,.3)!important;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.8}50%{opacity:1}to{opacity:.8}}.timestamp{font-size:.8em;color:#888;margin-top:4px;text-align:right;display:block;font-style:italic}.sent-messages-container{max-height:280px;overflow-y:auto;padding:10px;font-family:Unifont,Courier Prime,Courier New,monospace;width:100%;border-top:none;margin-top:0}.sent-messages-container .message-line{margin-bottom:4px;padding:2px 8px;box-shadow:none!important;line-height:1.2}.sent-messages-container .message-line.sent-message,.sent-messages-container .message-line[data-sent=true]{color:#00ff41!important;font-weight:700!important;border-left:4px solid #00ff41!important;background-color:transparent!important}.sent-messages-container .message-line.received-message-box,.sent-messages-container .message-line[data-received=true]{color:var(--text-color)!important;border-left:4px solid var(--terminal-red)!important;background-color:transparent!important}.received-message-box *{color:var(--text-color)!important}.received-indicator{color:var(--terminal-red)!important;font-weight:700!important}.sent-message,[data-sent=true],[class*=sent-indicator],.sent-text,div:has([class*=sent-indicator]),div:has(.sent-text){color:var(--terminal-green)!important}.message-line.sent-message,.message-line.sent-message *,.message-line[data-sent=true],.message-line[data-sent=true] *{color:var(--terminal-green)!important}.received-message div:not(.sent-message):not(.streaming-message):not(.timeout-message),div[data-testid=message-display] div.message-line:not(.sent-message):not(.streaming-message):not(.timeout-message):not([data-sent=true]):not(:has-text("[SENT]")){color:var(--text-color)!important;border-left:4px solid var(--terminal-red)!important;background-color:transparent!important;padding:2px 8px;margin-bottom:4px;line-height:1.2}body.mobile{overflow-x:hidden}body.mobile .app-container{padding:10px;min-height:calc(100vh - 20px)}body.mobile .message-transmit-wrapper{flex-direction:column!important}body.mobile .floating-stats-container{top:5px;right:5px;font-size:.6rem;max-width:120px}body.mobile .transmit-container button{padding:12px 15px;font-size:.9rem}body.mobile textarea,body.mobile button{min-height:44px}.auto-chat{display:block!important;height:50px!important;min-height:50px!important;max-height:50px!important;padding:10px 20px!important;font-size:.9rem!important;font-weight:700!important;background-color:transparent!important;border:2px solid var(--secondary-accent)!important;color:var(--secondary-accent)!important;cursor:pointer!important;transition:all .3s ease!important;text-transform:uppercase!important;letter-spacing:1px!important;font-family:var(--mono-font)!important;border-radius:0!important;width:auto!important}.auto-chat:hover:not(:disabled){background-color:#00f0ff1a;box-shadow:0 0 10px #00f0ff4d;text-shadow:0 0 10px rgba(0,240,255,.5)}.auto-chat.active{background-color:var(--secondary-accent);color:#000;box-shadow:0 0 20px #00f0ff99;text-shadow:none;font-weight:700}.auto-chat:disabled{opacity:.5;cursor:not-allowed}.frequency-visualizer{position:relative;width:100%;height:175px;overflow:hidden;background-color:#000;border-radius:4px;box-shadow:0 0 10px #00000080;transition:all .3s ease}.frequency-visualizer canvas{position:absolute;top:0;left:0;width:100%;height:100%;transition:box-shadow .3s ease}.frequency-visualizer canvas.transmit-active{box-shadow:0 0 15px #00ff504d,inset 0 0 25px #00ff5033;border:1px solid rgba(0,255,120,.4)}@keyframes transmitPulse{0%{box-shadow:0 0 15px #00ff504d,inset 0 0 25px #00ff5033}50%{box-shadow:0 0 25px #00ff5080,inset 0 0 35px #00ff504d}to{box-shadow:0 0 15px #00ff504d,inset 0 0 25px #00ff5033}}.frequency-visualizer canvas.transmit-active{animation:transmitPulse 2s infinite ease-in-out}.audio-level-indicator{display:flex;flex-direction:column;gap:12px;padding:16px;background:rgba(0,0,0,.6);border:2px solid rgba(49,133,255,.5);border-radius:8px;font-family:Courier Prime,Courier New,monospace;position:relative}.audio-alert{position:absolute;top:-40px;left:0;right:0;background:linear-gradient(135deg,#ff4444,#ff8844);color:#fff;padding:10px 16px;border-radius:6px;font-size:12px;font-weight:700;text-align:center;animation:slideDown .3s ease-out;box-shadow:0 0 20px #f44c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audio-alert.active{animation:slideDownAndOut 3s ease-in-out forwards}@keyframes slideDown{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDownAndOut{0%{transform:translateY(0);opacity:1;box-shadow:0 0 20px #f44c}95%{opacity:1}to{transform:translateY(-50px);opacity:0;box-shadow:0 0 5px #f440}}.db-display{font-size:24px;font-weight:700;color:#3185ff;text-align:center;font-family:monospace;text-shadow:0 0 10px rgba(49,133,255,.5);transition:all .1s ease}.db-display.speaking{color:#00ff41;text-shadow:0 0 15px rgba(0,255,65,.7);font-size:26px}.db-display.alert-threshold{color:#f44;text-shadow:0 0 20px rgba(255,68,68,.9);font-size:28px}.level-bar-container{width:100%;height:24px;background:rgba(0,0,0,.8);border:1px solid rgba(49,133,255,.3);border-radius:4px;overflow:hidden;position:relative}.level-bar{height:100%;background:linear-gradient(90deg,#3185ff,#00ff41);border-radius:4px;transition:width .05s linear;box-shadow:0 0 10px #3185ff80}.level-bar.speaking{background:linear-gradient(90deg,#00ff41,#ffff00);box-shadow:0 0 15px #00ff41cc}.level-bar.alert{background:linear-gradient(90deg,#ff4444,#ff8844);box-shadow:0 0 20px #f44c;animation:alertPulse .5s ease-in-out infinite}@keyframes alertPulse{0%,to{box-shadow:0 0 20px #f44c}50%{box-shadow:0 0 30px #f44}}.level-text{text-align:center;font-size:12px;color:#3185ffb3;font-weight:700;text-transform:uppercase;letter-spacing:1px}.level-text.speaking{color:#00ff41}@media (max-width: 768px){.audio-level-indicator{padding:12px;gap:8px}.db-display{font-size:20px}.level-bar-container{height:20px}.level-text{font-size:11px}.audio-alert{font-size:11px;padding:8px 12px}}.arduino-controller{background:rgba(20,20,20,.8);border:2px solid #00ff41;border-radius:8px;padding:16px;margin-top:auto;margin-bottom:0;font-family:Courier New,monospace;color:#00ff41}.controller-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #00ff41}.controller-header h3{margin:0;font-size:1em;font-weight:700}.status-badge{padding:4px 12px;border-radius:12px;font-size:.85em;font-weight:700;transition:all .3s ease}.status-badge.connected{background-color:#00ff4133;color:#00ff41;border:1px solid #00ff41}.status-badge.disconnected{background-color:#ff41b433;color:#ff41b4;border:1px solid #ff41b4}.controller-body{display:flex;flex-direction:column;gap:12px}.connection-section{display:flex;gap:8px}.btn-connect,.btn-disconnect,.btn-test{flex:1;padding:20px 12px;min-height:50px;border:2px solid #00ff41;background-color:#00ff411a;color:#00ff41;border-radius:6px;cursor:pointer;font-family:Courier New,monospace;font-weight:700;font-size:1.1em;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.btn-connect:hover:not(:disabled),.btn-disconnect:hover,.btn-test:hover{background-color:#00ff414d;box-shadow:0 0 10px #00ff4180}.btn-connect:disabled{opacity:.5;cursor:not-allowed}.btn-disconnect{border-color:#ff41b4;background-color:#ff41b41a;color:#ff41b4}.btn-disconnect:hover{background-color:#ff41b44d;box-shadow:0 0 10px #ff41b480}.btn-test{border-color:#318eff;background-color:#318eff1a;color:#318eff}.btn-test:hover{background-color:#318eff4d;box-shadow:0 0 10px #318eff80}.info-section{background-color:#0000004d;border:1px solid rgba(0,255,65,.3);border-radius:4px;padding:8px}.info-row{display:flex;justify-content:space-between;padding:4px 0;font-size:.9em}.info-label{color:#00ff41b3;font-weight:700}.info-value{color:#00ff41;font-weight:700;text-align:right}.help-section{background-color:#318eff1a;border:1px solid rgba(49,142,255,.3);border-radius:4px;padding:8px;font-size:.85em;line-height:1.5}.help-section p{margin:0 0 8px;font-weight:700;color:#318eff}.help-section ol{margin:0;padding-left:16px}.help-section li{margin:4px 0;color:#00ff41}@media (max-width: 768px){.arduino-controller{padding:12px;margin:12px 0}.connection-section{flex-direction:column}.btn-connect,.btn-disconnect,.btn-test{width:100%}.info-row{flex-direction:column;gap:4px}.info-value{text-align:left}}:root{font-family:Courier New,monospace;font-size:16px;line-height:1.5;font-weight:400;color-scheme:dark;background-color:#000;color:#e6e6fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{margin:0;padding:0;min-height:100vh;background-color:#000}#root{width:100%;max-width:1280px;margin:0 auto;padding:2rem}@media (max-width: 768px){#root{padding:1rem}}