:root{--color-black: #000;--color-gray-darkest: #0a0a0a;--color-gray-darker: #111;--color-gray-dark: #1a1a1a;--color-gray-800: #222;--color-gray-700: #333;--color-gray-600: #444;--color-gray-500: #666;--color-gray-400: #888;--color-gray-300: #aaa;--color-gray-200: #ddd;--color-white: #fff;--color-accent: pink;--font-size-xs: 8px;--font-size-sm: 9px;--font-size-base: 10px;--font-size-md: 11px;--font-size-lg: 12px;--font-size-xl: 13px;--font-size-2xl: 14px;--font-size-3xl: 24px;--spacing-xs: 2px;--spacing-sm: 4px;--spacing-md: 6px;--spacing-base: 8px;--spacing-lg: 10px;--spacing-xl: 12px;--spacing-2xl: 16px;--spacing-3xl: 20px;--spacing-4xl: 24px;--spacing-5xl: 32px;--border-width-sm: 1px;--border-width-md: 2px;--border-radius-sm: 2px;--border-radius-base: 4px;--transition-fast: .2s;--transition-base: .3s;--letter-spacing-sm: .5px;--letter-spacing-base: 1px;--letter-spacing-md: 2px;--letter-spacing-lg: 4px;--scrollbar-width: 4px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--color-black);color:var(--color-white);overflow:hidden;height:100vh;font-weight:300}.loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--color-black);display:flex;align-items:center;justify-content:center;z-index:10000;transition:opacity .5s ease-out}.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-spinner{width:40px;height:40px;border:3px solid rgba(136,136,136,.2);border-top-color:#888;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.top-loading-bar{position:fixed;top:0;left:0;width:0%;height:1px;background:linear-gradient(90deg,var(--color-accent),#ff69b4);z-index:10001;transition:width .3s ease,opacity .3s ease;opacity:0;box-shadow:0 0 10px var(--color-accent)}.top-loading-bar.active{opacity:1}.top-loading-bar.loading{width:70%;transition:width 2s ease}.top-loading-bar.complete{width:100%;transition:width .3s ease}.container{opacity:0;transition:opacity .5s ease-in}.container.loaded{opacity:1}.container{display:grid;grid-template-columns:280px 1fr 280px;grid-template-rows:60px 1fr;height:100vh;gap:var(--border-width-sm);background:var(--color-gray-800)}.header{grid-column:1 / -1;background:var(--color-black);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-4xl);border-bottom:var(--border-width-sm) solid var(--color-gray-700)}.header-left{display:flex;align-items:center;gap:var(--spacing-5xl)}.header h1{font-size:var(--font-size-2xl);font-weight:500;letter-spacing:var(--letter-spacing-lg);color:var(--color-white)}.header-links{display:flex;gap:var(--spacing-2xl);align-items:center}.header-link{display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--font-size-md);color:var(--color-gray-400);text-decoration:none;padding:var(--spacing-md) var(--spacing-xl);border:var(--border-width-sm) solid var(--color-gray-700);border-radius:var(--border-radius-base);transition:all var(--transition-fast)}.header-link:hover{color:var(--color-white);border-color:var(--color-gray-500);background:var(--color-gray-darker)}.header-link svg{width:var(--font-size-2xl);height:var(--font-size-2xl)}.header .status{display:flex;gap:var(--spacing-3xl);font-size:var(--font-size-base);color:var(--color-gray-500);font-weight:400}.panel{background:var(--color-gray-darkest);padding:var(--spacing-2xl);overflow-y:auto}.panel-center{display:flex;flex-direction:column;overflow:hidden;padding:0}.panel-content{flex:1;overflow-y:auto;padding:var(--spacing-2xl)}.panel-content::-webkit-scrollbar{width:var(--scrollbar-width)}.panel-content::-webkit-scrollbar-track{background:transparent}.panel-content::-webkit-scrollbar-thumb{background:var(--color-gray-700);border-radius:var(--border-radius-sm)}.panel::-webkit-scrollbar{width:var(--scrollbar-width)}.panel::-webkit-scrollbar-track{background:transparent}.panel::-webkit-scrollbar-thumb{background:var(--color-gray-700);border-radius:var(--border-radius-sm)}.panel-title{font-size:var(--font-size-sm);margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-base);border-bottom:var(--border-width-sm) solid var(--color-gray-dark);color:var(--color-gray-500);text-transform:uppercase;letter-spacing:var(--letter-spacing-md);font-weight:500}.feature-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-base) 0;font-size:var(--font-size-base);border-left:var(--border-width-md) solid transparent;padding-left:var(--spacing-base);transition:all var(--transition-fast);color:var(--color-gray-400);text-transform:capitalize}.feature-item:hover{border-left-color:var(--color-white);padding-left:var(--spacing-xl);color:var(--color-white)}.feature-item.supported{color:var(--color-gray-300)}.feature-item.not-supported{color:var(--color-gray-600)}.feature-status{font-size:var(--font-size-sm);color:var(--color-gray-500)}.feature-status.yes{color:var(--color-white)}.feature-status.no{color:var(--color-gray-700)}.test-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-xl)}.test-card{background:var(--color-black);padding:var(--spacing-xl);border:var(--border-width-sm) solid var(--color-gray-dark);transition:all var(--transition-fast)}.test-card:hover{border-color:var(--color-gray-700);background:var(--color-gray-darkest)}.test-card h3{font-size:var(--font-size-md);font-weight:400;margin-bottom:var(--spacing-base);color:var(--color-gray-400)}.test-card button{background:var(--color-black);color:var(--color-white);border:var(--border-width-sm) solid var(--color-gray-700);padding:var(--spacing-base);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;width:100%;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:var(--letter-spacing-base);margin-bottom:var(--spacing-sm);font-weight:400}.test-card button:hover:not(:disabled){background:var(--color-white);color:var(--color-black);border-color:var(--color-white)}.test-card button:disabled{opacity:.2;cursor:not-allowed}.test-card input{width:100%;padding:var(--spacing-base);margin-bottom:var(--spacing-base);background:var(--color-black);border:var(--border-width-sm) solid var(--color-gray-dark);color:var(--color-white);font-family:inherit;font-size:var(--font-size-base)}.test-card input:focus{outline:none;border-color:var(--color-gray-700)}.test-card input::placeholder{color:var(--color-gray-600)}.result{margin-top:var(--spacing-base);padding:var(--spacing-base);background:var(--color-black);border-left:var(--border-width-md) solid var(--color-gray-700);font-size:var(--font-size-sm);max-height:50px;overflow-y:auto;color:var(--color-accent);font-family:Courier New,monospace}.console{background:var(--color-black);padding:var(--spacing-2xl);overflow-y:auto;font-size:var(--font-size-base);border-top:var(--border-width-sm) solid var(--color-gray-dark);font-family:Courier New,monospace;margin-top:var(--spacing-2xl);border-radius:var(--border-radius-sm);height:200px;transition:height var(--transition-base) ease,opacity var(--transition-base) ease,padding var(--transition-base) ease,margin var(--transition-base) ease}.console.hidden{height:0;opacity:0;overflow:hidden;padding:0;margin-top:0;border:none}.console-line{color:var(--color-gray-500);margin-bottom:var(--spacing-xs)}.console-line.success{color:var(--color-white)}.console-line.error{color:var(--color-gray-400)}.console-line.info{color:var(--color-gray-600)}.action-button{background:var(--color-black);padding:var(--spacing-lg);font-family:inherit;cursor:pointer;font-size:var(--font-size-base);width:100%;margin-bottom:var(--spacing-base);transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:var(--letter-spacing-base);font-weight:400}.action-button.primary{border:var(--border-width-sm) solid var(--color-white);color:var(--color-white)}.action-button.primary:hover{background:var(--color-white);color:var(--color-black)}.action-button.secondary{border:var(--border-width-sm) solid var(--color-gray-600);color:var(--color-gray-500)}.action-button.secondary:hover{border-color:var(--color-gray-400);color:var(--color-white)}.action-button.danger{border:var(--border-width-sm) solid var(--color-gray-700);color:var(--color-gray-600)}.action-button.danger:hover{border-color:var(--color-gray-500);color:var(--color-gray-400)}.stats-panel{margin-top:var(--spacing-2xl);padding:var(--spacing-xl);border:var(--border-width-sm) solid var(--color-gray-dark);font-size:var(--font-size-sm);color:var(--color-gray-500)}.stats-title{font-size:var(--font-size-sm);margin-bottom:var(--spacing-base);color:var(--color-gray-400);text-transform:uppercase;letter-spacing:var(--letter-spacing-base)}.stats-panel div span{color:var(--color-white)}.shortcuts-panel{margin-top:var(--spacing-2xl);padding:var(--spacing-xl);border:var(--border-width-sm) solid var(--color-gray-dark);font-size:var(--font-size-sm);color:var(--color-gray-500)}.shortcuts-title{font-size:var(--font-size-sm);margin-bottom:var(--spacing-base);color:var(--color-gray-400);text-transform:uppercase;letter-spacing:var(--letter-spacing-base)}.shortcuts-content code{color:var(--color-gray-300);background:var(--color-black);padding:var(--spacing-xs) var(--spacing-sm)}.actions-container{display:flex;flex-direction:column}.matrix-bg{position:fixed;top:0;left:0;width:100%;height:100%;opacity:.015;pointer-events:none;z-index:0}.blink{animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-gray-800);border-radius:var(--border-radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-gray-700)}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;opacity:0;visibility:hidden;transition:opacity var(--transition-base),visibility var(--transition-base);z-index:999}.sidebar-overlay.active{opacity:1;visibility:visible}.result-sidebar{position:fixed;top:0;right:0;width:500px;max-width:90vw;height:100vh;background:var(--color-black);border-left:var(--border-width-sm) solid var(--color-gray-800);display:flex;flex-direction:column;transform:translate(100%);transition:transform var(--transition-base);z-index:1000;color:var(--color-white);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.result-sidebar.active{transform:translate(0)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-4xl);border-bottom:var(--border-width-sm) solid var(--color-gray-800);background:var(--color-black)}.sidebar-header h3{margin:0;font-size:var(--font-size-2xl);font-weight:500;color:var(--color-white);letter-spacing:var(--letter-spacing-sm);text-transform:uppercase}.sidebar-close{background:none;border:none;color:var(--color-gray-500);font-size:var(--font-size-3xl);cursor:pointer;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}.sidebar-close:hover{color:var(--color-white)}.sidebar-content{flex:1;padding:var(--spacing-4xl);overflow-y:auto;background:var(--color-black)}.sidebar-content pre{background:var(--color-gray-darker);padding:var(--spacing-2xl);overflow-x:auto;font-size:var(--font-size-md);margin:0;color:var(--color-gray-200);border:var(--border-width-sm) solid var(--color-gray-800)}.sidebar-footer{padding:var(--spacing-3xl) var(--spacing-4xl);border-top:var(--border-width-sm) solid var(--color-gray-800);display:flex;gap:var(--spacing-xl);justify-content:flex-end;background:var(--color-black)}.sidebar-button{padding:var(--spacing-lg) var(--spacing-3xl);border:var(--border-width-sm) solid var(--color-gray-700);background:var(--color-black);color:var(--color-white);cursor:pointer;font-size:var(--font-size-md);text-transform:uppercase;letter-spacing:var(--letter-spacing-sm);transition:all var(--transition-fast);font-weight:400}.sidebar-button:hover{background:var(--color-gray-darker);border-color:var(--color-white);color:var(--color-white)}.sidebar-button.primary{background:var(--color-white);color:var(--color-black);border-color:var(--color-white)}.sidebar-button.primary:hover{background:var(--color-gray-200);border-color:var(--color-gray-200)}.sidebar-button.secondary{background:transparent;border-color:var(--color-gray-700)}.sidebar-button.secondary:hover{border-color:var(--color-gray-500)}.result-success{color:var(--color-white);font-size:var(--font-size-xl);margin-bottom:var(--spacing-3xl);padding:var(--spacing-xl) var(--spacing-2xl);background:var(--color-gray-darker);border-left:var(--border-width-md) solid var(--color-white)}.result-error{color:var(--color-white);font-size:var(--font-size-xl);margin-bottom:var(--spacing-3xl);padding:var(--spacing-xl) var(--spacing-2xl);background:var(--color-gray-darker);border-left:var(--border-width-md) solid var(--color-gray-500)}.result-info{color:var(--color-gray-400);font-size:var(--font-size-xl);margin-bottom:var(--spacing-3xl);padding:var(--spacing-xl) var(--spacing-2xl);background:var(--color-gray-darker);border-left:var(--border-width-md) solid var(--color-gray-600)}.stream-info{background:var(--color-gray-darker);padding:var(--spacing-3xl);margin:var(--spacing-3xl) 0;border:var(--border-width-sm) solid var(--color-gray-800)}.stream-info p{margin:var(--spacing-lg) 0;font-size:var(--font-size-lg);color:var(--color-gray-400)}.stream-info p strong{color:var(--color-white);font-weight:500}.broadcast-messages-label{margin:var(--spacing-3xl) 0 var(--spacing-lg);font-size:var(--font-size-md);color:var(--color-gray-400)}.broadcast-messages{max-height:200px;overflow-y:auto;background:var(--color-gray-darker);border:var(--border-width-sm) solid var(--color-gray-800);padding:var(--spacing-xl)}.broadcast-message-item{padding:var(--spacing-lg);margin-bottom:var(--spacing-md);font-size:var(--font-size-sm);font-family:monospace;color:var(--color-gray-200);background:var(--color-black);border-left:var(--border-width-sm) solid var(--color-white)}.broadcast-message-item:last-child{margin-bottom:0}@media(max-width:1024px){.container{grid-template-columns:1fr;grid-template-rows:60px auto auto 1fr auto}.panel:first-of-type{grid-row:2}.panel-center{grid-row:3;min-height:400px}.panel:last-of-type{grid-row:4}.header-left{gap:var(--spacing-2xl)}.header h1{font-size:var(--font-size-lg);letter-spacing:var(--letter-spacing-md)}.header-links{gap:var(--spacing-base)}.header-link{font-size:var(--font-size-base);padding:var(--spacing-sm) var(--spacing-base)}.header .status{font-size:var(--font-size-sm);gap:var(--spacing-xl)}.test-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.action-button{font-size:var(--font-size-md);padding:var(--spacing-lg) var(--spacing-2xl)}}@media(max-width:768px){body{overflow-y:auto}.container{height:auto;min-height:100vh}.header{padding:0 var(--spacing-xl);height:auto;min-height:60px;flex-wrap:wrap}.header-left{gap:var(--spacing-xl)}.header h1{font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-base)}.header-links{gap:var(--spacing-md)}.header-link{font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md)}.header-link svg{width:var(--font-size-lg);height:var(--font-size-lg)}.header .status{width:100%;justify-content:center;margin-top:var(--spacing-base);padding-bottom:var(--spacing-base);font-size:var(--font-size-xs);gap:var(--spacing-2xl)}.panel{padding:var(--spacing-xl)}.panel-title{font-size:var(--font-size-base);margin-bottom:var(--spacing-xl)}.test-grid{grid-template-columns:1fr;gap:var(--spacing-xl)}.test-card{padding:var(--spacing-2xl)}.test-card h3{font-size:var(--font-size-lg);margin-bottom:var(--spacing-lg)}.test-card button{font-size:var(--font-size-md);padding:var(--spacing-lg) var(--spacing-3xl);min-height:44px}.console{max-height:300px;font-size:var(--font-size-base);padding:var(--spacing-xl)}.console-line{padding:var(--spacing-sm) 0}.action-button{font-size:var(--font-size-md);padding:var(--spacing-xl) var(--spacing-2xl);min-height:44px}.actions-container{grid-template-columns:1fr;gap:var(--spacing-base)}.stats-panel,.shortcuts-panel{font-size:var(--font-size-base);padding:var(--spacing-xl)}.stats-title,.shortcuts-title{font-size:var(--font-size-base);margin-bottom:var(--spacing-lg)}.feature-item{font-size:var(--font-size-sm);padding:var(--spacing-md) 0}.feature-status{font-size:var(--font-size-xs)}.matrix-bg{display:none}}@media(max-width:480px){.header h1{font-size:var(--font-size-base)}.header-links{display:none}.panel{padding:var(--spacing-base)}.test-card{padding:var(--spacing-xl)}.test-card h3{font-size:var(--font-size-md)}.test-card button{font-size:var(--font-size-base);padding:var(--spacing-base) var(--spacing-2xl)}.console{max-height:250px;font-size:var(--font-size-sm)}.action-button{font-size:var(--font-size-base);padding:var(--spacing-lg) var(--spacing-xl)}.stats-panel,.shortcuts-panel{font-size:var(--font-size-sm);padding:var(--spacing-lg)}}.summarizer-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10001;width:90%;max-width:600px}.summarizer-modal.active{display:block}.modal-content{background:var(--color-gray-darker);border:var(--border-width-sm) solid var(--color-gray-600);border-radius:var(--border-radius-base);padding:var(--spacing-3xl)}.modal-content h3{margin:0 0 var(--spacing-2xl) 0;color:var(--color-accent);font-size:var(--font-size-2xl);text-transform:uppercase;letter-spacing:var(--letter-spacing-md)}.modal-content textarea{width:100%;background:var(--color-black);border:var(--border-width-sm) solid var(--color-gray-600);border-radius:var(--border-radius-sm);padding:var(--spacing-lg);color:var(--color-white);font-family:Courier New,monospace;font-size:var(--font-size-2xl);resize:vertical;margin-bottom:var(--spacing-2xl)}.modal-content textarea:focus{outline:none;border-color:var(--color-accent)}.modal-options{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg);margin-bottom:var(--spacing-3xl)}.option-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.option-group label{color:var(--color-gray-300);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:var(--letter-spacing-sm)}.option-group select{background:var(--color-black);border:var(--border-width-sm) solid var(--color-gray-600);border-radius:var(--border-radius-sm);padding:var(--spacing-md) var(--spacing-base);color:var(--color-white);font-size:var(--font-size-base);cursor:pointer}.option-group select:focus{outline:none;border-color:var(--color-accent)}.modal-buttons{display:flex;gap:var(--spacing-lg);justify-content:flex-end}.modal-button{padding:var(--spacing-base) var(--spacing-2xl);border:var(--border-width-sm) solid;border-radius:var(--border-radius-sm);font-size:var(--font-size-base);font-weight:700;text-transform:uppercase;letter-spacing:var(--letter-spacing-base);cursor:pointer;transition:all var(--transition-fast)}.modal-button.primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-black)}.modal-button.primary:hover{opacity:.8}.modal-button.secondary{background:transparent;border-color:var(--color-gray-600);color:var(--color-gray-300)}.modal-button.secondary:hover{border-color:var(--color-gray-400);color:var(--color-white)}.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;z-index:10000}.modal-overlay.active{display:block}.stream-output{margin-bottom:var(--spacing-2xl);background:var(--color-black);border:var(--border-width-sm) solid var(--color-gray-600);border-radius:var(--border-radius-sm);padding:var(--spacing-lg);max-height:200px;overflow-y:auto}.stream-label{color:var(--color-accent);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:var(--letter-spacing-sm);margin-bottom:var(--spacing-base)}.stream-text{color:var(--color-white);font-family:Courier New,monospace;font-size:var(--font-size-base);white-space:pre-wrap;word-break:break-word}.ai-tag{display:inline-block;background:var(--color-gray-500);color:var(--color-white);font-size:var(--font-size-xs);padding:2px 6px;border-radius:var(--border-radius-sm);font-weight:700;text-transform:uppercase;letter-spacing:var(--letter-spacing-sm);margin-left:var(--spacing-sm)}.test-group-header{grid-column:1 / -1;color:var(--color-accent);font-size:var(--font-size-md);font-weight:700;text-transform:uppercase;letter-spacing:var(--letter-spacing-md);padding:var(--spacing-lg) 0 var(--spacing-base) 0;margin-top:var(--spacing-2xl);border-bottom:var(--border-width-sm) solid var(--color-gray-700)}.test-group-header:first-child{margin-top:0}