@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,500&display=swap";:root{font-family:DM Sans,sans-serif;color:#f1ece4;background:#171217;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}button{cursor:pointer}header{height:64px;padding:0 clamp(18px,5vw,68px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #392f39;background:#1d171d;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.86rem}.brand i{width:20px;height:20px;border:2px solid #e49352;border-radius:50% 50% 42% 58%;transform:rotate(-18deg)}.upload-jump,.player-title button{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid #4a3c48;border-radius:7px;background:#261e25;color:#f1ece4;font-size:.72rem;font-weight:700}.library{width:min(1180px,calc(100% - 28px));margin:auto}.intro{padding:clamp(54px,8vw,110px) 0 52px;position:relative}.intro p,.player-title p,.shelf p,.upload form p{margin:0 0 8px;color:#e49352;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.intro h1{margin:0;font:500 clamp(3rem,7vw,6.4rem)/.9 "Newsreader";letter-spacing:-.055em}.intro>span{position:absolute;right:0;bottom:56px;color:#918591;font-size:.7rem}.player-section{margin-bottom:78px}.player-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.player-title h2{margin:0;font:500 clamp(1.5rem,3vw,2.4rem) "Newsreader"}.stage{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:#080708;border:1px solid #392f39;overflow:hidden}.stage video{width:100%;height:100%;object-fit:contain}.center-play{position:absolute;width:62px;height:62px;display:grid;place-items:center;border:1px solid #ffffff54;border-radius:50%;background:#171217a8;color:#fff;opacity:0;transition:opacity .16s}.stage:hover .center-play,.center-play:focus-visible{opacity:1}.transport{min-height:62px;padding:10px 12px;display:flex;align-items:center;gap:13px;border:1px solid #392f39;border-top:0;background:#211a20}.transport>button,.loop button{min-width:42px;height:42px;border:1px solid #493b47;border-radius:7px;background:#2a2129;color:#eee8df;display:flex;align-items:center;justify-content:center;gap:6px}.transport time{font-variant-numeric:tabular-nums;color:#b8abb6;font-size:.75rem}.transport label{display:flex;align-items:center;gap:5px;margin-right:auto;color:#b8abb6}.transport select{height:38px;border:0;background:transparent;color:#f1ece4}.loop{display:flex;gap:6px}.loop button{padding:0 10px;font-size:.68rem}.loop button.set{border-color:#9d6439}.loop button.active{background:#e49352;color:#21151b;border-color:#e49352}.notes{max-width:740px;color:#b7abb5;line-height:1.65;white-space:pre-wrap}.shelf{padding:40px 0 90px;border-top:1px solid #392f39;display:grid;grid-template-columns:220px 1fr;gap:50px}.shelf h2{margin:0;font:500 2rem Newsreader}.shelf>div:last-child{display:grid}.shelf>div>button{display:grid;grid-template-columns:80px 1fr auto;gap:18px;align-items:center;padding:17px 10px;border:0;border-bottom:1px solid #392f39;background:transparent;color:#f1ece4;text-align:left}.shelf>div>button.active{background:#211a20}.shelf span,.shelf small{color:#918591;font-size:.68rem}.upload form{margin:0 0 70px;padding:28px;border:1px solid #4b3c49;background:#211a20;display:grid;grid-template-columns:1fr 1fr;gap:18px}.upload form>div:first-child{grid-column:1/3}.upload h2{margin:0;font:500 2rem Newsreader}.upload label{display:grid;gap:7px;color:#b7abb5;font-size:.7rem}.upload input,.upload textarea{width:100%;padding:11px;border:1px solid #4b3c49;border-radius:6px;background:#171217;color:#f1ece4}.upload form>div:last-child{grid-column:1/3;display:flex;justify-content:flex-end;gap:8px}.upload form button{min-height:40px;padding:0 14px;border:1px solid #4b3c49;border-radius:6px;background:transparent;color:#f1ece4}.upload form button:last-child{background:#e49352;color:#21151b;border-color:#e49352;font-weight:700}.login{min-height:100vh;padding:32px clamp(22px,7vw,100px);background:radial-gradient(circle at 80% 20%,#35202b,#171217 52%)}.login form{width:min(620px,100%);margin:16vh auto 0}.login form p{color:#e49352;text-transform:uppercase;letter-spacing:.13em;font-size:.65rem}.login h1{margin:10px 0 42px;font:500 clamp(3.8rem,9vw,7.5rem)/.83 "Newsreader";letter-spacing:-.06em}.login label{display:grid;gap:8px;color:#b7abb5;font-size:.72rem}.login input{height:50px;border:1px solid #4b3c49;border-radius:7px;background:#211a20;color:#fff;padding:0 14px}.login form button{margin-top:12px;width:100%;height:48px;border:0;border-radius:7px;background:#e49352;color:#21151b;font-weight:700}.shared-player{width:min(1100px,calc(100% - 28px));margin:0 auto;padding:28px 0 70px}.back{display:flex;align-items:center;gap:5px;margin-bottom:70px;color:#b7abb5;text-decoration:none;font-size:.75rem}.center{min-height:100vh;display:grid;place-items:center;color:#b7abb5}@media(max-width:720px){.intro>span{position:static;display:block;margin-top:24px}.player-title{align-items:stretch;flex-direction:column}.player-title button{justify-content:center}.transport{flex-wrap:wrap}.transport label{margin-right:0}.loop{order:2;width:100%;display:grid;grid-template-columns:1fr 1fr 1.2fr auto}.loop button{min-width:0}.shelf{grid-template-columns:1fr;gap:18px}.shelf>div>button{grid-template-columns:54px 1fr}.shelf small{grid-column:2}.upload form{grid-template-columns:1fr}.upload form>div:first-child,.upload form>div:last-child{grid-column:1}.center-play{opacity:1;width:52px;height:52px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}