*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%;overflow:hidden}#root{height:100vh;width:100vw}.websocket-terminal{display:flex;flex-direction:column;height:100vh;width:100vw;background-color:#000;color:#0f0;font-family:Courier New,monospace;font-size:14px;overflow:hidden}.terminal-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background-color:#111;border-bottom:1px solid #333;flex-shrink:0}.terminal-title{font-weight:700;color:#0f0}.connection-status{display:flex;align-items:center;gap:8px}.status-indicator{width:12px;height:12px;border-radius:50%;background-color:red;transition:background-color .3s ease}.status-indicator.connected{background-color:#0f0}.terminal-controls{display:flex;gap:8px;align-items:center}.api-key-input{background-color:#1a1a1a;border:1px solid #555;color:#0f0;padding:4px 8px;font-size:12px;border-radius:3px;font-family:inherit;min-width:200px}.api-key-input::placeholder{color:#666}.api-key-input:focus{outline:none;border-color:#0f0}.api-key-input:disabled{opacity:.5;cursor:not-allowed}.terminal-controls button{background-color:#333;border:1px solid #555;color:#0f0;padding:4px 8px;font-size:12px;cursor:pointer;border-radius:3px;font-family:inherit}.terminal-controls button:hover:not(:disabled){background-color:#444}.terminal-controls button:disabled{opacity:.5;cursor:not-allowed}.connect-btn:hover:not(:disabled){border-color:#0f0}.disconnect-btn:hover:not(:disabled){border-color:#f66}.clear-btn:hover:not(:disabled){border-color:#ff0}.terminal-body{flex:1;display:flex;flex-direction:column;min-height:0}.messages-container{flex:1;overflow-y:auto;padding:16px;line-height:1.4;min-height:0}.messages-container::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:#111}.messages-container::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.messages-container::-webkit-scrollbar-thumb:hover{background:#555}.message{display:flex;margin-bottom:4px;word-wrap:break-word;max-width:100%}.message-timestamp{color:#666;margin-right:12px;font-size:11px;flex-shrink:0;min-width:70px}.message-text{flex:1;text-align:left}.json-message{background-color:#1a1a1a;border:1px solid #333;border-radius:4px;padding:8px;margin-top:4px;font-family:Courier New,monospace;font-size:12px;color:#e0e0e0;overflow-x:auto;white-space:pre;line-height:1.4;text-align:left}.message-system .json-message{color:gold;background-color:#2a2a1a;border-color:#444}.message-sent .json-message{color:#90ee90;background-color:#1a2a1a;border-color:#343}.message-received .json-message{color:#add8e6;background-color:#1a1a2a;border-color:#345}.request-id{color:orange;font-weight:700;font-family:Courier New,monospace}.log-message{color:#87ceeb}.log-json-message{background-color:#1a1a1a;border:1px solid #333;border-radius:4px;padding:8px;margin-top:4px;margin-left:0;font-family:Courier New,monospace;font-size:11px;color:#e0e0e0;overflow-x:auto;white-space:pre;line-height:1.4;text-align:left}.message-system .request-id{color:gold}.message-system .log-message{color:#ff9}.message-sent .request-id{color:#90ee90}.message-sent .log-message{color:#98fb98}.message-received .request-id{color:#108ab3}.message-received .log-message{color:#b0e0e6}.message-system .log-json-message{color:gold;background-color:#2a2a1a;border-color:#444}.message-sent .log-json-message{color:#90ee90;background-color:#1a2a1a;border-color:#343}.message-received .log-json-message{color:#add8e6;background-color:#1a1a2a;border-color:#345}.message-sent{color:#0f0}.message-sent .message-text:before{content:"< ";color:#0a0}.message-received{color:#0af}.message-received .message-text:before{content:"> ";color:#08c}.message-system{color:#fa0}.message-system .message-text:before{content:"* ";color:#c80}.message-error{color:#f66}.input-form{flex-shrink:0;padding:16px;border-top:1px solid #333;background-color:#111}.input-container{display:flex;align-items:center;gap:8px}.prompt{color:#0f0;font-weight:700}.message-input{flex:1;background-color:transparent;border:none;outline:none;color:#0f0;font-family:inherit;font-size:inherit;padding:4px 0}.message-input::placeholder{color:#666}.terminal-footer{flex-shrink:0;padding:8px 16px;background-color:#111;border-top:1px solid #333;font-size:11px;color:#666}.help-text code{background-color:#333;padding:2px 4px;border-radius:2px;color:#0f0;margin:0 2px}@media(max-width:768px){.terminal-header{flex-direction:column;gap:8px;align-items:stretch}.connection-status,.terminal-controls{justify-content:center}.websocket-terminal{font-size:12px}}#root{margin:0 auto;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.logo.cloudflare:hover{filter:drop-shadow(0 0 2em #f6821faa)}@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}