body{margin:0;padding:0}.player{box-sizing:border-box;width:250px;padding:1rem 0;font-family:Courier New,Courier,monospace}.trackRow{flex-wrap:nowrap;align-items:center;gap:4px;width:100%;margin-bottom:14px;font-size:14px;display:flex;overflow:hidden}.trackNameWrap{flex:1;min-width:0;overflow:hidden}.trackName{white-space:nowrap;animation:8s ease-in-out infinite alternate scroll-text;display:inline-block}@keyframes scroll-text{0%{transform:translate(0)}to{transform:translateX(var(--scroll-offset,0px))}}.btn{cursor:pointer;opacity:.7;color:inherit;background:0 0;border:none;flex-shrink:0;align-items:center;margin:0;padding:0;font-size:9px;line-height:1;display:flex}.btn:hover{opacity:.4}.btn:active{transform:scale(.88)}.btnPlay{justify-content:center;width:1ch}.progressWrap{cursor:pointer;box-sizing:border-box;border:1.5px solid;width:100%;min-width:0;height:14px;margin-bottom:8px}.progressFill{background:currentColor;height:100%;transition:width .25s linear}.timeRow{justify-content:flex-end;font-size:13px;display:flex}:root{--primary-bg-color:#f8f8f8;--secondary-bg-color:#ecedf9;--primary-color:#b19ae2;--border-color:#bcbcbc;--font-color:#2a2a2a;--font-logo:"VT323", monospace;--font-heading:"Pixel Operator", "VT323", monospace;--font-body:"IBM Plex Mono", monospace;--font-small:"VT323", monospace}body{font-family:var(--font-heading);color:var(--font-color);background-color:var(--primary-bg-color)}.container{display:flex}.container .right{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3e%3cdefs%3e%3c!--%20Change%20this%20number%20to%20increase/decrease%20the%20whole%20effect%20--%3e%3cstyle%3e%20:root%20{%20--crt-opacity:%200.30;%20}%20%3c/style%3e%3c!--%204px%20scanline%20pattern%20--%3e%3cpattern%20id='scanlines'%20width='100'%20height='4'%20patternUnits='userSpaceOnUse'%3e%3c!--%20visible%20line%20--%3e%3crect%20width='100'%20height='2'%20fill='rgb(236,237,249)'%20opacity='var(--crt-opacity)'%20/%3e%3c!--%20other%20half%20is%20transparent%20--%3e%3crect%20y='2'%20width='100'%20height='2'%20fill='transparent'%20/%3e%3c/pattern%3e%3c/defs%3e%3c!--%20Draw%20pattern%20--%3e%3crect%20width='100%25'%20height='100%25'%20fill='url(%23scanlines)'%20/%3e%3c/svg%3e") 0 0/100% 10rem;border-left:none;width:100%;max-height:100vh;overflow:scroll}.container .right .header{border-bottom:1px dotted var(--border-color);background-color:var(--primary-bg-color);white-space:nowrap;justify-content:space-between;display:flex}.container .right .header p{padding:0 1rem}.container .right .main{flex-wrap:wrap;justify-self:center;max-width:72rem;margin:0 auto;display:flex}.nav{border-right:1px dotted var(--border-color);background-color:var(--secondary-bg-color);max-width:16rem;height:100vh;padding:0 1rem;font-size:medium;overflow:scroll}.nav .logo{font-family:var(--font-small);padding:1rem 0;font-style:italic}.nav .logo h1{margin:0;font-size:3rem}.nav .logo p{color:var(--primary-color);margin:0}.nav .logo b{color:var(--primary-color)}.nav .links{flex-direction:column;margin:1rem 0;display:flex}.nav .navigation{flex-direction:column;display:flex}.nav .navigation .active{color:var(--primary-color)}.nav .navigation a{color:var(--font-color);align-items:center;margin:20px 10px 10px 0;text-decoration:none;display:flex}.nav .navigation a label{margin-left:10px}.nav .navigation a label:hover{color:var(--primary-color);cursor:pointer;transition:all .5s}.nav .navigation a:hover{color:var(--primary-color);transition:all .5s}.nav .search{flex-flow:wrap;display:flex}.nav .search span{padding:1rem 0}.nav .search span input{border:1px solid var(--primary-color);padding:.2rem}.nav .counter{color:var(--primary-color);text-transform:uppercase;background-color:#000;margin:20px 0;padding:1rem;font-family:monospace;font-size:1rem;display:flex}.window{border:1px solid var(--border-color);background-color:var(--primary-bg-color);border-radius:5px;margin:1rem;font-size:large;box-shadow:0 7px 5px #0000001a}.window .title{text-transform:lowercase;border-bottom:1px solid var(--border-color);background-color:var(--secondary-bg-color);border-radius:5px 5px 0 0;justify-content:space-between;align-items:center;padding:.5rem;font-size:medium;display:flex}.window .title .title-icons{gap:.3rem;display:flex}.window .title .title-icons .icon-box{border:1px solid var(--border-color);background-color:var(--primary-color);border-radius:2px;width:.9rem;height:.9rem;display:inline-block}.window .title .title-icons .icon-box:hover{cursor:pointer}.window .body{justify-content:space-between;display:flex}.window .body .col-1{padding:1rem}.window .body .col-1 h1{margin:0;font-family:VT323,monospace;font-size:xxx-large}.window .body .col-1 h1 b{color:var(--primary-color)}.window .body .col-2 img{max-height:12rem}.playlist{width:72rem}.playlist .body .col-1{flex-direction:column;flex-shrink:0;gap:.75rem;width:18rem;display:flex}.playlist .body .col-1 img{aspect-ratio:1;object-fit:cover;border:1px solid var(--border-color);border-radius:5px;width:100%;max-height:none;display:block}.playlist .body .col-1 .now-playing{border:1px solid var(--border-color);background-color:var(--secondary-bg-color);border-radius:5px;align-items:center;gap:.6rem;padding:.75rem;font-size:medium;display:flex}.playlist .body .col-1 .now-playing b{color:var(--primary-color)}.playlist .body .col-1 .loading-note{text-align:center;opacity:.6;font-size:small}.playlist .body .col-2{flex-direction:column;flex:1;gap:.75rem;min-width:0;padding:1rem;display:flex}.playlist .body .col-2 .track-list{border:1px solid var(--border-color);background-color:var(--secondary-bg-color);border-radius:5px;flex:1;max-height:22rem;overflow-y:auto}.playlist .body .col-2 .track-list .track{cursor:pointer;border-bottom:1px solid var(--border-color);align-items:center;padding:.7rem .9rem;font-size:medium;display:flex}.playlist .body .col-2 .track-list .track:last-child{border-bottom:none}.playlist .body .col-2 .track-list .track:hover,.playlist .body .col-2 .track-list .track.active{background-color:var(--primary-bg-color)}.playlist .body .col-2 .track-list .track.active .track-name,.playlist .body .col-2 .track-list .track.active .track-num,.playlist .body .col-2 .track-list .track.active .track-duration{color:var(--primary-color);font-weight:700}.playlist .body .col-2 .track-list .track .track-num{opacity:.6;width:1.6rem;font-size:small}.playlist .body .col-2 .track-list .track .track-thumb{object-fit:cover;border:1px solid var(--border-color);border-radius:3px;flex-shrink:0;width:2rem;height:2rem;margin-right:.6rem}.playlist .body .col-2 .track-list .track .track-name{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.playlist .body .col-2 .track-list .track .track-duration{opacity:.6;margin-left:.6rem;font-size:small}.playlist .body .col-2 .scrubber{align-items:center;gap:.5rem;display:flex}.playlist .body .col-2 .scrubber .scrubber-mark{opacity:.6;font-size:small}.playlist .body .col-2 .scrubber .scrubber-track{background-color:var(--secondary-bg-color);border:1px solid var(--border-color);border-radius:5px;flex:1;height:.6rem;position:relative;overflow:hidden}.playlist .body .col-2 .scrubber .scrubber-track .scrubber-fill{background-color:var(--primary-color);border-radius:5px;transition:width .4s linear;position:absolute;inset:0 auto 0 0}.playlist .body .col-2 .controls{justify-content:space-between;align-items:center;display:flex}.playlist .body .col-2 .controls .transport{gap:.4rem;display:flex}.playlist .body .col-2 .controls .transport button{background-color:var(--secondary-bg-color);border:1px solid var(--border-color);cursor:pointer;width:1.9rem;height:1.7rem;color:var(--primary-color);border-radius:5px;justify-content:center;align-items:center;padding:0;display:flex}.playlist .body .col-2 .controls .transport button:hover{background-color:var(--primary-bg-color)}.playlist .body .col-2 .controls .transport button:active{filter:brightness(.92)}.playlist .body .col-2 .controls .time-and-meter{align-items:center;gap:.6rem;display:flex}.playlist .body .col-2 .controls .time-and-meter .time{font-size:small}.playlist .body .col-2 .controls .time-and-meter .vu-meter{align-items:flex-end;gap:1.5px;height:1.25rem;display:flex}.playlist .body .col-2 .controls .time-and-meter .vu-meter span{background-color:var(--primary-color);opacity:.5;border-radius:1px;width:3px;transition:height .12s}.playlist .body .col-2 .controls .time-and-meter .vu-meter span.loud{opacity:1}.zine-container{justify-content:left;gap:1rem;width:68rem;padding:1rem;display:flex;overflow:scroll}.zine img{border:1px dotted var(--border-color);object-fit:cover;object-position:center;width:16rem;height:22rem;box-shadow:0 7px 5px #0000001a}.zine p,.zine h3{width:16rem}.topic img{margin:1rem}