*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.container{width:100%;}@media (min-width: 440px){.container{max-width:440px;}}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}.pointer-events-none{pointer-events:none;}.\!fixed{position:fixed !important;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.inset-0{inset:0;}.right-0{right:0;}.top-0{top:0;}.top-auto{top:auto;}.z-0{z-index:0;}.z-1{z-index:1;}.order-2{order:2;}.grid{display:grid;}.col-start-1{grid-column-start:1;}.col-start-2{grid-column-start:2;}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.-mx-4{margin-left:-1rem;margin-right:-1rem;}.mx-4{margin-left:1rem;margin-right:1rem;}.mx-auto{margin-left:auto;margin-right:auto;}.my-1{margin-top:0.25rem;margin-bottom:0.25rem;}.my-2{margin-top:0.5rem;margin-bottom:0.5rem;}.-ml-1\.5{margin-left:-0.375rem;}.-mt-12{margin-top:-3rem;}.mb-20{margin-bottom:5rem;}.mb-4{margin-bottom:1rem;}.mb-8{margin-bottom:2rem;}.me{margin-inline-end:1rem;}.ml-4{margin-left:1rem;}.mr-2{margin-right:0.5rem;}.mr-4{margin-right:1rem;}.mt-2{margin-top:0.5rem;}.mt-4{margin-top:1rem;}.mt-8{margin-top:2rem;}.mis{margin-inline-start:1rem;}.inline{display:inline;}.\!block{display:block !important;}.block,.group:hover .group-hover\:block{display:block;}.inline-block{display:inline-block;}.hidden{display:none;}.h-2\/3{height:66.6666666667%;}.h-3{height:0.75rem;}.h-6px{height:6px;}.h-full{height:100%;}.h1{height:0.25rem;}.ha{height:auto;}.max-w-30ch{max-width:30ch;}.w-3{width:0.75rem;}.w-full{width:100%;}.w-screen{width:100vw;}.flex{display:flex;}.inline-flex{display:inline-flex;}.flex-auto{flex:1 1 auto;}.flex-grow{flex-grow:1;}.flex-col{flex-direction:column;}.scale-110{--un-scale-x:1.1;--un-scale-y:1.1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.cursor-pointer{cursor:pointer;}.active\:cursor-grabbing:active{cursor:grabbing;}.select-none{-webkit-user-select:none;user-select:none;}.place-items-center{place-items:center;}.items-center{align-items:center;}.justify-center{justify-content:center;}.gap-12{gap:3rem;}.gap-2{gap:0.5rem;}.gap-4{gap:1rem;}.overflow-hidden{overflow:hidden;}.whitespace-nowrap{white-space:nowrap;}.whitespace-pre{white-space:pre;}.whitespace-pre-wrap{white-space:pre-wrap;}.b{border-width:1px;}.rounded-full{border-radius:9999px;}.rounded-lg{border-radius:0.5rem;}.rounded-md{border-radius:0.375rem;}.bg-active{--un-bg-opacity:1;background-color:rgb(63 22 251 / var(--un-bg-opacity)) /* #3f16fb */;}.bg-dark-200{--un-bg-opacity:1;background-color:rgb(140 140 140 / var(--un-bg-opacity)) /* #8c8c8c */;}.bg-dark-500{--un-bg-opacity:1;background-color:rgb(23 25 27 / var(--un-bg-opacity)) /* #17191B */;}.bg-primary{background-color:var(--color-primary) /* var(--color-primary) */;}.bg-subtle{background-color:var(--color-subtle) /* var(--color-subtle) */;}.fill-current{fill:currentColor /* currentColor */;}.object-contain{object-fit:contain;}.p-3{padding:0.75rem;}.p-4{padding:1rem;}.px-2{padding-left:0.5rem;padding-right:0.5rem;}.px-4{padding-left:1rem;padding-right:1rem;}.py-16{padding-top:4rem;padding-bottom:4rem;}.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}.py-4{padding-top:1rem;padding-bottom:1rem;}.py-8{padding-top:2rem;padding-bottom:2rem;}.pb-8{padding-bottom:2rem;}.pl-2px{padding-left:2px;}.pt-0{padding-top:0;}.pt-16{padding-top:4rem;}.pt-2{padding-top:0.5rem;}.text-center{text-align:center;}.text-balance{text-wrap:balance;}.text-2xs{font-size:.75rem;line-height:.875rem;}.text-lg{font-size:1.25rem;line-height:1.5625rem;}.text-sm{font-size:1rem;line-height:1.25rem;}.text-xl{font-size:1.5rem;line-height:1.75rem;}.text-pink-500{--un-text-opacity:1;color:rgb(236 72 153 / var(--un-text-opacity)) /* #ec4899 */;}.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #FFF */;}.text-white\/20{color:rgb(255 255 255 / 0.2) /* #FFF */;}.text-white\/80{color:rgb(255 255 255 / 0.8) /* #FFF */;}.font-black{font-weight:900;}.font-bold{font-weight:700;}.font-semibold{font-weight:600;}.leading-normal{line-height:1.5;}.leading-tight{line-height:1.25;}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}.uppercase{text-transform:uppercase;}.underline{text-decoration-line:underline;}.\!no-underline{text-decoration:none !important;}.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgb(0 0 0 / 0.2)),0 0 1px var(--un-text-shadow-color, rgb(1 0 5 / 0.1));text-shadow:var(--un-text-shadow);}.opacity-60{opacity:0.6;}.opacity-75{opacity:0.75;}.hover\:opacity-100:hover{opacity:1;}.outline{outline-style:solid;}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.duration-400{transition-duration:400ms;}.delay-1000{transition-delay:1000ms;}.delay-250{transition-delay:250ms;}.delay-750{transition-delay:750ms;}@media (max-width: 767.9px){.\<md\:hidden{display:none;}}@media (min-width: 768px){.md\:order-none{order:0;}.md\:grid{display:grid;}.md\:hidden{display:none;}.md\:text-center{text-align:center;}.md\:text-left{text-align:left;}.md\:text-right{text-align:right;}}@media (min-width: 1024px){.lg\:w-max{width:max-content;}.lg\:rounded-xl{border-radius:0.75rem;}.lg\:text-4xl{font-size:2.25rem;line-height:2.625rem;}}/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  3. Allow percentage-based heights in the application
*/
html,
body,
#app {
  height: 100%;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  border-style: none;
  font: inherit;
}

button {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
  9. Create a root stacking context
*/
#app {
  isolation: isolate;
}

:root {
  --color-primary: #575B60;
  --color-active: #3f16fb;
  --color-subtle: #9ca3af;
  --bg-soft: rgba(113, 83, 251, 0.35);
  --bg-highlight: rgba(113, 83, 251, 0.15);
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Montserrat-B7OQLoId.woff2) format("woff2");
}
html,
body {
  font-weight:500;
  font-family: Montserrat, museo-sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-optical-sizing: auto;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight:900;
}

h1 {
  font-size:2.625rem;line-height:3rem;
}

h2 {
  font-size:2.25rem;line-height:2.625rem;
}

h3 {
  font-size:2rem;line-height:2.25rem;
}

h4 {
  font-size:1.75rem;line-height:2rem;
}

h5 {
  font-size:1.5rem;line-height:1.75rem;
}

h6 {
  font-size:1.125rem;line-height:1.5rem;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
}

@view-transition {
  navigation: auto;
}
#app {
  view-transition-name: root;
}

.logo {
  view-transition-name: logo;
}

.play-button {
  view-transition-name: play-button;
}

.song-player {
  view-transition-name: player;
}

header {
  view-transition-name: header;
}

main {
  view-transition-name: main;
}

::view-transition-group(song-player) {
  height: 100%;
}

* {
  -webkit-tap-highlight-color: transparent;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

body {
  --un-bg-opacity:1;background-color:rgb(33 33 33 / var(--un-bg-opacity)) /* #212121 */;
  color: white;
}

button {
  color: inherit;
  cursor: pointer;
}

img {
  vertical-align: middle;
}

::selection {
  background: var(--bg-soft);
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
  border-color: var(--bg-soft);
}

.hoverable {
  transition: background 80ms ease;
}
.hoverable.active, .hoverable:hover {
  background: var(--bg-highlight);
}

[begin] {
  display: block;
  cursor: pointer;
  transition: all 0.25s ease;
}

.active[begin] {
  transform: scale(1.2);
  text-shadow: 1px 1px 2px #8c8c8c, 0px 0px 15px #8c8c8c;
}