:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.stream-list-container{max-width:1200px;margin:0 auto;padding:2rem;min-height:100vh;background:var(--primary-gradient);font-family:var(--font-family)}.stream-list-header{text-align:center;margin-bottom:3rem;color:var(--text-primary)}.stream-list-header h1{margin:0 0 .5rem}.stream-count{opacity:.9;margin:0;font-weight:400}.streams-grid{margin-bottom:2rem}.stream-card{background:#fff;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-light);transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;color:inherit;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border)}.stream-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-medium)}.stream-card:active{transform:translateY(-4px) scale(1.01)}.stream-thumbnail{width:100%;height:200px;position:relative;overflow:hidden;background:linear-gradient(45deg,#f0f0f0,#e0e0e0)}.stream-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.stream-card:hover .stream-thumbnail img{transform:scale(1.05)}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--primary-gradient);position:relative}.play-icon{font-size:3rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.stream-info{padding:1.5rem}.stream-title{font-size:1.25rem;font-weight:600;margin:0 0 .5rem;color:#1f2937;line-height:1.4}.stream-status{display:flex;align-items:center;gap:.5rem}.live-indicator{background:var(--live-gradient);color:#fff;padding:.25rem .75rem;border-radius:var(--border-radius-large);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;animation:blink 2s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.7}}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:var(--text-primary)}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.loading p{font-size:1.2rem;margin:0;opacity:.9}.error{text-align:center;padding:3rem;background:var(--glass-bg);border-radius:var(--border-radius);color:var(--text-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border)}.error h2{color:#fca5a5;margin-bottom:1rem;font-size:2rem}.error p{margin-bottom:2rem;font-size:1.1rem;opacity:.9}.error button{background:var(--button-primary);color:#fff;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-small);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.error button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #3b82f64d}.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-primary)}.empty-icon{font-size:4rem;margin-bottom:1.5rem;opacity:.8}.empty-state h2{margin-bottom:1rem;font-weight:600}.empty-state p{font-size:1.2rem;margin-bottom:.5rem;opacity:.9;line-height:1.6}@media (max-width: 768px){.stream-list-container{padding:1rem}.stream-list-header h1{font-size:2.5rem}.streams-grid{grid-template-columns:1fr;gap:1.5rem}.stream-thumbnail{height:180px}.empty-state{padding:3rem 1rem}.empty-state h2{font-size:2rem}}@media (max-width: 480px){.stream-list-header h1{font-size:2rem}.stream-count{font-size:1rem}.stream-thumbnail{height:160px}.stream-info{padding:1rem}.stream-title{font-size:1.1rem}}@media (prefers-color-scheme: dark){.stream-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.stream-title{color:#f9fafb}}@media (prefers-reduced-motion: reduce){.stream-card,.stream-thumbnail img,.play-icon,.live-indicator,.loading-spinner{animation:none;transition:none}.stream-card:hover{transform:none}}.stream-card:focus{outline:3px solid #3b82f6;outline-offset:2px}.error button:focus{outline:3px solid #60a5fa;outline-offset:2px}.player-container{min-height:100vh;background:var(--primary-gradient);font-family:var(--font-family);color:var(--text-primary)}.player-header{display:flex;align-items:center;gap:2rem;padding:2rem;border-bottom:1px solid var(--glass-border)}.back-button{background:var(--glass-bg);color:var(--text-primary);border:none;padding:.75rem 1.5rem;border-radius:var(--border-radius-small);font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border)}.back-button:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:var(--shadow-light)}.stream-meta{flex:1}.stream-title{font-size:2.5rem;font-weight:700;margin:0 0 .5rem}.stream-stats{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.viewer-count{font-size:.9rem;font-weight:500}.player-wrapper{padding:2rem;max-width:1400px;margin:0 auto}.video-container{position:relative;background:#000;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-heavy);aspect-ratio:16/9}.video-player{width:100%;height:100%;border-radius:var(--border-radius)}.video-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.video-loading-overlay p{margin-top:1rem;font-size:1.1rem;color:#fff}.player-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px}.player-loading p{font-size:1.2rem;margin:0;opacity:.9}.player-error{text-align:center;padding:3rem;background:var(--glass-bg);border-radius:var(--border-radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border)}.error-icon{font-size:4rem;margin-bottom:1rem}.player-error h2,.player-error h3{color:#fca5a5;margin-bottom:1rem;font-size:2rem}.player-error p{margin-bottom:2rem;font-size:1.1rem;opacity:.9;line-height:1.6}.error-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.retry-button{background:var(--button-primary);color:#fff;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-small);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.retry-button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #3b82f64d}.back-link{background:var(--glass-bg);color:var(--text-primary);text-decoration:none;padding:.75rem 2rem;border-radius:var(--border-radius-small);font-size:1rem;font-weight:500;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border)}.back-link:hover{background:#ffffff4d;transform:translateY(-2px)}.player-info{max-width:1400px;margin:0 auto;padding:2rem}.stream-details,.player-controls-info{background:var(--glass-bg);padding:2rem;border-radius:var(--border-radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border)}.stream-details h3,.player-controls-info h3{font-size:1.5rem;font-weight:600;margin:0 0 1.5rem;color:#e0e7ff}.detail-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.detail-item:last-child{border-bottom:none;margin-bottom:0}.detail-label{font-weight:500;opacity:.8}.detail-value{font-weight:600}.status-live{color:#fca5a5;font-weight:600}.status-offline{color:#9ca3af;font-weight:600}.player-controls-info ul{list-style:none;padding:0;margin:0}.player-controls-info li{padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:1rem}.player-controls-info li:last-child{border-bottom:none}.player-controls-info kbd{padding:.25rem .5rem;border-radius:6px;font-size:.9rem;font-weight:600;min-width:3rem;text-align:center}@media (max-width: 768px){.player-header{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.5rem}.stream-title{font-size:2rem}.stream-stats{gap:1rem}.player-wrapper,.player-info{padding:1rem}.stream-details,.player-controls-info{padding:1.5rem}.error-actions{flex-direction:column;align-items:center}}@media (max-width: 480px){.stream-title{font-size:1.5rem}.live-badge,.viewer-count{font-size:.8rem;padding:.4rem .8rem}.back-button{padding:.6rem 1.2rem;font-size:.9rem}.detail-item{flex-direction:column;align-items:flex-start;gap:.5rem}}@media (prefers-color-scheme: dark){.video-container{box-shadow:var(--shadow-heavy)}}@media (prefers-reduced-motion: reduce){.live-badge{animation:none}.back-button:hover,.retry-button:hover,.back-link:hover{transform:none}}.back-button:focus,.retry-button:focus,.back-link:focus{outline:3px solid #60a5fa;outline-offset:2px}#root{max-width:1280px;margin:0 auto;padding:2rem;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)}@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{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--text-primary: white;--text-secondary: rgba(255, 255, 255, .9);--text-muted: rgba(255, 255, 255, .7);--live-gradient: linear-gradient(45deg, #ef4444, #dc2626);--button-primary: linear-gradient(45deg, #3b82f6, #1d4ed8);--shadow-light: 0 8px 32px rgba(0, 0, 0, .1);--shadow-medium: 0 20px 40px rgba(0, 0, 0, .15);--shadow-heavy: 0 20px 40px rgba(0, 0, 0, .3);--border-radius: 16px;--border-radius-small: 12px;--border-radius-large: 20px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.app-container{min-height:100vh;background:var(--primary-gradient);font-family:var(--font-family);color:var(--text-primary)}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--border-radius)}.glass-button{background:var(--glass-bg);color:var(--text-primary);border:none;padding:.75rem 1.5rem;border-radius:var(--border-radius-small);font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border)}.glass-button:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:var(--shadow-light)}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.live-badge{background:var(--live-gradient);color:#fff;padding:.5rem 1rem;border-radius:var(--border-radius-large);font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;animation:pulse-live 2s infinite;box-shadow:0 4px 12px #ef44444d}@keyframes pulse-live{0%,50%{opacity:1}51%,to{opacity:.8}}.btn-primary{background:var(--button-primary);color:#fff;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-small);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 16px #3b82f64d}.btn-secondary{background:var(--glass-bg);color:var(--text-primary);border:1px solid var(--glass-border);padding:.75rem 2rem;border-radius:var(--border-radius-small);font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-secondary:hover{background:#ffffff4d;transform:translateY(-2px)}.title-gradient{background:linear-gradient(45deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,.3)}.text-large{font-size:3rem;font-weight:700;line-height:1.2}.text-medium{font-size:2rem;font-weight:600;line-height:1.3}.text-normal{font-size:1.2rem;font-weight:400;line-height:1.5}.error-container{text-align:center;padding:3rem;background:var(--glass-bg);border-radius:var(--border-radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border)}.error-container h2,.error-container h3{color:#fca5a5;margin-bottom:1rem}.error-container p{margin-bottom:2rem;font-size:1.1rem;opacity:.9;line-height:1.6}.grid-responsive{display:grid;gap:2rem}.grid-1{grid-template-columns:1fr}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-auto{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}@media (max-width: 1024px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}@media (max-width: 768px){.text-large{font-size:2.5rem}.text-medium{font-size:1.8rem}.grid-responsive{gap:1.5rem}.grid-auto{grid-template-columns:1fr}}@media (max-width: 480px){.text-large{font-size:2rem}.text-medium{font-size:1.5rem}.text-normal{font-size:1rem}.grid-responsive{gap:1rem}}@media (prefers-reduced-motion: reduce){.loading-spinner,.live-badge{animation:none}.glass-button:hover,.btn-primary:hover,.btn-secondary:hover{transform:none}}.glass-button:focus,.btn-primary:focus,.btn-secondary:focus{outline:3px solid #60a5fa;outline-offset:2px}@media (prefers-color-scheme: dark){:root{--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1)}}