@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;600&display=swap');
:root {
    --black:#0b090a;
    --red:#781d2c;
    --red2:#a72a3b;
    --bone:#eee5dd;
    --ash:#ad9e97;
    --mono:'DM Mono',monospace;
    --display:'Anton',Impact,sans-serif
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:radial-gradient(ellipse at 70% 22%,#55172277,transparent 40%),#0b090a;
    color:var(--bone);
    font-family:'DM Sans',sans-serif;
    min-height:100vh
}

.grain {
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.11;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")
}

.top {
    height:70px;
    border-bottom:1px solid #ffffff22;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6vw
}

.logo {
    font:23px var(--display);
    letter-spacing:.08em;
    color:var(--bone);
    text-decoration:none
}

.logo span {
    color:#a72a3b
}

.back {
    font:10px var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#cfbdb5;
    text-decoration:none
}

.back:hover {
    color:#e13a4d
}

.wrap {
    max-width:1180px;
    margin:auto;
    padding:54px 6vw 150px
}

.crumb,.eyebrow,small {
    font:9px var(--mono);
    letter-spacing:.17em;
    text-transform:uppercase;
    color:#cb5662
}

.hero {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:8vw;
    align-items:center;
    padding:36px 0 52px
}

.cover {
    aspect-ratio:1;
    background:radial-gradient(circle at 50% 30%,#d9a576,#a24b50 18%,#4b1d29 48%,#100b10 80%);
    position:relative;
    box-shadow:12px 12px #40131d
}

.cover:before {
    content:'';
    position:absolute;
    inset:12%;
    border:1px solid #edc28d99;
    border-radius:50%;
    transform:scaleX(.65)
}

.cover:after {
    content:'';
    position:absolute;
    width:38%;
    height:66%;
    left:31%;
    top:23%;
    background:linear-gradient(#27141bba,#160d12);
    clip-path:polygon(30% 0,70% 0,82% 16%,100% 100%,0 100%,19% 16%)
}

.covertitle {
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    top:9%;
    text-align:center;
    font:clamp(32px,5vw,60px)/.84 var(--display);
    letter-spacing:.08em;
    color:#f5ddc1;
    text-shadow:2px 3px #561526
}

.cover small {
    position:absolute;
    z-index:2;
    bottom:8%;
    left:0;
    right:0;
    text-align:center;
    color:#e0b78d
}

.tag {
    font:9px var(--mono);
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#ca5662
}

h1 {
    font:clamp(54px,9vw,100px)/.86 var(--display);
    text-transform:uppercase;
    margin:18px 0 12px
}

h1 span {
    color:#a72a3b
}

.sub {
    font:italic 20px Georgia;
    color:#d4c0b5
}

p {
    color:#bcaea7;
    font-size:14px;
    line-height:1.85;
    max-width:520px
}

.btn {
    background:#841e2d;
    color:white;
    padding:14px 19px;
    border:1px solid #c34853;
    text-transform:uppercase;
    letter-spacing:.12em;
    font:9px var(--mono);
    cursor:pointer
}

.btn:hover {
    background:#a72a3b
}

.resume {
    font:9px var(--mono);
    color:#988780;
    display:block;
    margin-top:13px
}

.head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    border-bottom:1px solid #ffffff2b;
    padding-bottom:14px;
    margin:18px 0 6px
}

.head h2 {
    font:34px var(--display);
    text-transform:uppercase;
    margin:0
}

.head span {
    font:9px var(--mono);
    letter-spacing:.14em;
    color:#a5948d
}

.track {
    display:grid;
    grid-template-columns:38px 1fr auto 32px;
    gap:14px;
    align-items:center;
    min-height:66px;
    border-bottom:1px solid #ffffff17;
    padding:7px 12px;
    cursor:pointer
}

.track:hover,.track.current {
    background:linear-gradient(90deg,#8425353d,transparent)
}

.num,.dur {
    font:10px var(--mono);
    color:#9e8b85
}

.title {
    font:18px Georgia
}

.desc {
    font:9px var(--mono);
    color:#998780;
    margin-top:5px
}

.check {
    color:#dc5965;
    font:12px var(--mono)
}

.hidden {
    margin-top:23px;
    border:1px dashed #a448515e;
    padding:18px;
    display:flex;
    gap:15px;
    align-items:center;
    color:#a99a92
}

.hidden strong {
    display:block;
    color:#d9cbc1;
    font:18px Georgia;
    margin-bottom:5px
}

.hidden small {
    color:#9b8a83;
    letter-spacing:.05em;
    text-transform:none
}

.hidden.open {
    border-style:solid;
    background:#841e2d23
}

.hidden.open strong {
    color:#df6872
}

.note {
    margin-top:33px;
    padding:22px;
    border-left:1px solid #b93447;
    background:#ffffff06;
    color:#c0b1aa;
    font:italic 16px/1.7 Georgia
}

.player {
    position:fixed;
    z-index:4;
    bottom:0;
    left:0;
    right:0;
    background:#100c0df2;
    backdrop-filter:blur(16px);
    border-top:1px solid #ffffff25;
    padding:10px 5vw
}

.row {
    max-width:1180px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:15px
}

.now {
    font:15px Georgia
}

.subnow {
    font:8px var(--mono);
    color:#988780;
    margin-top:3px;
    letter-spacing:.1em
}

.controls {
    display:flex;
    align-items:center;
    gap:14px
}

.controls button {
    border:0;
    background:none;
    color:#d7c9c0;
    cursor:pointer
}

.controls .play {
    width:36px;
    height:36px;
    border-radius:50%;
    background:#a5283a;
    color:white
}

.runtime {
    justify-self:end;
    font:9px var(--mono);
    color:#a9958d
}

.seek {
    max-width:1180px;
    margin:7px auto 0;
    display:grid;
    grid-template-columns:28px 1fr 28px;
    gap:9px;
    align-items:center;
    color:#9c8a83;
    font:8px var(--mono)
}

.bar {
    height:3px;
    background:#ffffff29;
    cursor:pointer
}

.fill {
    height:100%;
    width:0;
    background:#ba3043
}

.secret {
    display:none;
    color:#e1cbbd;
    font:18px Georgia
}

@media(max-width:700px) {
    .top {
        padding:0 20px;
        height:62px
    }

    .wrap {
        padding:32px 22px 150px
    }

    .hero {
        grid-template-columns:1fr;
        gap:31px;
        padding:28px 0
    }

    .cover {
        max-width:430px;
        width:100%;
        margin:auto
    }

    .hero-copy {
        order:-1
    }

    h1 {
        font-size:64px
    }

    .head h2 {
        font-size:28px
    }

    .track {
        grid-template-columns:27px 1fr 28px;
        gap:10px;
        padding:7px 4px
    }

    .dur {
        display:none
    }

    .title {
        font-size:16px
    }

    .row {
        grid-template-columns:1fr auto
    }

    .runtime {
        display:none
    }

    .controls {
        gap:8px
    }

    .player {
        padding:9px 15px
    }

    .seek {
        margin-top:7px
    }
}

body {
    background:repeating-conic-gradient(from 5deg at 48% 30%,#110b0e 0deg 12deg,#1b0e12 12deg 24deg,#0b090a 24deg 36deg);
    background-attachment:fixed
}

.top {
    border-bottom:3px solid #ed2944;
    box-shadow:0 5px #e8bd52
}

.logo {
    text-shadow:2px 2px #a5162c,-1px -1px #f0c35c
}

.wrap {
    max-width:1250px
}

.hero {
    padding-top:53px
}

.cover {
    transform:rotate(2deg);
    border:3px solid #f0c35c;
    box-shadow:13px 13px #a5162c,-8px -8px #e8bd52
}

.cover:before {
    border:2px dashed #f0c35c
}

.covertitle {
    font-size:clamp(40px,6vw,70px);
    text-shadow:3px 4px #a5162c,-1px -1px #090708;
    transform:rotate(-4deg)
}

.cover small {
    background:#a5162c;
    color:#fff0dc;
    padding:7px
}

.tag,small {
    color:#f0c35c
}

.hero-copy h1 {
    text-shadow:4px 4px #a5162c
}

.hero-copy h1 span {
    color:#f0c35c
}

.btn {
    background:#d4213a;
    border:2px solid #f0c35c;
    box-shadow:5px 5px #090708,7px 7px #a5162c
}

.btn:hover {
    background:#f0c35c;
    color:#10090b
}

.head h2 {
    text-shadow:3px 3px #9d1c30;
    transform:rotate(-1deg)
}

.track {
    border-bottom:1px dashed #ffffff25
}

.track:hover,.track.current {
    background:linear-gradient(90deg,#a5162c55,transparent)
}

.hidden.open {
    border:2px solid #f0c35c;
    background:#841e2d55
}

.player {
    border-top:3px solid #e8bd52;
    box-shadow:0 -5px #9d1c30
}

.controls .play {
    background:#d4213a;
    border:1px solid #f0c35c
}

.fill {
    background:#ed2944
}

@media(max-width:700px) {
    .cover {
        box-shadow:8px 8px #a5162c,-5px -5px #e8bd52
    }

    .hero {
        padding-top:36px
    }
}

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Permanent+Marker&family=Sedgwick+Ave+Display&display=swap');
:root {
    --spray:'Sedgwick Ave Display','Permanent Marker',cursive;
    --graff:'Permanent Marker',cursive
}

.logo {
    font-family:var(--graff);
    transform:rotate(-4deg)
}

.back {
    font-family:var(--graff);
    font-size:12px;
    transform:rotate(2deg)
}

.hero-copy h1 {
    font-family:var(--spray);
    line-height:.88;
    transform:rotate(-2deg) skew(-2deg);
    text-shadow:4px 4px #a5162c,8px 8px #090708
}

.hero-copy h1 span {
    display:inline-block;
    transform:rotate(2deg);
    margin-left:8px;
    color:#f0c35c
}

.tag,.crumb {
    font-family:var(--graff);
    letter-spacing:.08em;
    transform:rotate(-2deg);
    width:max-content;
    max-width:100%
}

.sub {
    font-family:'Permanent Marker',cursive;
    font-style:normal;
    transform:rotate(1deg)
}

.btn {
    font-family:var(--graff);
    font-size:12px;
    letter-spacing:.05em;
    transform:rotate(-1.5deg)
}

.head h2 {
    font-family:var(--spray);
    transform:rotate(-2deg)
}

.title {
    font-family:'Permanent Marker',cursive;
    font-size:16px
}

.desc,.num,.dur {
    font-family:'DM Mono',monospace
}

.hidden strong {
    font-family:'Permanent Marker',cursive
}

.note {
    transform:rotate(-.7deg)
}

@media(max-width:700px) {
    .hero-copy h1 {
        font-size:clamp(58px,16vw,88px)
    }

    .btn {
        font-size:10px
    }

    .head h2 {
        font-size:31px
    }
}

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Sedgwick+Ave+Display&display=swap');
:root {
    --spray:'Sedgwick Ave Display','Permanent Marker',cursive;
    --graff:'Permanent Marker',cursive
}

.crumb,.tag {
    font-family:var(--graff)
}

.cover {
    background:radial-gradient(circle at 50% 30%,#e7b773,#b53d43 18%,#5a101e 49%,#10090d 81%)
}

.cover:before {
    border-style:dashed
}

.cover:after {
    width:38%;
    height:62%;
    left:31%;
    top:26%;
    background:linear-gradient(#1c1014e8,#0e090c)
}

.covertitle {
    font-family:var(--spray);
    font-size:clamp(37px,5.6vw,68px);
    line-height:.88
}

.head {
    margin-top:22px
}

.head h2 {
    font-family:var(--spray);
    font-size:34px
}

.track-lyrics-layout {
    display:grid;
    grid-template-columns:minmax(290px,.84fr) minmax(340px,1.16fr);
    gap:22px;
    align-items:start
}

.tracklist {
    max-height:66vh;
    overflow-y:auto;
    padding-right:8px
}

.track {
    grid-template-columns:32px 1fr 32px;
    gap:11px;
    min-height:63px;
    padding:8px 10px
}

.track .dur {
    display:none
}

.track .title {
    font-family:var(--graff);
    font-size:15px
}

.track .desc {
    font-size:8px
}

.track .check {
    font-size:11px
}

.lyrics-panel {
    position:sticky;
    top:16px;
    max-height:66vh;
    min-height:340px;
    overflow:hidden;
    background:repeating-linear-gradient(0deg,#f0e5d5,#f0e5d5 29px,#ded1bf 30px);
    color:#25181b;
    border:2px solid #fff2df;
    box-shadow:7px 7px #74192b,-3px -3px #eec45c;
    padding:18px 23px 20px
}

.lyrics-kicker {
    font:9px var(--mono);
    letter-spacing:.15em;
    color:#8d2537;
    text-transform:uppercase;
    border-bottom:1px solid #91314555;
    padding-bottom:9px
}

.lyrics-panel h3 {
    font:clamp(27px,3vw,40px)/.95 var(--spray);
    color:#8d1d32;
    margin:15px 0 8px
}

.lyrics-hint {
    font:11px/1.6 var(--mono);
    color:#70585a
}

.lyrics-panel pre {
    display:none;
    white-space:pre-wrap;
    overflow-y:auto;
    max-height:calc(66vh - 112px);
    margin:12px 0 0;
    padding:0 7px 8px 0;
    font:12px/1.7 'DM Sans',sans-serif;
    color:#392d30
}

.lyrics-panel.has-lyrics .lyrics-hint {
    display:none
}

.lyrics-panel.preview .lyrics-hint {
    display:block;
    color:#8d2537;
    font-weight:600;
    margin:9px 0
}

.lyrics-panel.has-lyrics pre {
    display:block
}

.track.current {
    outline:1px solid #eec45c
}

.track.hidden-track {
    border:1px dashed #d05565;
    background:#7e1d2b24
}

.track.hidden-track .title {
    color:#f0c35c
}

.track:focus-visible {
    outline:2px solid #eec45c
}

.hidden {
    margin-top:20px
}

.note {
    max-width:780px
}

.player .subnow:after {
    content:' · DEMO PLAYER';
    color:#d45360
}

@media(max-width:760px) {
    .track-lyrics-layout {
        grid-template-columns:1fr;
        gap:17px
    }

    .tracklist {
        max-height:42vh
    }

    .lyrics-panel {
        position:relative;
        top:auto;
        max-height:45vh;
        min-height:170px
    }

    .lyrics-panel pre {
        max-height:calc(45vh - 104px)
    }

    .head h2 {
        font-size:29px
    }
}

.logo-slot {
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:60px;
    height:50px;
    text-decoration:none;
    transform:rotate(-3deg)!important
}

.slot-frame {
    width:47px;
    height:42px;
    border:1px dashed #eec45c;
    background:linear-gradient(145deg,#281018,#110b0e);
    box-shadow:3px 3px #8d1d32;
    display:grid;
    place-items:center;
    color:#eec45c;
    text-align:center
}

.slot-frame span {
    font:8px/1.05 'DM Mono',monospace;
    letter-spacing:.09em
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

@media(max-width:700px) {
    .logo-slot {
        width:51px;
        height:43px
    }

    .slot-frame {
        width:40px;
        height:36px
    }

    .slot-frame span {
        font-size:7px
    }
}