*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0f;--surface: #14141f;--surface-hover: #1e1e2e;--border: rgba(255, 255, 255, .06);--text: #e4e4f0;--text-dim: #8888a8;--accent: #6c63ff;--accent-glow: rgba(108, 99, 255, .35);--radius: 16px;--radius-sm: 10px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px}.landing{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;animation:fadeUp .6s ease-out}.landing-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#a78bfa);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px var(--accent-glow)}.landing-icon svg{width:32px;height:32px;fill:#fff}.landing h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.landing p{max-width:440px;color:var(--text-dim);font-size:.95rem;line-height:1.6}.landing code{display:inline-block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 16px;font-size:.85rem;color:var(--accent);letter-spacing:.02em;margin-top:4px}.player-wrapper{width:100%;max-width:1100px;display:flex;flex-direction:column;gap:16px;animation:fadeUp .5s ease-out}.player-header{display:flex;align-items:center;gap:12px}.back-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 14px;color:var(--text-dim);font-size:.82rem;font-family:var(--font);cursor:pointer;transition:all .2s ease;text-decoration:none}.back-btn:hover{background:var(--surface-hover);color:var(--text)}.player-title{font-size:1.05rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-container{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--border);box-shadow:0 4px 30px #00000080,0 0 60px var(--accent-glow)}.video-container video{display:block;width:100%;max-height:80vh;outline:none}.video-meta{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:.8rem}.video-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--text-dim);opacity:.5}.error-state{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;animation:fadeUp .5s ease-out}.error-state .error-icon{font-size:2.5rem}.error-state h2{font-size:1.25rem;font-weight:600}.error-state p{color:var(--text-dim);font-size:.9rem;max-width:400px;line-height:1.5}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}