:root{--plum: #2a1638;--plum-glass: rgba(42, 22, 56, .84);--plum-edge: #4f2d63;--night: #0d0818;--peach: #ffe3c9;--peach-dim: #d6a7a9;--sun: #ffc96b;--ember: #ff8a66;--pixel: 2px;--notch: 6px;--panel-gap: 16px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);color:var(--peach);font-family:Pixelify Sans,ui-rounded,system-ui,sans-serif;font-size:16px;line-height:1.4}p{margin:0}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:var(--pixel) solid var(--sun);outline-offset:3px}.scene{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;object-fit:cover;image-rendering:pixelated}@media(max-width:480px){.scene{height:64vh;object-position:62% 50%}}.player{position:fixed;left:24px;bottom:24px;width:min(360px,calc(100vw - 32px));display:grid;gap:var(--panel-gap);padding:20px 22px 18px;background:var(--plum-glass);box-shadow:0 0 0 var(--pixel) var(--plum-edge),6px 6px #0d08188c;clip-path:polygon(var(--notch) 0,calc(100% - var(--notch)) 0,100% var(--notch),100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,var(--notch) 100%,0 calc(100% - var(--notch)),0 var(--notch))}.mood{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.mood__name{font-size:1.125rem}.mood__steps{display:flex;align-items:flex-end;gap:6px}.mood-step{width:22px;padding:0;border:none;background:transparent;box-shadow:inset 0 0 0 var(--pixel) var(--peach-dim)}.mood-step[data-filled=true]{background:var(--sun);box-shadow:none}.mood-step:hover{box-shadow:inset 0 0 0 var(--pixel) var(--sun)}.ambiences{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ambience-button{padding:8px 4px;border:none;background:transparent;box-shadow:inset 0 0 0 var(--pixel) var(--plum-edge);color:var(--peach-dim)}.ambience-button:hover{color:var(--peach);box-shadow:inset 0 0 0 var(--pixel) var(--peach-dim)}.ambience-button[data-status=on]{background:var(--sun);color:var(--plum);box-shadow:none}.ambience-button[data-status=loading]{opacity:.6}.ambience-button[data-status=missing]{text-decoration:line-through;opacity:.6}.shortcuts{font-size:.875rem;color:var(--peach-dim)}@media(max-width:480px){.player{left:12px;right:12px;bottom:12px;width:auto}}@media(pointer:coarse){.shortcuts{display:none}}.now-playing{display:flex;align-items:center;gap:16px}.play-button{flex:none;width:56px;height:56px;display:grid;place-items:center;border:none;background:var(--sun);box-shadow:inset 0 -4px 0 0 var(--ember)}.play-button:hover{background:#ffd88c}.play-button:active{box-shadow:inset 0 4px 0 0 var(--ember)}.play-button__icon{width:0;height:0;margin-left:4px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid var(--plum)}.play-button[data-playing=true] .play-button__icon{width:18px;height:20px;margin-left:0;border:none;background:linear-gradient(to right,var(--plum) 0 6px,transparent 6px 12px,var(--plum) 12px 18px)}.track-info{display:grid;gap:6px;margin-bottom:-2px}.track-info[hidden]{display:none}.track-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}.track-instruments{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.8125rem;color:var(--peach-dim)}.track-instruments__item{display:inline-flex;align-items:center;gap:7px}.track-instruments__item .pixel-icon{width:auto;height:calc(var(--pixel) * 7);color:var(--sun)}.track-line__title{font-size:1.05rem;color:var(--sun)}.track-line__key{font-size:.875rem;color:var(--peach-dim)}.next-track-button{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-left:auto;padding:0;border:none;background:transparent;box-shadow:inset 0 0 0 var(--pixel) var(--plum-edge);color:var(--peach-dim)}.next-track-button:hover{color:var(--sun);box-shadow:inset 0 0 0 var(--pixel) var(--peach-dim)}.next-track-button .pixel-icon{width:20px}.chord-name{font-size:2.25rem;font-weight:600;line-height:1;letter-spacing:.02em}.song-details{display:flex;gap:14px;margin-top:6px;color:var(--peach-dim)}.ambience-controls{display:grid;gap:10px}.volume{display:flex;align-items:center;gap:12px;color:var(--peach-dim)}.volume__icon{display:grid;flex:none}.volume__slider{--volume-fill: 100%;flex:1;height:24px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.volume__slider::-webkit-slider-runnable-track{height:8px;background:linear-gradient(to right,var(--sun) var(--volume-fill),var(--plum-edge) var(--volume-fill))}.volume__slider::-moz-range-track{height:8px;background:linear-gradient(to right,var(--sun) var(--volume-fill),var(--plum-edge) var(--volume-fill))}.volume__slider::-webkit-slider-thumb{width:14px;height:22px;margin-top:-7px;border:none;border-radius:0;background:var(--peach);box-shadow:inset 0 -4px 0 0 var(--ember);-webkit-appearance:none;-moz-appearance:none;appearance:none}.volume__slider::-moz-range-thumb{width:14px;height:22px;border:none;border-radius:0;background:var(--peach);box-shadow:inset 0 -4px 0 0 var(--ember)}.volume__slider:focus-visible{outline-offset:4px}.volume__value{flex:none;min-width:3.5em;text-align:right;font-variant-numeric:tabular-nums}.top-bar{position:fixed;top:24px;right:24px;display:flex;align-items:flex-start;gap:12px}.scene-switch,.install-button{background:var(--plum-glass);box-shadow:0 0 0 var(--pixel) var(--plum-edge),4px 4px #0d08188c;clip-path:polygon(var(--notch) 0,calc(100% - var(--notch)) 0,100% var(--notch),100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,var(--notch) 100%,0 calc(100% - var(--notch)),0 var(--notch))}.scene-switch{display:flex;gap:4px;padding:4px}.install-button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:none;color:var(--peach-dim)}.install-button[hidden]{display:none}.install-button:hover{color:var(--sun)}.scene-switch__button{display:grid;place-items:center;width:44px;height:40px;padding:0;border:none;background:transparent;color:var(--peach-dim)}.scene-switch__button:hover{color:var(--peach)}.scene-switch__button[aria-pressed=true]{background:var(--sun);color:var(--plum)}.pixel-icon{width:26px;fill:currentColor;shape-rendering:crispEdges}.pixel-icon__accent{opacity:.55}@media(max-width:480px){.top-bar{top:12px;right:12px}}