:root{color-scheme:dark;--bg: #0d0d0f;--surface: #17171a;--border: #2a2a30;--text: #f3f3f5;--muted: #9b9ba8;--accent: #9146ff;--kick: #53fc18;--danger: #ff5d5d;--radius: 10px;--grid-columns: 2}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-x:hidden;-webkit-text-size-adjust:100%}#app{min-height:100vh;display:flex;flex-direction:column}.toolbar{flex-shrink:0;display:flex;flex-direction:column;gap:6px;padding:14px 18px 10px;border-bottom:1px solid var(--border);background:var(--surface)}.toolbar__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}.toolbar__title{margin:0;flex:0 0 auto;font-size:1.1rem;font-weight:650;letter-spacing:.02em}.toolbar__brand{color:inherit;text-decoration:none}.toolbar__brand:hover{color:color-mix(in srgb,var(--accent) 80%,white)}.toolbar__form{display:flex;flex:1 1 280px;gap:8px;min-width:0;align-items:center}.toolbar__platform{display:inline-flex;flex:0 0 auto;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg)}.toolbar__platform-btn{margin:0;padding:9px 12px;border:0;border-radius:0;background:transparent;color:var(--muted);font:inherit;font-weight:650;font-size:.82rem;cursor:pointer;white-space:nowrap}.toolbar__platform-btn+.toolbar__platform-btn{border-left:1px solid var(--border)}.toolbar__platform-btn:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}.toolbar__platform-btn.is-active[data-platform=twitch]{background:color-mix(in srgb,var(--accent) 28%,transparent);color:#e6d4ff}.toolbar__platform-btn.is-active[data-platform=kick]{background:color-mix(in srgb,var(--kick) 22%,transparent);color:#c8ffb0}.toolbar__hint{margin:0;padding:0 2px 2px;color:color-mix(in srgb,var(--muted) 50%,var(--bg));font-size:.7rem;line-height:1.35;word-break:break-all}.toolbar__form input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}.toolbar__form input:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px}.toolbar__form input.toolbar__input--error{border-color:var(--danger)}.toolbar__form>button[type=submit]{flex:0 0 auto;padding:10px 16px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}.toolbar__form>button[type=submit]:hover{filter:brightness(1.08)}.toolbar__chat-toggle{flex:0 0 auto;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}.toolbar__chat-toggle:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}.main-layout{flex:1;display:flex;align-items:flex-start;min-width:0}.main-layout__streams{flex:1;min-width:0;display:flex;flex-direction:column}.stream-area{position:relative;flex:1;display:flex;flex-direction:column;min-width:0}.stream-area:has(#empty-state:not([hidden])){min-height:clamp(220px,45vh,640px)}.stream-grid{flex:1;display:grid;grid-template-columns:repeat(var(--grid-columns, 1),minmax(0,1fr));gap:12px;padding:12px;align-content:start;min-width:0;width:100%}.chat-panel{width:min(340px,34vw);flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;align-self:flex-start;height:100vh;max-height:100vh;border-left:1px solid var(--border);background:var(--surface);min-height:0}.chat-panel[hidden]{display:none!important}.chat-panel__header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}.chat-panel__label{flex:0 0 auto;font-size:.82rem;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.chat-panel__select{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}.chat-panel__select:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px}.chat-panel__body{flex:1;min-height:0;display:flex;overflow:hidden}.chat-panel__iframe{flex:1;width:100%;min-height:280px;border:0}.chat-panel__message{margin:auto;padding:24px 20px;max-width:260px;text-align:center;color:var(--muted);line-height:1.55}.stream-card{display:flex;flex-direction:column;width:100%;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.stream-card__header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border)}.stream-card__badge{flex:0 0 auto;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.stream-card__badge--twitch{background:color-mix(in srgb,var(--accent) 25%,transparent);color:#d5b8ff}.stream-card__badge--kick{background:color-mix(in srgb,var(--kick) 18%,transparent);color:#b8ff9d}.stream-card__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.stream-card__controls{display:flex;gap:6px}.stream-card__btn{padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);font-size:.78rem;cursor:pointer}.stream-card__btn:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}.stream-card__btn--danger{color:#ffb4b4;border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}.stream-card__player{position:relative;width:100%;aspect-ratio:16 / 9;background:#000}.stream-card__iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.stream-card__tip{margin:0;padding:6px 10px 8px;border-top:1px solid var(--border);color:color-mix(in srgb,var(--muted) 85%,var(--kick));font-size:.72rem;line-height:1.35}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;color:var(--muted);font-size:1.05rem;line-height:1.5;pointer-events:none}.empty-state[hidden]{display:none}html.show-welcome{overflow:hidden}html.show-welcome #app{pointer-events:none;-webkit-user-select:none;user-select:none}.welcome-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}html.show-welcome .welcome-modal{display:flex}.welcome-modal__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.welcome-modal__panel{position:relative;z-index:1;width:min(720px,100%);margin:min(3vh,20px) auto;max-height:none;overflow:visible;padding:24px 22px 20px;border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);background:var(--surface);box-shadow:0 24px 64px #00000073}.welcome-modal__enter{display:block;width:100%;margin-top:24px;padding:12px 18px;border:0;border-radius:8px;background:var(--accent);color:#fff;font:inherit;font-size:1rem;font-weight:650;cursor:pointer;position:sticky;bottom:0}.welcome-modal__enter:hover{filter:brightness(1.08)}.site-footer{flex-shrink:0;border-top:1px solid var(--border);background:var(--surface);padding:14px 18px}.site-intro{max-width:720px;margin:0 auto}.site-intro h2{margin:0 0 10px;font-size:1.25rem;font-weight:650}.site-intro h3{margin:24px 0 10px;font-size:.95rem;font-weight:650;color:color-mix(in srgb,var(--text) 92%,var(--muted))}.site-intro p{margin:0 0 14px;color:var(--muted);line-height:1.55}.site-intro a{color:color-mix(in srgb,var(--accent) 75%,white);text-decoration:none}.site-intro a:hover{text-decoration:underline}.site-intro code{padding:1px 6px;border-radius:4px;background:color-mix(in srgb,var(--text) 8%,transparent);font-size:.92em}.site-intro__example{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);word-break:break-all}.site-intro__example a{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.88rem}.site-footer__source{max-width:720px;margin:0 auto 10px;text-align:center;color:var(--muted);font-size:.88rem}.site-footer__source a{color:color-mix(in srgb,var(--text) 88%,var(--accent));text-decoration:none}.site-footer__source a:hover{text-decoration:underline}.site-credits{max-width:720px;margin:0 auto;text-align:center}.site-credits p{margin:0;color:var(--muted);font-size:.88rem}.site-credits a{color:color-mix(in srgb,var(--text) 88%,var(--accent));text-decoration:none}.site-credits a:hover{text-decoration:underline}.usage-table-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--border);border-radius:8px}.usage-table{width:100%;border-collapse:collapse;font-size:.92rem}.usage-table th,.usage-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}.usage-table tr:last-child td,.usage-table tr:last-child th{border-bottom:0}.usage-table th{color:var(--text);background:color-mix(in srgb,var(--text) 4%,transparent);font-weight:650}.usage-table td{color:var(--muted)}@media(max-width:640px){.main-layout{flex-direction:column}.stream-area{min-height:clamp(200px,38vh,480px)}.empty-state{font-size:1rem;padding:20px 16px}.chat-panel{display:none}.stream-grid{grid-template-columns:1fr;gap:16px;padding:12px 12px 16px}.stream-card__controls{margin-left:auto}.stream-card__btn{min-height:36px;padding:6px 12px;font-size:.82rem}.toolbar{padding:12px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))}.toolbar__row{flex-direction:column;align-items:stretch}.toolbar__title{width:100%}.toolbar__form{flex-direction:column;width:100%}.toolbar__platform{width:100%}.toolbar__platform-btn{flex:1;min-height:44px}.toolbar__form input,.toolbar__form>button[type=submit],.toolbar__chat-toggle{width:100%;min-height:44px}.site-footer{padding:12px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.welcome-modal{padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.welcome-modal__panel{margin:4px auto;padding:14px 12px 12px;border-radius:10px}.welcome-modal__enter{margin-top:14px;min-height:44px}.site-intro h2{font-size:1.05rem;margin-bottom:8px}.site-intro h3{margin:14px 0 8px;font-size:.9rem}.site-intro p{margin:0 0 10px;font-size:.88rem}.usage-table{font-size:.8rem}.usage-table th,.usage-table td{padding:7px 8px}.site-intro__example{padding:8px 10px;font-size:.8rem}.stream-card__header{padding:10px 12px}.stream-card__title{flex:1 1 100%;order:2}.stream-card__badge{order:1}.stream-card__controls{order:3;width:100%;justify-content:flex-end}}@media(min-width:641px)and (max-width:1024px){.chat-panel{width:min(300px,32vw)}.stream-card__btn{min-height:36px;padding:6px 12px}.toolbar__form input,.toolbar__form>button[type=submit],.toolbar__chat-toggle,.toolbar__platform-btn{min-height:40px}}