:root{--bg-dark:#0f172a;--bg-darker:#020617;--bg-panel:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-red:#ef4444;--accent-red-hover:#dc2626;--accent-blue:#3b82f6;--accent-blue-hover:#2563eb;--accent-green:#10b981;--accent-green-hover:#059669;--accent-yellow:#f59e0b;--accent-yellow-hover:#d97706;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-glow:0 0 15px #3b82f64d}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-darker);color:var(--text-primary);width:100vw;height:100dvh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}#app{flex-direction:column;width:100vw;height:100dvh;display:flex}.video-container{background-color:var(--bg-darker);flex:1;gap:1rem;padding:1rem;display:flex;position:relative;overflow:hidden}.video-wrapper{background-color:var(--bg-panel);box-shadow:var(--shadow-md);border-radius:16px;transition:all .3s;position:relative;overflow:hidden}.video-wrapper video{object-fit:contain;background-color:#000;width:100%;height:100%}.video-wrapper.secondary video{transform:scaleX(-1)}.status-overlay{letter-spacing:.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-lg);background-color:#0f172ab3;border:1px solid #ffffff1a;border-radius:9999px;padding:1rem 2rem;font-weight:500;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.video-container{flex-direction:row}.video-wrapper.primary{border:2px solid #ffffff0d;flex:1}.video-wrapper.secondary{aspect-ratio:4/3;z-index:20;width:320px;box-shadow:var(--shadow-lg);cursor:grab;border:2px solid #ffffff1a;position:absolute;bottom:1.5rem;right:1.5rem}.video-wrapper.secondary:active{cursor:grabbing}.control-bar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:30;background-color:#0f172ad9;border-top:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;box-shadow:0 -4px 20px #0000004d}.brand-display{align-items:center;gap:.5rem;display:flex}.brand-display h1{letter-spacing:-.5px;background:linear-gradient(135deg,#f8fafc,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:1.5rem;font-weight:700}.brand-icon{color:var(--accent-blue);filter:drop-shadow(0 0 8px #3b82f680)}.control-group{align-items:center;gap:1rem;display:flex}.control-select{appearance:none;background-color:var(--bg-panel);color:var(--text-primary);cursor:pointer;box-shadow:var(--shadow-sm);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:1.25em;border:1px solid #ffffff1a;border-radius:12px;outline:none;padding:.875rem 2.5rem .875rem 1.25rem;font-family:inherit;font-size:1rem;font-weight:500;transition:all .2s}.control-select:hover,.control-select:focus{background-color:#263447;border-color:#fff3}.btn{cursor:pointer;color:#fff;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.875rem 1.75rem;font-family:inherit;font-size:1rem;font-weight:600;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.btn:active{transform:scale(.96)}.btn svg{width:1.25rem;height:1.25rem}.btn-stop{background-color:var(--accent-red);box-shadow:0 0 10px #ef444433}.btn-stop:hover{background-color:var(--accent-red-hover);box-shadow:0 0 15px #ef444466}.btn-skip{background-color:var(--accent-green);box-shadow:0 0 10px #10b98133}.btn-skip:hover{background-color:var(--accent-green-hover);box-shadow:0 0 15px #10b98166}.btn-donate{background-color:var(--accent-yellow);box-shadow:0 0 10px #f59e0b33}.btn-donate:hover{background-color:var(--accent-yellow-hover);box-shadow:0 0 15px #f59e0b66}@media (width<=1024px){.video-wrapper.secondary{width:240px;bottom:1rem;right:1rem}}@media (width<=768px){.video-container{padding:0}.video-wrapper.primary{border:none;border-radius:0}.video-wrapper.secondary{aspect-ratio:3/4;border-radius:12px;width:28vw;min-width:100px;max-width:150px;position:absolute;bottom:1rem;right:1rem}.control-bar{flex-direction:column;gap:.75rem;padding:1rem}.brand-display{justify-content:center;width:100%}.brand-display h1{font-size:1.25rem}.control-group{width:100%}.control-select{width:100%;padding:.75rem 2rem .75rem 1rem}.control-group.actions{flex-wrap:wrap;gap:.75rem;width:100%;display:flex}.btn{flex:calc(33.333% - .5rem);min-width:max-content;padding:.75rem}}