:root{color-scheme:dark;--font-display: "Oxanium", monospace;--font-body: "Rajdhani", sans-serif;font-family:var(--font-body);background:#08090d;color:#f5f7fb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;background:#07090d}button,input,select{font:inherit}h1,h2,button,.brand-mark,.site-link,.support-links,.volume-header,.list-header,.stream-select strong,.credits,.volume-hud{font-family:var(--font-display)}button{cursor:pointer}.app-shell{position:relative;display:grid;grid-template-columns:minmax(280px,340px) 1fr;width:100vw;height:100vh;background:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(135deg,#090b10,#0d1118 52%,#07090d);background-size:32px 32px,32px 32px,auto;transition:grid-template-columns .26s ease}.app-shell.panel-collapsed{grid-template-columns:0 1fr}.control-panel{display:flex;flex-direction:column;gap:18px;min-height:0;padding:18px;border-right:1px solid rgba(255,255,255,.08);background:#0c0f14e6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden;transition:opacity .18s ease,padding .26s ease,border-color .26s ease}.panel-collapsed .control-panel{padding:0;border-color:transparent;opacity:0;pointer-events:none}.brand{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:8px;background:#f2c94c;color:#121212;font-weight:900}.brand h1{margin:0;font-size:19px;line-height:1.15;letter-spacing:0}.top-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.site-link{display:grid;place-items:center;min-height:34px;border:1px solid rgba(242,201,76,.28);border-radius:8px;background:#f2c94c1a;color:#ffe28a;font-size:12px;font-weight:900;text-decoration:none}.site-link:hover,.site-link:focus{border-color:#f2c94c8a;background:#f2c94c2e}.share-link{width:100%;color:#ffe28a}.share-link:disabled{cursor:default;opacity:.44}.support-links{display:grid;grid-template-columns:auto repeat(3,28px);gap:6px;align-items:center;margin-top:-10px;color:#aeb8c8;font-size:12px;font-weight:900}.support-links a{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#111722}.support-links a:hover{border-color:#f2c94c85;background:#f2c94c1f}.support-links img{width:17px;height:17px;object-fit:contain}.panel-toggle{position:absolute;top:50%;left:329px;z-index:12;display:grid;place-items:center;width:28px;height:58px;border:1px solid rgba(255,255,255,.1);border-left:0;border-radius:0 10px 10px 0;background:#0f141cd1;box-shadow:0 14px 34px #00000052;opacity:.68;transform:translateY(-50%);transition:left .26s ease,opacity .16s ease,background .16s ease,border-color .16s ease}.panel-toggle:hover{opacity:1;border-color:#f2c94c6b;background:#f2c94c2e}.panel-toggle.collapsed{left:0}.panel-toggle-icon{display:block;width:10px;height:10px;border-top:2px solid rgba(255,255,255,.78);border-right:2px solid rgba(255,255,255,.78);transform:rotate(-135deg)}.panel-toggle.collapsed .panel-toggle-icon{transform:rotate(45deg)}.add-form{display:grid;gap:12px}label{display:grid;gap:6px;color:#aeb8c8;font-size:12px;font-weight:700}input,select{width:100%;min-height:40px;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:0 11px;background:#111722;color:#f8fbff;outline:none}.provider-field{position:relative;z-index:14}.provider-combobox{position:relative}.provider-trigger,.provider-menu button{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:0 11px;background:#111722;color:#f8fbff;text-align:left}.provider-trigger{position:relative;padding-right:34px}.provider-trigger:after{content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;border-right:2px solid #aeb8c8;border-bottom:2px solid #aeb8c8;transform:translateY(-65%) rotate(45deg)}.provider-combobox.open .provider-trigger,.provider-trigger:focus{border-color:#f2c94c;box-shadow:0 0 0 3px #f2c94c29}.provider-trigger img,.provider-menu img,.stream-provider-icon{flex:0 0 auto;width:20px;height:20px;object-fit:contain}.provider-trigger span,.provider-menu span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.provider-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;display:grid;gap:4px;border:1px solid rgba(242,201,76,.28);border-radius:8px;padding:6px;background:#0d121afa;box-shadow:0 18px 34px #00000057}.provider-menu button{min-height:36px;border-color:transparent;background:transparent}.provider-menu button:hover,.provider-menu button.selected{border-color:#f2c94c57;background:#f2c94c1f}input:focus,select:focus{border-color:#f2c94c;box-shadow:0 0 0 3px #f2c94c29}.primary-button,.secondary-button,.preset-row button,.list-header button,.remove-button{border:0;border-radius:8px;color:#101010;font-weight:800}.primary-button{min-height:42px;background:#f2c94c}.form-actions{display:grid;grid-template-columns:1fr;gap:8px}.form-actions:has(.secondary-button){grid-template-columns:1fr 96px}.secondary-button{min-height:42px;background:#273140;color:#dce5f2}.preset-row{display:none;grid-template-columns:repeat(4,1fr);gap:8px}.preset-row button{min-height:34px;background:#273140;color:#dce5f2}.stream-list{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto}.volume-control{display:grid;gap:8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px;background:#101720}.volume-header{display:flex;align-items:center;justify-content:space-between;color:#d9e2ef;font-size:13px;font-weight:900}.volume-header strong{color:#f2c94c}.volume-control input{min-height:auto;padding:0;accent-color:#f2c94c}.volume-control input:focus{border-color:transparent;box-shadow:none}.volume-control p{margin:0;color:#8793a6;font-size:12px;line-height:1.35}.list-header{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#d9e2ef;font-size:13px;font-weight:800}.list-actions{display:flex;gap:6px;align-items:center}.list-header button{min-height:28px;padding:0 10px;background:#232b36;color:#cdd7e6;font-size:12px}.list-header button:disabled{cursor:default;opacity:.45}.empty-list{padding:16px 0;color:#778398;font-size:13px}.stream-row{display:grid;grid-template-columns:1fr 34px;gap:8px;align-items:stretch;position:relative;transition:opacity .14s ease,transform .14s ease}.stream-select{min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px;background:#121923;color:inherit;text-align:left}.stream-row.dragging{opacity:.46}.stream-row.drop-target{transform:translateY(2px)}.stream-row.drop-target:before{content:"";position:absolute;top:-5px;left:0;right:42px;height:3px;border-radius:999px;background:#f2c94c;box-shadow:0 0 16px #f2c94c94}.stream-select strong,.stream-title-text,.stream-source{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stream-select strong{font-size:13px}.stream-select strong{display:flex;align-items:center;gap:6px}.stream-title-text{min-width:0}.stream-provider-icon{width:18px;height:18px}.stream-audio-state{display:inline-grid;flex:0 0 auto;place-items:center;min-width:36px;height:18px;border:1px solid rgba(143,155,173,.28);border-radius:4px;color:#8f9bad;font-size:10px;font-weight:900;line-height:1}.stream-audio-state.audible{border-color:#f2c94c99;background:#f2c94c24;color:#ffe28a}.stream-hotkey{display:inline-grid;flex:0 0 auto;place-items:center;min-width:18px;height:18px;border-radius:4px;background:#f2c94cf0;color:#101010;font-size:11px;font-weight:900;line-height:1}.stream-source{margin-top:4px;color:#8f9bad;font-size:12px}.stream-row.active .stream-select{border-color:#f2c94c;background:#f2c94c1f}.stream-row.audible:not(.active) .stream-select{border-color:#f2c94c7a}.stream-row.offline .stream-select{border-color:#ff637a94;background:#ff637a14}.stream-row.offline .stream-title-text,.stream-row.offline .stream-source{color:#ff9dac}.stream-row.offline .stream-audio-state{border-color:#ff637a6b;color:#ff9dac}.remove-button{background:#2a1b1f;color:#ffb7c1;font-size:20px}.stage{position:relative;min-width:0;min-height:0;margin:0;padding:5px;overflow:hidden;border:0;border-radius:0;outline:0;background:transparent}.player-tile{position:absolute;overflow:hidden;border:2px solid rgba(255,255,255,.14);border-radius:8px;background:#050608;box-shadow:0 18px 42px #00000059;will-change:left,top,width,height;transition:left .46s cubic-bezier(.22,1,.36,1),top .46s cubic-bezier(.22,1,.36,1),width .46s cubic-bezier(.22,1,.36,1),height .46s cubic-bezier(.22,1,.36,1),border-color .18s ease,box-shadow .18s ease}.player-tile iframe{position:absolute;inset:32px 0 0;width:100%;height:calc(100% - 32px);border:0;background:#000;overflow:hidden;pointer-events:none;visibility:visible}.player-tile.offline:not(.twitch) iframe{opacity:0}.player-tile.chat-tile{background:#0b1018}.player-tile.chat-tile:after{display:none}.player-tile .chat-frame{inset:32px 0 0;height:calc(100% - 32px);pointer-events:auto}.chat-tile-header{position:absolute;top:0;left:0;right:0;z-index:11;display:flex;align-items:center;gap:0;height:32px;max-width:100%;padding:3px 6px;border-bottom:1px solid rgba(242,201,76,.18);background:linear-gradient(180deg,#0b0e13fa,#080a0eeb);color:#ffe28a;pointer-events:none}.chat-title{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;padding-right:4px;overflow:hidden;font-size:13px;font-weight:900;line-height:1;pointer-events:none}.chat-title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-close-button{position:relative;flex:0 0 auto;width:24px;height:24px;border:1px solid rgba(242,201,76,.28);border-radius:6px;padding:0;background:#ffffff0a;color:#ffe28a;font-size:20px;font-weight:900;line-height:1;pointer-events:auto;transition:border-color .14s ease,background .14s ease}.chat-close-button:hover{border-color:#f2c94ce6;background:#14181ee0}.twitch-embed-host{position:absolute;top:32px;left:0;width:var(--twitch-frame-width, 100%);height:var(--twitch-frame-height, calc(100% - 32px) );overflow:hidden;pointer-events:auto;transform:scale(var(--twitch-frame-scale-x, 1),var(--twitch-frame-scale-y, 1));transform-origin:top left}.twitch-embed-host iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;background:#000;pointer-events:auto;visibility:visible}.player-tile:after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:6;height:clamp(24px,7%,48px);background:linear-gradient(to top,#000000d1,#0000);pointer-events:none}.player-tile:has(.twitch-embed-host):after{display:none}.player-tile.twitch:after{display:none}.player-tile.twitch{transition:border-color .18s ease,box-shadow .18s ease}.player-tile.youtube,.player-tile.vkvideo,.player-tile.goodgame{will-change:auto;transition:border-color .18s ease,box-shadow .18s ease}.player-tile:has(.twitch-embed-host){transition:border-color .18s ease,box-shadow .18s ease}.player-tile.selected{border-color:#f2c94c;box-shadow:inset 0 0 0 1px #f2c94cb8,0 0 0 2px #f2c94c57,0 24px 64px #00000080;z-index:3}.player-tile.offline{border-color:#ff637a94}.player-tile.side{z-index:2}.twitch-activation-hitbox{position:absolute;inset:32px 0 0;z-index:7;border:0;padding:0;background:transparent;color:transparent;cursor:pointer}.channel-tools{position:absolute;top:0;left:0;right:0;z-index:11;display:flex;align-items:center;gap:4px;height:32px;max-width:100%;padding:3px 6px;border-bottom:1px solid rgba(242,201,76,.18);background:linear-gradient(180deg,#0b0e13fa,#080a0eeb);pointer-events:auto}.channel-badge{display:flex;flex:1 1 auto;align-items:center;gap:6px;min-width:0;min-height:24px;border:0;border-radius:6px;padding:0 6px 0 0;background:transparent;color:#ffe28a;font-size:11px;font-weight:900;line-height:1.1;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}.channel-badge:hover{border-color:inherit;background:inherit}.channel-hotkey{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;background:#f2c94c;color:#101010;font-size:11px;font-weight:900;line-height:18px;text-align:center}.channel-provider-icon{flex:0 0 auto;width:16px;height:16px;object-fit:contain}.channel-name{min-width:0;overflow:hidden;font-size:13px;font-weight:900;line-height:1;text-overflow:ellipsis;white-space:nowrap}.tile-icon-button{position:relative;flex:0 0 0;width:0;height:24px;border:0 solid rgba(242,201,76,.28);border-radius:6px;padding:0;background:#ffffff0a;color:#ffe28a;-webkit-backdrop-filter:none;backdrop-filter:none;margin-left:0;opacity:0;overflow:hidden;pointer-events:none;transform:translateY(-2px);transition:border-color .14s ease,background .14s ease}.channel-tools:hover .tile-icon-button,.channel-tools:focus-within .tile-icon-button{flex-basis:24px;width:24px;border-width:1px;margin-left:4px;opacity:1;pointer-events:auto;transform:translateY(0)}.channel-tools:hover .quality-picker,.channel-tools:focus-within .quality-picker{flex-basis:48px;width:48px;margin-left:4px;opacity:1;pointer-events:auto;transform:translateY(0)}.tile-icon-button.is-hidden{display:none}.tile-icon-button:hover{border-color:#f2c94ce6;background:#14181ee0}.tile-icon-button svg{position:absolute;inset:4px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.tile-icon-button img{position:absolute;inset:4px;width:16px;height:16px;object-fit:contain}.tile-icon-button .play-symbol,.tile-icon-button .pause-symbol{fill:currentColor;stroke:none}.quality-picker{flex:0 0 0;width:0;min-height:24px;margin-left:0;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-2px);transition:none}.quality-picker select{width:100%;min-height:24px;border:1px solid rgba(242,201,76,.28);border-radius:6px;padding:0 6px;background:#ffffff0a;color:#ffe28a;font-family:var(--font-display);font-size:10px;font-weight:900;outline:none;-webkit-backdrop-filter:none;backdrop-filter:none}.quality-picker select:focus{border-color:#f2c94ce6;box-shadow:none}.offline-cover{position:absolute;inset:32px 0 0;z-index:9;display:grid;place-content:center;justify-items:center;gap:10px;padding:18px;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),#07090df0;background-size:24px 24px,24px 24px,auto;color:#f4f7fb;text-align:center;pointer-events:none}.offline-mark{border:1px solid rgba(242,201,76,.44);border-radius:6px;padding:7px 12px;background:#f2c94c1a;color:#ffe28a;font-family:var(--font-display);font-size:clamp(18px,3.8vw,34px);font-weight:900;line-height:1}.offline-cover strong{max-width:100%;overflow:hidden;color:#f4f7fb;font-family:var(--font-display);font-size:clamp(15px,2.4vw,22px);line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.stage-hint{position:absolute;top:12px;left:12px;z-index:8;max-width:min(520px,calc(100% - 24px));border:1px solid rgba(242,201,76,.24);border-radius:8px;padding:9px 12px;background:#101216c7;color:#ffe28a;font-size:13px;font-weight:800;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stage-empty{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:24px;text-align:center;color:#cbd6e6}.stage-empty h2{margin:0;font-size:24px}.credits{margin-top:auto;color:#97a2b4b8;font-size:14px;font-weight:900;letter-spacing:0;text-align:center}.volume-hold-progress{--progress: 0;position:fixed;z-index:29;width:24px;height:24px;border-radius:50%;background:conic-gradient(#f2c94c calc(var(--progress) * 1turn),#ffffff29 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);box-shadow:0 0 0 1px #f2c94c38,0 8px 18px #00000061;pointer-events:none}.volume-hud{position:fixed;z-index:30;display:grid;justify-items:center;gap:5px;width:42px;pointer-events:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}.volume-hud-track{position:relative;width:12px;height:86px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:#070a0eb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.volume-hud-track span{position:absolute;left:2px;right:2px;bottom:2px;min-height:3px;border-radius:inherit;background:linear-gradient(#ffe28a,#f2c94c)}.volume-hud strong{border-radius:999px;padding:3px 6px;background:#070a0eb8;color:#ffe28a;font-size:11px;line-height:1}.mute-toast{position:fixed;left:50%;bottom:38px;z-index:31;border:1px solid rgba(242,201,76,.46);border-radius:8px;padding:9px 14px;background:#070a0ed1;color:#ffe28a;font-family:var(--font-display);font-size:13px;font-weight:900;line-height:1;box-shadow:0 14px 34px #0000005c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;transform:translate(-50%);animation:mute-toast-in .16s ease-out}.share-toast{position:fixed;z-index:32;display:grid;gap:5px;width:min(340px,calc(100vw - 24px));border:1px solid rgba(242,201,76,.46);border-radius:8px;padding:9px 11px;background:#070a0eeb;color:#ffe28a;box-shadow:0 14px 34px #0000005c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;animation:share-toast-in .16s ease-out}.share-toast span{font-family:var(--font-display);font-size:12px;font-weight:900;line-height:1}.share-toast strong{overflow:hidden;color:#cdd7e6;font-size:11px;font-weight:700;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}@keyframes mute-toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes share-toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:860px){body{overflow:auto}.app-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(520px,1fr);min-height:100vh;height:auto}.app-shell.panel-collapsed{grid-template-columns:1fr;grid-template-rows:0 minmax(520px,1fr)}.control-panel{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.stage{height:min(72vh,720px);margin:0}.panel-toggle,.panel-toggle.collapsed{top:auto;left:50%;bottom:calc(min(72vh,720px) + 8px);width:58px;height:28px;border:1px solid rgba(255,255,255,.1);border-bottom:0;border-radius:10px 10px 0 0;transform:translate(-50%)}.panel-toggle-icon{transform:rotate(-45deg)}.panel-toggle.collapsed .panel-toggle-icon{transform:rotate(135deg)}}