.logo{justify-content:center;align-items:center;gap:12px;display:flex}.logo-mark{width:48px;height:36px}.logo-text{flex-direction:column;display:flex}.logo-name{letter-spacing:6px;color:#fff;font-size:26px;font-weight:200;line-height:1}.logo-dot{background:linear-gradient(135deg,#4a9eff,#8b5cf6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.logo-tagline{letter-spacing:3px;text-transform:uppercase;color:var(--color-text-dim);margin-top:2px;font-size:10px}.stream-card{background:var(--color-surface);cursor:pointer;text-align:left;color:var(--color-text);font-family:inherit;font-size:inherit;border:1px solid #0000;border-radius:10px;flex-direction:column;gap:4px;min-height:48px;padding:14px 12px;transition:border-color .15s,background .15s;display:flex}.stream-card:hover{border-color:var(--color-accent)}.stream-card:active{transform:scale(.98)}.stream-card.active{border-color:var(--color-accent);background:linear-gradient(135deg, var(--color-surface) 0%, #16213e 100%)}.stream-card-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.stream-card-name{color:#fff;font-size:14px;font-weight:500}.stream-card-subtitle{color:var(--color-text-muted);font-size:11px}.playing-indicator{flex-shrink:0;align-items:flex-end;gap:2px;height:12px;display:flex}.playing-indicator span{background:var(--color-accent);opacity:.4;border-radius:1px;width:3px;height:4px;display:block}.playing-indicator.playing span{opacity:1;animation:.8s ease-in-out infinite alternate eq-bar}.playing-indicator.playing span:first-child{height:6px;animation-duration:.6s}.playing-indicator.playing span:nth-child(2){height:10px;animation-duration:.8s}.playing-indicator.playing span:nth-child(3){height:4px;animation-duration:.5s}@keyframes eq-bar{0%{height:3px}to{height:12px}}.volume-slider{flex-direction:column;gap:6px;display:flex}.volume-slider-header{color:var(--color-text-dim);letter-spacing:1px;justify-content:space-between;font-size:11px;display:flex}.volume-slider-label{text-transform:uppercase}.volume-slider-input{appearance:none;cursor:pointer;background:0 0;outline:none;width:100%;height:44px;margin:0}.volume-slider-input::-webkit-slider-runnable-track{background:var(--color-surface);border-radius:2px;height:4px}.volume-slider-input::-moz-range-track{background:var(--color-surface);border:none;border-radius:2px;height:4px}.volume-slider-input::-webkit-slider-thumb{appearance:none;background:var(--slider-color,var(--color-accent));cursor:pointer;border:none;border-radius:50%;width:20px;height:20px;margin-top:-8px}.volume-slider-input::-moz-range-thumb{background:var(--slider-color,var(--color-accent));cursor:pointer;border:none;border-radius:50%;width:20px;height:20px}.app{flex-direction:column;max-width:900px;min-height:100vh;margin:0 auto;padding:0 16px;display:flex}.app-header{text-align:center;padding:32px 0 24px;position:relative}.github-link{color:var(--color-text-dim);transition:color .15s;position:absolute;top:32px;right:0}.github-link:hover{color:var(--color-text)}.app-title{letter-spacing:4px;color:#fff;font-size:24px;font-weight:300}.app-content{flex-direction:column;flex:1;gap:24px;display:flex}@media (width>=640px){.app-content{flex-direction:row;gap:32px}.app-section{flex:1}}.app-section-title{letter-spacing:2px;text-transform:uppercase;color:var(--color-text-dim);margin-bottom:12px;font-size:11px;font-weight:400}.app-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.app-controls{background:var(--color-bg);border-top:1px solid var(--color-surface);flex-direction:column;gap:16px;margin-top:24px;padding:16px 0 24px;display:flex;position:sticky;bottom:0}@media (width>=640px){.app-controls{flex-direction:row;gap:32px}.app-controls>*{flex:1}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#0d1117;--color-surface:#1a1a2e;--color-surface-hover:#222240;--color-text:#e0e0e0;--color-text-muted:#888;--color-text-dim:#555;--color-accent:#4a9eff;--color-accent-secondary:#8b5cf6;--color-live:#4ade80;--color-idle:#666;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"SF Mono", "Fira Code", monospace}html,body{height:100%}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100%}