.flow.flow-feed{position:relative;height:calc(100dvh - 76px);min-height:580px;margin:0 -36px -28px;overflow:hidden;touch-action:none;user-select:none;--feed-drag:0px;background:#08151b}.flow-feed:before,.flow-feed:after{display:none}.feed-card{position:absolute;inset:0;background-size:cover;background-position:center;transform:translateY(var(--feed-drag));will-change:transform;overflow:hidden}.feed-prev{transform:translateY(calc(-100% + var(--feed-drag)))}.feed-next{transform:translateY(calc(100% + var(--feed-drag)))}.feed-settling .feed-card{transition:transform .245s cubic-bezier(.2,.7,.2,1)}.feed-dragging{cursor:grabbing}.feed-shade{position:absolute;inset:0;background:linear-gradient(90deg,#06141cd9,transparent 95%),linear-gradient(0deg,#06121cf5,transparent 85%,#06121c66)}.feed-heading{position:absolute;top:30px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;color:#e5c78e;font-size:14px;letter-spacing:3px}.feed-heading svg{width:30px;height:30px}.flow-feed :is(.flow-copy,.feed-preview-copy){position:absolute;top:17%;left:8%;padding:0;width:70%;max-width:700px;text-align:left}.flow-feed .flow-category{font-size:13px;letter-spacing:3px}.flow-feed :is(.flow-copy,.feed-preview-copy) h1{font-size:clamp(30px,4vw,56px);letter-spacing:5px;margin:16px 0 24px}.flow-feed :is(.flow-copy,.feed-preview-copy) h1.long-title{font-size:clamp(27px,3.6vw,48px)}.feed-lyrics{font-size:clamp(16px,1.6vw,22px);line-height:1.95;letter-spacing:2px;color:#f2e9d7;text-shadow:0 2px 16px #000;max-height:235px;overflow:hidden;mask-image:linear-gradient(#000 85%,transparent)}.feed-lyrics p{margin:0}.flow-feed :is(.flow-copy,.feed-preview-copy)>.text-link{font-size:12px;margin-top:16px;color:#d3b98c}.flow-feed .flow-buttons{position:absolute;right:4%;bottom:180px;display:flex;flex-direction:column;gap:22px;margin:0;z-index:3}.feed-actions button{display:flex;align-items:center;flex-direction:column;gap:5px;min-width:44px;text-shadow:0 2px 9px #000}.feed-actions svg{width:30px;height:30px}.feed-actions small{font-size:11px}.feed-actions .liked{color:#ed9292}.feed-actions .liked svg{fill:#d97b7b;stroke:#ed9292}.feed-actions .saved svg{fill:#b5965a88}.flow-feed .flow-listening{position:absolute;left:8%;right:14%;bottom:65px;width:auto;margin:0}.flow-feed .flow-timeline{margin:0 0 14px;gap:12px;font-size:11px}.flow-feed .flow-transport{gap:32px}.flow-feed .flow-play{width:54px;height:54px}.flow-feed .flow-play svg{width:26px;height:26px}.feed-library,.feed-dedicate{position:absolute;bottom:17px;font-size:12px}.feed-library{left:0}.feed-dedicate{right:0}.flow-feed .flow-swipe{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;margin:0;white-space:nowrap;font-size:11px;color:#d0c5af}.flow-feed .flow-swipe svg{width:17px;height:17px}.comments-dialog{width:min(580px,calc(100vw - 24px));max-height:85dvh}.comments-heading h2{font-size:24px;margin-bottom:10px}.comments-heading p{color:var(--muted);font-size:13px;margin-bottom:20px}.comment-list{max-height:35dvh;overflow:auto;overscroll-behavior:contain}.song-comment{border-top:1px solid var(--line);padding:17px 0}.song-comment header{display:flex;gap:12px;align-items:center;font-size:12px;color:#cbb88e}.song-comment time{font-size:10px;color:var(--muted)}.song-comment header button{margin-left:auto;font-size:11px}.song-comment p{font-family:system-ui,sans-serif;font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px}.comment-empty{padding:30px 0;color:var(--muted);text-align:center}.comment-form{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:18px}.comment-form input,.comment-form textarea{width:100%;box-sizing:border-box;background:#0a161f;border:1px solid var(--line);border-radius:8px;color:#efe4ce;padding:12px;font:14px system-ui}.comment-form textarea{min-height:90px;resize:vertical}.comment-form footer{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}.comment-form button{padding:10px 24px}.comment-error{color:#edb3a3;font-size:12px;min-height:18px}
@media(max-width:760px){.flow.flow-feed{height:calc(100dvh - 143px - env(safe-area-inset-bottom));min-height:0;margin:0 -19px}.feed-heading{top:14px;left:22px;right:22px;font-size:12px}.flow-feed :is(.flow-copy,.feed-preview-copy){top:15%;left:24px;width:calc(100% - 94px)}.flow-feed :is(.flow-copy,.feed-preview-copy) h1,.flow-feed :is(.flow-copy,.feed-preview-copy) h1.long-title{font-size:29px;letter-spacing:2px;line-height:1.4;margin:12px 0 20px}.feed-lyrics{font-size:16px;letter-spacing:1px;line-height:1.9;max-height:185px}.flow-feed .flow-buttons{right:14px;bottom:168px;gap:19px}.feed-actions svg{width:27px;height:27px}.flow-feed .flow-listening{left:24px;right:24px;bottom:52px}.flow-feed .flow-timeline{margin-bottom:8px}.flow-feed .flow-transport{gap:29px}.flow-feed .flow-play{width:48px;height:48px}.feed-library,.feed-dedicate{font-size:10px;bottom:17px}.flow-feed .flow-swipe{bottom:12px;font-size:10px}.feed-shade{background:linear-gradient(0deg,#06121cf5,#06121c65 65%,#06121c55)}.comments-dialog{padding:24px 18px}}
@media(max-height:700px){.flow-feed :is(.flow-copy,.feed-preview-copy){top:13%}.feed-lyrics{max-height:125px;font-size:15px}.flow-feed :is(.flow-copy,.feed-preview-copy) h1{margin:10px 0}.flow-feed :is(.flow-copy,.feed-preview-copy)>.text-link{margin-top:8px}.flow-feed .flow-buttons{bottom:145px;gap:12px}}
@media(prefers-reduced-motion:reduce){.feed-settling .feed-card{transition:none}}

@media(max-width:760px),(pointer:coarse){.comments-dialog .comment-form input,.comments-dialog .comment-form textarea{font-size:16px;line-height:1.5}.comments-dialog{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}}