@import"https://fonts.googleapis.com/css2?family=Krona+One&display=swap";@import"https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap";.color-picker-inline{display:flex;align-items:center;gap:.75rem}.color-picker-inline input[type=color]{padding-left:.15rem;padding-right:.15rem;background-color:#545872}.opacity-control{flex:1;display:flex;align-items:center;gap:.5rem}.opacity-control label{font-size:.75rem;color:#999;white-space:nowrap}.opacity-slider{flex:1}.landing-page{display:flex;align-items:center;justify-content:flex-start;min-height:calc(100vh - 3rem);padding:2rem 0}.landing-content{max-width:50rem;width:100%;text-align:left}.landing-content h1{font-size:2.5rem;margin-bottom:1rem;font-family:Krona One;color:#fff}.landing-content>p{font-size:1.125rem;color:#ccc;margin-bottom:2rem}.landing-description{border-radius:.5rem;margin-top:4rem;margin-bottom:4rem;text-align:left}.landing-description p{margin-bottom:1rem;color:#ccc}.landing-description p:last-child{margin-bottom:0}.landing-description ul{list-style:none;padding-left:0;margin:1rem 0;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.landing-description ul li{padding:.5rem;background:#333;border-radius:.25rem;color:#fff}.landing-description ul li:before{content:"•";margin-right:.5rem;color:#667eea}.landing-actions{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:start;margin-top:2rem}.landing-action-section{display:flex;flex-direction:column;gap:1rem}.landing-action-section h3{font-size:1.125rem;color:#fff;margin-bottom:.5rem}.landing-action-section .form-group{margin-bottom:0}.landing-action-section .form-group input[type=text]{text-align:left;font-size:.75rem}.landing-divider{padding-top:3rem;color:#ccc;font-size:1rem;font-weight:500}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:.5rem;padding:1rem;margin-bottom:1.5rem;color:#ef4444;text-align:center}@media (max-width: 768px){.landing-actions{grid-template-columns:1fr;gap:1.5rem}.landing-divider{padding-top:0;text-align:center}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inconsolata,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#05081a;color:#fff}.app{max-width:75rem;margin:0 auto;padding:0 1.5rem 1.5rem}.header{position:sticky;top:0rem;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:2rem;padding-top:1.5rem;padding-bottom:1rem;border-bottom:1px solid #545872;background:#05081a}.header .header-content{flex:1}.header .header-content h1{font-size:1.5rem;margin-bottom:.5rem;font-family:Krona One;color:#fff}.header .header-content p{color:#999;font-size:1rem}.header .header-buttons{display:flex;gap:.5rem;flex-shrink:0}.header .header-buttons button{white-space:nowrap}.status-bar{display:flex;gap:1.5rem;margin-bottom:2rem;border-radius:.5rem}.status-item{flex:1}.status-item label{display:block;font-size:.75rem;color:#999;margin-bottom:.25rem;text-transform:uppercase}.status-item .value{font-size:1rem;font-weight:600}.status-indicator{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.5rem}.status-indicator.connected{background:#35e165}.status-indicator.disconnected{background:#6b7280}.status-indicator.connecting{background:#fbbf24;animation:pulse 1.5s ease-in-out infinite}.status-indicator.error{background:#ef4444}.status-indicator.running{background:#3b82f6}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.section{border-radius:.25rem;margin-bottom:1.5rem}.section h2{font-size:1.5rem;margin-bottom:1rem;color:#fff}.section.url label{margin-bottom:.5rem;text-transform:uppercase;font-size:.75rem;color:#ccc}.section.styling{margin-top:2rem}.section.danger-zone{margin-top:3rem;padding:1.5rem;border:0px solid #ef4444;border-radius:.25rem;background:#ef44440d}.section.danger-zone h2{color:#fff}.section.danger-zone p{margin-bottom:1rem;color:#ccc}.layout-options{display:flex;gap:1rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #545872}.layout-options .form-group{margin-bottom:0;flex:1}.styling-container{display:flex;gap:1.5rem}.styling-container.horizontal{flex-direction:column}.styling-container.horizontal .preview-area{width:100%}.styling-container.horizontal .styling-controls{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.styling-container.vertical{flex-direction:row}.styling-container.vertical .preview-area{flex:1;min-width:0}.styling-container.vertical .styling-controls{flex:1;display:flex;flex-direction:column;gap:1rem}.styling-container h3{font-size:1rem;margin-bottom:1rem;color:#fff}.preview-area .preview-container{display:flex;gap:.5rem;padding:1rem;border-radius:.5rem;position:relative;overflow:hidden}.preview-area .preview-container:before,.preview-area .preview-container:after{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;content:"";background-color:#05081a;background-size:cover;background-repeat:no-repeat;background-position:center center;transition:all .15s ease-in-out;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:0}.preview-area .preview-container:before{background-image:radial-gradient(at 27% 68%,hsl(97,90%,69%) 0px,transparent 50%),radial-gradient(at 69% 18%,hsl(290,84%,61%) 0px,transparent 50%),radial-gradient(at 7% 47%,hsl(144,93%,72%) 0px,transparent 50%),radial-gradient(at 41% 29%,hsl(226,99%,78%) 0px,transparent 50%),radial-gradient(at 22% 25%,hsl(60,92%,62%) 0px,transparent 50%),radial-gradient(at 83% 75%,hsl(283,91%,77%) 0px,transparent 50%),radial-gradient(at 93% 60%,hsl(179,64%,60%) 0px,transparent 50%);animation-name:animatedgradienbefore}.preview-area .preview-container:after{background-image:radial-gradient(at 64% 3%,hsl(354,91%,76%) 0px,transparent 50%),radial-gradient(at 94% 67%,hsl(84,60%,67%) 0px,transparent 50%),radial-gradient(at 79% 48%,hsl(48,74%,61%) 0px,transparent 50%),radial-gradient(at 44% 1%,hsl(25,85%,79%) 0px,transparent 50%),radial-gradient(at 65% 99%,hsl(229,81%,76%) 0px,transparent 50%),radial-gradient(at 59% 85%,hsl(138,82%,73%) 0px,transparent 50%),radial-gradient(at 68% 23%,hsl(177,72%,68%) 0px,transparent 50%);animation-name:animatedgradientafter}@keyframes animatedgradienbefore{0%{opacity:1}to{opacity:0}}@keyframes animatedgradientafter{0%{opacity:0}to{opacity:1}}.preview-area .preview-container.vertical{min-height:400px}.preview-area .preview-message{padding:.5rem .75rem;border-radius:.375rem;flex-shrink:0}.preview-area .preview-message-header{display:flex;align-items:center;gap:.375rem;margin-bottom:.25rem}.preview-area .preview-message-text{line-height:1.4;overflow-wrap:anywhere;word-break:break-word}.preview-area .preview-username{font-weight:700}.preview-area .preview-message-compact img{display:inline-block;vertical-align:middle;margin-right:.375rem}.preview-area .preview-message-compact .preview-username{display:inline;margin-right:.25rem}.preview-area .preview-message-compact .preview-message-text{display:inline}.preview-area .preview-message.compact .preview-message-header{margin-bottom:0}.styling-controls .control-section h4{font-size:.875rem;font-weight:600;text-transform:uppercase;color:#ccc;margin-bottom:1rem;padding-bottom:.5rem}.styling-controls .control-section:not(:last-child){margin-bottom:2rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:1rem;color:#ccc}.form-group input[type=text],.form-group input[type=number],.form-group select{width:100%;padding:.5rem;background:#000;border:1px solid #545872;border-radius:.25rem;color:#fff;font-size:1rem}.form-group input[type=text]:hover,.form-group input[type=number]:hover,.form-group select:hover{border-color:#fff}.form-group input[type=text]:focus,.form-group input[type=number]:focus,.form-group select:focus{outline:none;border-color:#fff}.form-group select{padding:.5rem 2.5rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .5rem center;background-size:1rem;cursor:pointer}.form-group select:focus{outline:none;border-color:#fff}.form-group input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;background-color:#545872;height:4px;border-radius:.5rem}.form-group input[type=color]{width:2.5rem;height:2.5rem;padding-left:.15rem;padding-right:.15rem;background-color:#545872;border:rgba(0,0,0,0);border-radius:.25rem;cursor:pointer}.form-group input[type=color]:focus{outline:none;border-color:#667eea}.form-group input[type=checkbox]{margin-right:.5rem}.form-group.options{display:flex;align-items:center;justify-content:space-between}.form-group.options label{margin-bottom:0}.button{padding:.5rem 1rem;background:#000;color:#fff;border:1px solid #545872;border-radius:.25rem;cursor:pointer;font-size:.75rem;font-weight:600;transition:background .2s}.button:hover{background:#fff;color:#000}.button:disabled{background:#444;cursor:not-allowed}.button.secondary{background:#0000;border:none}.button.secondary:hover{text-decoration:underline;color:#fff}.button.danger{border:none;background:#ef4444}.button.danger:hover{background:#dc2626}.button.pending-save{border:1px solid #35e165;background:#35e165;color:#000}.button.pending-save:hover{background:#2bc455;color:#000}.button.primary{background-color:#fff;color:#000}.button.primary:hover{background-color:#000;color:#fff;border-color:#fff}.button:disabled{opacity:.3;background-color:#0000}.button:disabled:hover{color:#fff}.url-display{display:flex;gap:.5rem;align-items:center;padding:.5rem 1rem;background:#000;border:1px solid #545872;border-radius:.25rem;margin-top:.5rem}.url-display code{flex:1;font-family:Courier New,monospace;color:#fff;font-size:.75rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.grid.channels{margin-top:4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.grid.channels .section{margin-bottom:1rem}.platform-section{border-radius:1rem}.platform-section h3{font-size:1rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.platform-section h3.platform-header{justify-content:space-between;gap:.75rem}.toggle{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;cursor:pointer;width:1.75rem;height:1rem;background:#000;border-radius:.25rem;position:relative;transition:background-color .3s ease;padding:0}.toggle.on{background:#35e165}.toggle.off{background:#545872}.toggle .toggle-knob{position:absolute;top:2px;left:2px;width:.75rem;height:.75rem;background:#fff;border-radius:.25rem;transition:left .3s ease;box-shadow:0 0 1px #00000080}.toggle.on .toggle-knob{left:calc(100% - .75rem - 2px)}.toggle:focus-visible{outline:2px solid #667eea;outline-offset:2px}.channels-list{display:flex;flex-direction:column;gap:.5rem}.channel-item{display:flex;gap:.5rem;align-items:center}.channel-item input{flex:1}.icon-button{padding:.5rem;background:#333;border:none;border-radius:.25rem;color:#fff;cursor:pointer;font-size:1rem}.icon-button:hover{background:#444}