*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background-color:#1a1a2e;min-height:100vh;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:url(/bg-1.jpg) no-repeat center center;background-size:cover;z-index:-1;transform:scale(1.1);transition:filter .5s ease}body.view-big:before{filter:blur(10px)}body.view-small:before{filter:blur(0px)}.App{display:flex;flex-direction:column;align-items:center;gap:20px}.tv-frame{width:min(90vw,151vh,1280px);aspect-ratio:16 / 9;background:#000;border:32px solid #000;border-radius:12px;box-shadow:0 0 0 2px #333,0 20px 60px #00000080;overflow:hidden;position:relative;transition:all .5s cubic-bezier(.4,0,.2,1)}.tv-frame.small{width:min(50vw,84vh,640px);border-width:20px;transform:translateY(8vh)}.view-size-toggle{position:fixed;top:20px;right:20px;z-index:1000;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);border-radius:12px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;color:#fff;transition:all .3s ease;box-shadow:0 4px 20px #0000004d}.view-size-toggle:hover{background:#ffffff40;transform:scale(1.1);box-shadow:0 6px 30px #0006}.rive-wrapper{width:100%;height:100%}.rive-wrapper canvas{width:100%!important;height:100%!important}.player-drawer{position:absolute;top:0;left:0;right:0;transform:translateY(-100%);z-index:50;padding:16px;background:#fff;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px #0000001a}.player-drawer.open{transform:translateY(0)}.drawer-toggle{position:absolute;bottom:0;left:50%;transform:translate(-50%) translateY(100%);z-index:110;background:#fff;border:none;border-radius:0 0 12px 12px;padding:4px 16px;cursor:pointer;color:#333;font-size:16px;transition:all .3s ease;box-shadow:0 4px 6px #0000001a;min-width:50px}.drawer-toggle:hover{background:#f3f4f6;color:#3b82f6}.player-list-wrapper{overflow:hidden;width:410px}.player-list{display:flex;gap:12px;align-items:center;transition:transform .4s cubic-bezier(.4,0,.2,1)}.carousel-arrow{background:#3b82f61a;border:2px solid #3b82f6;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;color:#3b82f6;transition:all .3s ease;font-weight:700}.carousel-arrow:hover:not(:disabled){background:#3b82f633;transform:scale(1.1)}.carousel-arrow:disabled{opacity:.3;cursor:not-allowed;border-color:#ccc;color:#ccc}.player-button{background:transparent;border:none;padding:0;cursor:pointer;transition:transform .3s ease;width:70px;height:70px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.player-button:hover:not(:disabled){transform:scale(1.1)}.player-button.active{transform:scale(1.15)}.player-button.disabled{opacity:.5;cursor:not-allowed}.player-button.disabled:hover{transform:none}.player-image{width:60px;height:60px;object-fit:cover}@media (max-width: 768px){.tv-frame{width:min(98vw,151vh)!important;border-width:12px}.tv-frame.small{width:min(80vw,120vh)!important;border-width:12px}.carousel-arrow{min-width:32px;width:32px;height:32px;font-size:18px;flex-shrink:0}.player-button{width:50px;height:50px}.player-image{width:42px;height:42px}.player-drawer{padding:8px;gap:8px}}