*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#111;color:#eee}main{padding:1rem;max-width:1100px;margin:0 auto}h1{font-size:1.25rem;margin:0}.site-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid #2a2a2a;text-align:center}.tagline{margin:.25rem 0 0;font-size:.8rem;color:#888}.layout{display:flex;flex-direction:column;gap:1rem}.player-pane{width:100%}.now-playing{font-size:1.05rem;font-weight:600;margin:0 0 .5rem}.player video{width:100%;background:#000;aspect-ratio:16/9;border-radius:8px}.error,.hint{color:#aaa}.error{color:#e88;margin-top:.5rem}.channel-strip{display:flex;gap:.75rem;overflow-x:auto;padding:.5rem .25rem 1rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.channel-strip::-webkit-scrollbar{height:8px}.channel-strip::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.channel-strip::-webkit-scrollbar-track{background:transparent}.channel-card{position:relative;flex:0 0 auto;width:clamp(96px,22vw,132px);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem .4rem;background:#1a1a1a;border:2px solid transparent;border-radius:10px;color:#eee;cursor:pointer;transition:border-color .15s,background .15s}.channel-card:hover{background:#222}.channel-card.active{border-color:#4a90d9;background:#1f2d3d}.logo-wrap{width:100%;height:56px;display:flex;align-items:center;justify-content:center;background:#000;border-radius:6px;overflow:hidden}.logo-wrap img{max-width:100%;max-height:100%;object-fit:contain}.logo-fallback{font-size:1.5rem;font-weight:700;color:#888}.card-name{font-size:.75rem;line-height:1.2;text-align:center;width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.badge{position:absolute;top:.4rem;right:.4rem;font-size:.6rem;font-weight:600;padding:.1rem .3rem;border-radius:4px;background:rgba(0,0,0,.7);color:#9cd}