.sf{height:calc(100vh - 45px);background:#000;display:flex;flex-direction:column;overflow:hidden}.sf__player{flex:1;display:flex;flex-direction:column;position:relative}.sf__video{flex:1;position:relative;background:#000;min-height:0;overflow:hidden}.sf__start-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#0009}.sf__start-btn{background:none;border:1px solid var(--accent);padding:1.5rem;cursor:pointer;transition:background .15s,box-shadow .15s}.sf__start-btn:hover{background:#00ffcc1a;box-shadow:0 0 30px #0fc3}.sf__video-inner,.sf__video>iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,177.78vh);height:max(100%,56.25vw);border:none}.sf__transition{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;color:var(--text);font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,6vw,5rem);text-transform:uppercase;letter-spacing:-.02em;z-index:10;opacity:0;pointer-events:none;transition:none}.sf__transition.active{animation:sfFlash .6s ease-out both}@keyframes sfFlash{0%{opacity:1}15%{opacity:1;background:#111}to{opacity:0}}.sf__info{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;border-top:1px solid var(--border);background:var(--bg);gap:1rem}.sf__info-left{min-width:0;flex:1}.sf__info-artist{font-family:var(--font-display);font-weight:900;font-size:1.1rem;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sf__info-title{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem}.sf__info-right{display:flex;align-items:center;gap:1rem;flex-shrink:0}.sf__info-time{font-size:.75rem;color:var(--accent)}.sf__info-link{font-size:.7rem;color:var(--accent-pink);text-decoration:none;border:1px solid var(--accent-pink);padding:.25rem .6rem;transition:all .15s ease}.sf__info-link:hover{background:var(--accent-pink);color:#000}.sf__channels{display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--border);background:var(--bg);padding:.4rem 1.5rem}.sf__channels::-webkit-scrollbar{display:none}.sf__channel{flex-shrink:0;background:none;border:1px solid var(--border);color:var(--muted);padding:.2rem .6rem;cursor:pointer;font-size:.6rem;letter-spacing:.04em;transition:all .15s;white-space:nowrap}.sf__channel:hover{border-color:var(--text-dim);color:var(--text-dim)}.sf__channel.active{border-color:var(--accent);color:var(--accent);background:#00ffcc0d}.sf__controls{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-top:1px solid var(--border);background:var(--bg)}.sf__controls-left{display:flex;gap:.35rem}.sf__controls-right{display:flex;align-items:center;gap:.35rem}.sf__btn{background:none;border:1px solid var(--border);color:var(--text-dim);padding:.4rem .85rem;cursor:pointer;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;transition:all .15s ease}.sf__btn:hover{border-color:var(--accent);color:var(--accent)}.sf__btn--play{border-color:var(--accent-pink);color:var(--accent-pink)}.sf__btn--play:hover{background:var(--accent-pink);color:#000}.sf__btn--stay{border-color:var(--accent);color:var(--accent)}.sf__btn--stay:hover{background:var(--accent);color:#000}.sf__btn--staying{background:var(--accent);color:#000;border-color:var(--accent)}.sf__dur-label{font-size:.65rem;color:var(--muted);margin-right:.25rem}.sf__dur{background:none;border:1px solid var(--border);color:var(--muted);padding:.25rem .5rem;cursor:pointer;font-size:.65rem;transition:all .15s ease}.sf__dur:hover{border-color:var(--text-dim);color:var(--text-dim)}.sf__dur.active{border-color:var(--accent);color:var(--accent)}.sf__progress-overlay{position:absolute;top:0;left:0;right:0;height:6px;z-index:10;background:#ffffff0f}.sf__progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-pink),var(--accent));width:0%;transition:width .08s linear}.sf__progress-moments{position:absolute;inset:0;z-index:1}.sf__progress-heart{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px;line-height:1;filter:drop-shadow(0 0 3px rgba(255,77,106,.5));pointer-events:none}.sf__progress-heart--new{animation:sfHeartDrop .6s cubic-bezier(.34,1.56,.64,1) both}@keyframes sfHeartDrop{0%{opacity:0;transform:translate(-50%,-300%) scale(2)}50%{opacity:1;transform:translate(-50%,-40%) scale(1.2)}75%{transform:translate(-50%,-55%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.sf__overlay{position:absolute;bottom:1rem;right:1rem;z-index:10;opacity:0;pointer-events:none;transition:opacity .3s ease}.sf__video:hover .sf__overlay,.sf__video.sf__video--overlay-visible .sf__overlay{opacity:1;pointer-events:auto}.sf__shortcuts{background:#000000b3;border:1px solid var(--border);padding:.5rem .75rem;display:flex;flex-direction:column;gap:.3rem}.sf__shortcut{display:flex;align-items:center;gap:.75rem}.sf__shortcut--vote,.sf__shortcut--moment{cursor:pointer;transition:opacity .15s}.sf__shortcut--vote:hover,.sf__shortcut--moment:hover{opacity:.7}.sf__shortcut-key{font-size:.6rem;color:var(--accent);min-width:3rem;letter-spacing:.05em}.sf__shortcut-action{font-size:.6rem;color:var(--text-muted)}.sf__shortcut--vote.voted .sf__shortcut-key,.sf__shortcut--vote.voted .sf__shortcut-action{color:var(--accent)}.sf__vote-arrow{font-size:.55rem}.sf__shortcut--moment.flash .sf__shortcut-action{color:var(--accent-pink)}.sf__overlay-tooltip{position:absolute;bottom:100%;right:0;margin-bottom:.5rem;background:#000000d9;border:1px solid var(--border);padding:.3rem .6rem;white-space:nowrap;font-size:.6rem;color:var(--text-muted);opacity:0;transition:opacity .2s;pointer-events:none}.sf__overlay-tooltip.visible{opacity:1}.sf__action-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);z-index:15;pointer-events:none;opacity:0;display:flex;flex-direction:column;align-items:center;gap:.5rem}.sf__action-flash.active{animation:sfActionFlash .9s ease-out both}.sf__action-flash.active--vote{color:var(--accent);font-size:1.2rem;letter-spacing:.1em}.sf__action-flash.active--moment{color:var(--accent-pink);filter:drop-shadow(0 0 20px rgba(255,77,106,.6))}.sf__action-flash.active--auth{color:var(--accent);font-size:1rem;letter-spacing:.1em;text-shadow:0 0 20px rgba(0,0,0,.8)}.sf__action-flash.active--track{color:var(--text);font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:.02em;text-shadow:0 2px 30px rgba(0,0,0,.9);max-width:80%;text-align:center}.sf__flash-track{font-size:clamp(.7rem,1.5vw,1rem);color:var(--accent);letter-spacing:.2em}.sf__flash-icon{font-size:2rem;line-height:1}@keyframes sfActionFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}25%{transform:translate(-50%,-50%) scale(1)}65%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}@media(max-width:680px){.sf__info{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.6rem 1rem}.sf__info-right{width:100%;justify-content:space-between}.sf__channels{padding:.3rem .75rem}.sf__controls{flex-direction:column;gap:.5rem;padding:.5rem 1rem}.sf__overlay{opacity:.5;pointer-events:auto;bottom:.5rem;right:.5rem}.sf__video:hover .sf__overlay,.sf__video.sf__video--overlay-visible .sf__overlay{opacity:1}.sf__shortcut-key{display:none}.sf__shortcut:not(.sf__shortcut--vote):not(.sf__shortcut--moment){display:none}.sf__shortcut-action{font-size:.7rem}}