:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;justify-content:center;align-items:center;min-width:320px;min-height:100vh}h1{font-size:2em;line-height:1.1;margin-bottom:1rem}#app{width:90%;max-width:1000px;padding:2rem;text-align:center}.stats-container{display:flex;gap:2rem;margin:2rem 0;align-items:stretch}.stats{flex:1;padding:1.5rem;background:#ffffff0d;border-radius:8px}.listener-control{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;background:#ffffff0d;border-radius:8px;min-width:120px}.listener-display{text-align:center;margin-bottom:.5rem}.listener-count{font-size:1.8em;font-weight:700;color:#646cff;font-family:Courier New,Courier,monospace}.listener-label{font-size:.85em;color:#ffffffb3;margin-top:.25rem}.listener-slider{writing-mode:vertical-lr;direction:rtl;width:40px;height:300px;padding:0;margin:1rem 0}.slider-labels{display:flex;flex-direction:column;justify-content:space-between;font-size:.85em;color:#ffffff80;gap:.5rem}.status{padding:1rem;border-radius:8px;margin:1rem 0}.status.connected{background:#00ff001a;color:#4ade80}.status.disconnected{background:#ff00001a;color:#f87171}.toggle-btn{padding:.75rem 2rem;font-size:1.1em;font-weight:600;background:#646cff;color:#fff;border:none;border-radius:8px;cursor:pointer;margin:1rem 0;transition:background .3s}.toggle-btn:hover{background:#535bf2}.stat-item{display:flex;justify-content:space-between;align-items:center;margin:.75rem 0;font-size:1.1em}.stat-label{font-weight:600;color:#646cff;text-align:left;flex:0 0 auto;min-width:300px}.stat-values{display:flex;gap:1rem;justify-content:flex-start;align-items:center;flex:1;text-align:left}.stat-number{font-family:Courier New,Courier,monospace;font-variant-numeric:tabular-nums;letter-spacing:.05em}.stat-percent{color:#fff9;font-size:.95em;min-width:70px;font-family:Courier New,Courier,monospace}.savings-section{margin:3rem 0 2rem;padding:1.5rem;background:#ffffff0d;border-radius:8px}.savings-section h2{font-size:1.3em;margin:1rem 0 1.5rem;color:#646cff}.savings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}.savings-item{display:flex;justify-content:space-between;padding:.5rem 1rem;background:#0003;border-radius:6px}.savings-label{font-weight:600;color:#ffffffb3}.savings-value{font-weight:700;color:#4ade80}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}