*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Fraunces,serif;overflow:hidden}button{font-family:inherit;border:none;background:none;cursor:pointer;padding:0}button:disabled{cursor:not-allowed}ul{list-style:none;margin:0;padding:0}:focus-visible{outline:2px solid #d4714e;outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}:root{--color-main: rgba(61, 126, 160, .75);--color-panel: rgba(61, 126, 160, .5);--color-ink: #faf9f8;--color-tranport-icon: rgba(255, 255, 255, .8);--color-surprise-button: #ea631ae4;--color-knob: rgba(61, 126, 160, 1);--color-knob-dial: rgba(61, 126, 160, 1);--color-knob-pointer: rgba(61, 126, 160, .75);--color-accent: #d4714e;--color-accent-soft: #e08a63;--color-progress-track: rgba(145, 182, 201, .7);--color-progress-fill: #00eaf7;--color-yearbar-track: rgba(61, 126, 160, 1);--color-audio-green: #39FF14;--color-toast-text: #ff6a1ae4;--font-fraunces: "Fraunces", serif}.theme-bondi{--color-main: rgba(48, 176, 199, .7);--color-panel: rgba(48, 176, 199, .5);--color-ink: #faf9f8;--color-tranport-icon: rgba(255, 255, 255, .8);--color-surprise-button: #ea631ae4;--color-knob: rgba(48, 176, 199, 1);--color-knob-dial: rgba(48, 176, 199, 1);--color-knob-pointer: rgba(48, 176, 199, .75);--color-accent: #d4714e;--color-accent-soft: #e08a63;--color-progress-track: rgba(130, 205, 220, .7);--color-progress-fill: #00eaf7;--color-yearbar-track: rgba(48, 176, 199, 1);--color-audio-green: #39FF14;--color-toast-text: #ff6a1ae4}.theme-grape{--color-main: rgba(140, 82, 209, .7);--color-panel: rgba(140, 82, 209, .5);--color-ink: #faf9f8;--color-tranport-icon: rgba(255, 255, 255, .8);--color-surprise-button: #ea631ae4;--color-knob: rgba(140, 82, 209, 1);--color-knob-dial: rgba(140, 82, 209, 1);--color-knob-pointer: rgba(140, 82, 209, .75);--color-accent: #e6a13d;--color-accent-soft: #f0bc6f;--color-progress-track: rgba(190, 160, 225, .7);--color-progress-fill: #ff5ee0;--color-yearbar-track: rgba(140, 82, 209, 1);--color-audio-green: #39FF14;--color-toast-text: #ffb020e4}.theme-tangerine{--color-main: rgba(255, 130, 40, .7);--color-panel: rgba(255, 130, 40, .5);--color-ink: #faf9f8;--color-tranport-icon: rgba(255, 255, 255, .8);--color-surprise-button: #1a9be4e4;--color-knob: rgba(255, 130, 40, 1);--color-knob-dial: rgba(255, 130, 40, 1);--color-knob-pointer: rgba(255, 130, 40, .75);--color-accent: #2f7fb5;--color-accent-soft: #5a9dc7;--color-progress-track: rgba(255, 185, 140, .7);--color-progress-fill: #00eaf7;--color-yearbar-track: rgba(255, 130, 40, 1);--color-audio-green: #39FF14;--color-toast-text: #1ac6ffe4}.theme-lime{--color-main: rgba(163, 217, 40, .7);--color-panel: rgba(163, 217, 40, .5);--color-ink: #2a2a1a;--color-tranport-icon: rgba(40, 40, 20, .8);--color-surprise-button: #ea1a6be4;--color-knob: rgba(163, 217, 40, 1);--color-knob-dial: rgba(163, 217, 40, 1);--color-knob-pointer: rgba(163, 217, 40, .75);--color-accent: #d4364e;--color-accent-soft: #e0637f;--color-progress-track: rgba(205, 230, 150, .7);--color-progress-fill: #ff2fb0;--color-yearbar-track: rgba(163, 217, 40, 1);--color-audio-green: #1affc4;--color-toast-text: #ff1a6be4}.theme-strawberry{--color-main: rgba(230, 45, 90, .7);--color-panel: rgba(230, 45, 90, .5);--color-ink: #faf9f8;--color-tranport-icon: rgba(255, 255, 255, .8);--color-surprise-button: #1ae4c3e4;--color-knob: rgba(230, 45, 90, 1);--color-knob-dial: rgba(230, 45, 90, 1);--color-knob-pointer: rgba(230, 45, 90, .75);--color-accent: #2fb5a0;--color-accent-soft: #5ac7b6;--color-progress-track: rgba(240, 150, 175, .7);--color-progress-fill: #00eaf7;--color-yearbar-track: rgba(230, 45, 90, 1);--color-audio-green: #39FF14;--color-toast-text: #1ae4c3e4}.theme-graphite{--color-main: rgba(70, 78, 82, .7);--color-panel: rgba(70, 78, 82, .5);--color-ink: #f5f5f0;--color-tranport-icon: rgba(255, 255, 255, .85);--color-surprise-button: #ea631ae4;--color-knob: rgba(70, 78, 82, 1);--color-knob-dial: rgba(70, 78, 82, 1);--color-knob-pointer: rgba(70, 78, 82, .75);--color-accent: #d4714e;--color-accent-soft: #e08a63;--color-progress-track: rgba(160, 170, 175, .7);--color-progress-fill: #00eaf7;--color-yearbar-track: rgba(70, 78, 82, 1);--color-audio-green: #39FF14;--color-toast-text: #ff6a1ae4}.theme-sunset{--color-main: rgba(240, 130, 110, .7);--color-panel: rgba(240, 130, 110, .5);--color-ink: #3a2420;--color-tranport-icon: rgba(50, 30, 25, .75);--color-surprise-button: #1a9be4e4;--color-knob: rgba(240, 130, 110, 1);--color-knob-dial: rgba(240, 130, 110, 1);--color-knob-pointer: rgba(240, 130, 110, .75);--color-accent: #2f7fb5;--color-accent-soft: #5a9dc7;--color-progress-track: rgba(250, 190, 175, .7);--color-progress-fill: #00eaf7;--color-yearbar-track: rgba(240, 130, 110, 1);--color-audio-green: #39FF14;--color-toast-text: #1ac6ffe4}.theme-rootbeer{--color-main: rgba(120, 70, 35, .7);--color-panel: rgba(120, 70, 35, .5);--color-ink: #faf3e8;--color-tranport-icon: rgba(255, 245, 225, .85);--color-surprise-button: #ea631ae4;--color-knob: rgba(120, 70, 35, 1);--color-knob-dial: rgba(120, 70, 35, 1);--color-knob-pointer: rgba(120, 70, 35, .75);--color-accent: #d4a04e;--color-accent-soft: #e0b96f;--color-progress-track: rgba(190, 155, 120, .7);--color-progress-fill: #00eaf7;--color-yearbar-track: rgba(120, 70, 35, 1);--color-audio-green: #39FF14;--color-toast-text: #ff6a1ae4}.theme-ice{--color-main: rgba(210, 220, 225, .7);--color-panel: rgba(210, 220, 225, .5);--color-ink: #2a2f33;--color-tranport-icon: rgba(40, 45, 50, .75);--color-surprise-button: #ea631ae4;--color-knob: rgba(210, 220, 225, 1);--color-knob-dial: rgba(210, 220, 225, 1);--color-knob-pointer: rgba(210, 220, 225, .75);--color-accent: #2f7fb5;--color-accent-soft: #5a9dc7;--color-progress-track: rgba(230, 235, 238, .7);--color-progress-fill: #00eaf7;--color-yearbar-track: rgba(210, 220, 225, 1);--color-audio-green: #39FF14;--color-toast-text: #ff6a1ae4}.theme-yellow{--color-main: rgba(255, 230, 20, .7);--color-panel: rgba(255, 230, 20, .5);--color-ink: #3a3208;--color-tranport-icon: rgba(55, 46, 8, .8);--color-surprise-button: #1a6be4e4;--color-knob: rgba(255, 230, 20, 1);--color-knob-dial: rgba(255, 230, 20, 1);--color-knob-pointer: rgba(255, 230, 20, .75);--color-accent: #3d6fd4;--color-accent-soft: #6690e0;--color-progress-track: rgba(255, 240, 130, .7);--color-progress-fill: #ff2fb0;--color-yearbar-track: rgba(255, 230, 20, 1);--color-audio-green: #1a2fff;--color-toast-text: #1a6be4e4}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes toast-spin{to{transform:rotate(360deg)}}.theme-switcher{position:absolute;bottom:24px;left:24px;display:flex;flex-wrap:wrap;gap:8px;max-width:120px;z-index:10}.theme-switcher__dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);cursor:pointer;padding:0;transition:transform .15s ease,border-color .15s ease}.theme-switcher__dot--active{border-color:#ffffffe6;transform:scale(1.15)}.theme-switcher__dot--bondi{background:#30b0c7d9}.theme-switcher__dot--grape{background:#8c52d1d9}.theme-switcher__dot--tangerine{background:#ff8228d9}.theme-switcher__dot--lime{background:#a3d928d9}.theme-switcher__dot--strawberry{background:#e62d5ad9}.theme-switcher__dot--graphite{background:#464e52d9}.theme-switcher__dot--sunset{background:#f0826ed9}.theme-switcher__dot--rootbeer{background:#784623d9}.theme-switcher__dot--ice{background:#d2dce1d9}.theme-switcher__dot--yellow{background:#f0d228d9}.app{height:100dvh;display:flex;align-items:center;justify-content:center}.app__panel{--case-detail-image: url(/assets/new-pcb-BXr3BpLW.webp);height:min(80dvh,45vw);max-width:75vw;aspect-ratio:16 / 9;background-color:var(--color-main);padding:1.5rem 2rem;display:flex;flex-direction:column;gap:1.25rem;border-radius:1rem;position:relative;box-shadow:0 4px 8px #00000040,0 1px 2px #0003,inset 0 1px #fff6,inset 0 -3px 4px #0003,inset 0 0 0 2px #ffffff59,inset 0 0 0 10px #00000024}.app__panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;pointer-events:none;background-image:var(--case-detail-image),radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.4) 100%);background-size:102.5% 100%,100% 100%;background-position:center,center;background-repeat:no-repeat;background-blend-mode:normal,multiply;mix-blend-mode:multiply}.app__panel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#fff6,#ffffff24 16%,#fff0 38%);mix-blend-mode:overlay}.app__main-row{width:95%;justify-self:center;align-self:center;background-color:var(--color-panel);display:flex;flex-direction:column;gap:1.5rem;padding:.75rem 2rem 1.5rem;position:relative;clip-path:url(#mainRowShapeLandscape);box-shadow:0 6px 14px #0003,0 2px 4px #0000001f,inset 0 -7px 12px #00000061,inset -7px 0 12px #0000003d;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.app__main-row:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;clip-path:url(#mainRowShapeLandscape)}.app__main-row:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;clip-path:url(#mainRowShapeLandscape);background:linear-gradient(160deg,#ffffff38,#ffffff14 35%,#ffffff14 65%,#fff3);mix-blend-mode:overlay}.mainrow-emboss-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4}.app__main-row-bottom{display:flex;flex-direction:row;gap:4%}.app__player-col{width:75%}.app__player-side{max-height:85%;width:20%}.app__bottom{display:flex;flex-direction:column;gap:1.25rem}.app__bottom-row{display:flex;gap:2rem}.app__bottom-row-left{width:65%}.app__bottom-row-right{width:calc(35% - 2rem)}.header{align-items:center;display:grid;grid-template-columns:25% 50% 4% 21%;grid-template-areas:"first second empty third"}.header__logo{grid-area:first;z-index:2;font-family:var(--font-fraunces);font-style:italic;font-size:1.875rem;color:var(--color-ink);margin:0}.header_actions-left{grid-area:second;display:flex;justify-content:flex-end;align-items:center;gap:2rem}.mute-btn{color:color-mix(in srgb,var(--color-ink) 50%,transparent);display:flex;transition:color .15s ease;height:20px;width:20px}.mute-btn:active{transform:scale(.96)}.mute-btn:hover{color:var(--color-ink)}.audio-toggle{font-family:var(--font-fraunces);font-size:1.125rem;background:transparent;color:var(--color-ink);transition:color .15s ease}.audio-toggle--active{color:var(--color-audio-green);text-shadow:0 0 12px rgba(102,225,0,.85),0 0 16px rgba(0,225,0,.85)}.lang-toggle{grid-area:third;position:relative;display:inline-block;font-family:var(--font-fraunces);font-size:1.125rem;color:var(--color-ink);line-height:1.3}.lang-toggle__option{display:block;width:100%;color:#e4dfddb3;padding-left:24px;padding-top:4px;text-align:left;font-size:1rem}.lang-toggle__selected{display:flex;align-items:center;gap:4px;padding-top:6px;color:var(--color-ink);font:inherit;cursor:pointer}.lang-toggle__selected:active{transform:translateY(1px)}.lang-toggle__selected svg{transition:transform .2s ease}.lang-toggle__dropdown{position:absolute;top:calc(100% + 0px);left:0;min-width:100%;z-index:1000}.lang-toggle__chevron{transition:transform .5s ease}.player-area{position:relative;aspect-ratio:16 / 9;overflow:hidden;border:8px solid rgba(0,0,0,.25)}.video-stage{background-color:#000}.player-area--vinyl .state-message__title{color:#fff;background-color:#000000bf;padding:.25rem .5rem}.player-area--vinyl .state-message__subtitle{color:#b2afae99;background-color:#000000bf;padding:.25rem .5rem}.player-area__yt-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.player-area__yt{width:100%;height:100%}.state-message{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center;padding:0 2rem}.state-message__title{font-family:var(--font-fraunces);font-size:1.5rem;color:var(--color-main);margin:0;z-index:10;padding:.25rem .5rem}.state-message__subtitle{font-family:var(--font-fraunces);font-size:.875rem;color:#fbeedd99;margin:0;z-index:10;padding:.25rem .5rem}.state-message__action{margin-top:.5rem;border-radius:.375rem;background-color:var(--color-accent);padding:.5rem 1.5rem;font-family:var(--font-fraunces);font-weight:600;color:var(--color-main);color:#fff;transition:background-color .15s ease;z-index:10}.state-message__action:hover{background-color:var(--color-accent-soft)}.player-area__stage{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform-origin:50% 50%}.vinyl-layer{display:flex;align-items:center;justify-content:center}.vinyl-photo{height:100%;width:auto;max-width:60%;object-fit:contain;border-radius:50%;animation-name:spin;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:10s;animation-play-state:paused;z-index:1}.vinyl-butterfly-photo{position:absolute;top:-6%;left:3%;width:30%;transform:rotate(-25deg);z-index:2}.vinyl-flower-photo{position:absolute;top:10%;right:20%;width:15%;z-index:3}.vinyl-flowers-photo{position:absolute;bottom:-8%;right:15%;transform:rotate(-45deg);width:32%;z-index:3}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.spinner{height:2.5rem;width:2.5rem;border-radius:50%;border:2px solid rgba(251,238,221,.2);border-top-color:var(--color-main);animation:spin 2.8s linear infinite}.sidebar{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;padding-top:1rem}.sidebar__info{font-family:var(--font-fraunces);font-size:1.125rem;color:var(--color-ink);line-height:1.6}.sidebar__info p{margin:0}.sidebar__info p{display:flex;align-items:center;gap:6px;min-width:0}.sidebar__info .label{flex-shrink:0}.sidebar__info .value{white-space:nowrap}.marquee{position:relative;display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap}.marquee__track{display:inline-flex;align-items:center;white-space:nowrap}.marquee--overflow{mask-image:linear-gradient(to right,#000 0%,#000 60%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 60%,transparent 100%)}.marquee__text{display:inline-block;white-space:nowrap}.marquee__separator{padding:0 60px}.marquee--overflow:hover{mask-image:none;-webkit-mask-image:none}.marquee--overflow:hover .marquee__track{animation:marquee-scroll 6s linear infinite}.marquee--overflow:hover:after{display:none}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.sidebar__middle{display:flex;flex-direction:column;gap:1.25rem}.sidebar__bottom{padding-top:.75rem}.sidebar__time{font-family:var(--font-fraunces);font-size:.875rem;color:var(--color-ink);opacity:.85;margin-bottom:.8rem}.progress-track{height:.375rem;width:70%;border-radius:999px;background-color:var(--color-progress-track);overflow:hidden}.progress-fill{height:100%;background-color:var(--color-progress-fill)}.volume-row{display:flex;align-items:center;gap:.75rem}.volume-row svg{color:#2b2420b3;flex-shrink:0}.volume-row input[type=range]{flex:1;accent-color:var(--color-ink)}.transport{display:flex;align-items:center;gap:1.5rem}.transport-btn{color:var(--color-ink);display:flex}.transport-icon{color:var(--color-tranport-icon)}.transport-icon:active{transform:scale(.98)}.play-icon{width:24px}.pause-icon{width:24px;height:28px}.next-icon{width:42px}.transport-btn:disabled{color:#2b24204d}.transport-btn:active{transform:scale(.98)}.song-list-toggle{display:flex;align-items:center;gap:.5rem;font-family:var(--font-fraunces);font-size:1.35rem;color:var(--color-ink);width:fit-content}.song-list-toggle{transform:translate(-2px)}.song-list-toggle:disabled{color:#dbe2e3b3}.surprise-btn-wrapper{position:relative;margin-top:1.25rem;border:none;padding:0;background:transparent;isolation:isolate}.surprise-btn-wrapper:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;background-color:color-mix(in srgb,var(--color-main) 90%,#000 10%);border-radius:8px;z-index:-1}.surprise-btn{position:relative;display:block;border:none;border-radius:.375rem;padding:.85rem 1.3rem;background-color:var(--color-surprise-button);font-family:var(--font-fraunces);font-size:1rem;color:#fff;box-shadow:0 1px #00000040,0 5px 8px #0000002e,inset 0 -1px #0000002e;transition:transform .1s ease,box-shadow .1s ease}.surprise-btn-wrapper:active .surprise-btn{transform:scale(.98);box-shadow:0 1px 2px var(--color-surprise-button),inset 0 2px 4px #00000040}.genre-grid{padding-left:4rem;display:grid;grid-template-columns:repeat(10,1fr);gap:1rem}.genre-btn-bg{position:relative}.genre-btn-bg:before{content:"";top:-4px;right:-3px;bottom:-4px;left:-3px;position:absolute;background-color:color-mix(in srgb,var(--color-panel) 85%,#000 15%);border-radius:4px}.genre-btn{position:relative;border-radius:4px;padding:.625rem .5rem;font-size:.84rem;font-family:var(--font-fraunces);color:#fff;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 2px color-mix(in srgb,var(--gradient-end) 70%,black),0 5px 8px #0000002e,inset 0 -1px #00000026,inset 0 1px #ffffff80,inset 0 2px 3px #ffffff40}.genre-btn:active{transform:scale(.96);filter:brightness(1.1);box-shadow:0 0 10px color-mix(in srgb,var(--gradient-start) 75%,transparent),0 0 12px color-mix(in srgb,var(--gradient-end) 60%,transparent),0 0 16px color-mix(in srgb,var(--gradient-end) 35%,transparent),inset 0 2px 4px #00000040,inset 0 -1px #ffffff26}.year-bar{display:flex;max-width:calc(80% - 3rem);align-items:center;gap:.75rem;padding-left:2rem}.year-bar__label{font-family:var(--font-fraunces);font-size:.75rem;color:var(--color-ink)}.year-bar__track{position:relative;flex:1;height:1.25rem;background-color:var(--color-yearbar-track);box-shadow:inset 1px 1px 2px #00000073;background-image:repeating-linear-gradient(to bottom,transparent 0 5px,color-mix(in srgb,var(--color-ink) 15%,transparent) 5px 6px);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.year-bar__marker{position:absolute;height:1.25rem;width:.75rem;background-color:var(--color-ink);background-color:#fff}.knob-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;left:15%;bottom:75%}.knob-wrap:before{content:"";position:absolute;width:45%;height:110%;border-radius:50%;background:var(--color-panel);top:0%}.knob-wrap__readout{font-family:var(--font-fraunces);font-size:1rem;color:var(--color-ink);margin:0 0 .25rem;font-variant-numeric:tabular-nums;z-index:1}.knob{position:relative;overflow:hidden;height:7.5rem;width:7.5rem;border-radius:50%;background-color:var(--color-knob);cursor:grab;outline:none}.knob:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 32% 22%,#fff9,#fff3 26%,#fff0 55%);box-shadow:inset -3px -3px 6px var(--color-shadow-edge),inset 3px 3px 6px var(--color-highlight-soft),0 4px 8px var(--color-shadow-drop)}.knob:active{cursor:grabbing}.knob__tick{position:absolute;left:50%;top:55%;height:.25rem;width:1px;background-color:var(--color-ink);border-radius:10px 10px 0 0}.knob__tick--major{height:.5rem;width:1.5px;top:52%}.knob__track{position:absolute;top:.75rem;right:.75rem;bottom:.75rem;left:.75rem;border-radius:50%;background-image:repeating-conic-gradient(from 0deg,transparent 0deg 5deg,rgba(255,255,255,.15) 5deg 6deg);box-shadow:0 0 8px #00000040,inset 0 2px 3px #ffffff40,inset 0 -2px 4px #0003}.knob__dial{position:absolute;top:1rem;right:1rem;bottom:1rem;left:1rem;border-radius:50%;background-color:var(--color-knob-dial);display:flex;align-items:flex-start;justify-content:center;padding-top:.5rem}.knob__pointer{height:1rem;width:1rem;border-radius:999px;border:1px solid #ffffff98;border:1px solid var(--color-ink);background-color:var(--color-knob-pointer);box-shadow:inset 0 0 2px #fff;box-shadow:inset 0 0 2px var(--color-ink)}.song-list-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0006;z-index:40}.song-list-panel{position:fixed;top:0;right:0;height:100%;width:100%;max-width:24rem;background-color:var(--color-main);z-index:50;box-shadow:-8px 0 24px #00000026;padding:1.5rem;overflow-y:auto}.song-list-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.song-list-panel__header h2{font-family:var(--font-fraunces);font-size:1.5rem;color:var(--color-ink);margin:0}.song-list-panel__header button{color:var(--color-ink);display:flex}.song-list-panel__empty{font-family:var(--font-fraunces);color:#2b242099}.song-list{display:flex;flex-direction:column;gap:.5rem}.song-list-item{width:100%;text-align:left;border-radius:.375rem;padding:.75rem 1rem;font-family:var(--font-fraunces);background-color:#0000000d;color:var(--color-ink);transition:background-color .15s ease}.song-list-item:hover{background-color:#0000001a}.song-list-item--active{background-color:var(--color-accent);color:#fff}.song-list-item__title{font-weight:600;margin:0}.song-list-item__artist{font-size:.875rem;opacity:.8;margin:0}.toast-stack{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:.5rem}.toast{cursor:pointer;border-radius:16px;background-color:var(--color-ink);color:var(--color-toast-text);font-family:var(--font-fraunces);font-size:.875rem;padding:.5rem 1.25rem;box-shadow:0 8px 24px #0003}.toast--success{color:#1a7a3c}.app__panel{overflow:hidden}.app__panel-inner{width:1090px;height:613px;transform-origin:top left;display:flex;flex-direction:column;gap:1.25rem}.notfound{height:100dvh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;background-color:#fff;font-family:Fraunces,serif;color:#1a1a1a;padding:1.5rem;text-align:center}.notfound__digits{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2vw,1.25rem)}.notfound__digit{font-size:clamp(10rem,25vw,18rem);font-weight:700;line-height:1;color:#000}.notfound__image{width:clamp(10rem,25vw,18rem);height:auto}.notfound__subtitle{font-size:clamp(.85rem,1.6vw,1rem);letter-spacing:.02em;color:#555;margin:0}.notfound__back{font-size:clamp(.8rem,1.5vw,.95rem);color:#1a1a1a;text-decoration:none}.notfound__back:hover{text-decoration:underline}.info-btn{position:fixed;right:1.5rem;bottom:1rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#0009;z-index:20;transition:transform .15s ease,background-color .15s ease}.info-btn:hover{transform:translateY(-2px)}.about{height:100dvh;width:100%;background-color:#fff;color:#1a1a1a;font-family:Fraunces,serif;overflow-y:auto;scrollbar-width:none}.about__inner{max-width:640px;margin:0 auto;padding:3rem 1.5rem 4rem}.about__wordmark{display:inline-block;font-size:1.1rem;font-weight:700;text-decoration:none;color:#1a1a1a;margin-bottom:2rem}.about__h1{font-size:clamp(1.75rem,5vw,2.25rem);margin:0 0 2rem}.about__section{margin-bottom:2.25rem}.about__section h2{font-size:clamp(1.05rem,3vw,1.25rem);margin:0 0 .75rem}.about__section p{font-size:.95rem;line-height:1.65;color:#333;margin:0 0 .9rem}.about__section ul{margin:0 0 .9rem;padding-left:1.25rem;list-style:disc}.about__section li{font-size:.95rem;line-height:1.6;color:#333;margin-bottom:.4rem}.about__back{display:inline-block;margin-top:1rem;font-size:.9rem;color:#1a1a1a;text-decoration:none}.about__back:hover{text-decoration:underline}.about__section--form{padding:1.5rem;border:1px solid #e5e5e5;border-radius:12px}.about__form{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.about__field{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:#555}.about__field input,.about__field select,.about__field textarea{font-family:inherit;font-size:.95rem;color:#1a1a1a;padding:.6rem .75rem;border:1px solid #d5d5d5;border-radius:8px;background-color:#fafafa;resize:none}.about__field textarea::-webkit-scrollbar{width:3px}.about__field textarea::-webkit-scrollbar-track{background:transparent}.about__field textarea::-webkit-scrollbar-thumb{background:#575757;height:12px;border-radius:5px}.about__field textarea::-webkit-scrollbar-button{display:none}.about__field input:focus,.about__field select:focus,.about__field textarea:focus{outline:2px solid #1a1a1a;outline-offset:1px}.about__honeypot{position:absolute;left:-9999px;opacity:0;pointer-events:none}.about__submit{align-self:flex-start;padding:.7rem 1.6rem;border-radius:999px;background-color:#1a1a1a;color:#fff;font-weight:600;font-size:.9rem}.about__submit:disabled{opacity:.6;cursor:not-allowed}.about__form-note{font-size:.85rem;margin:0}.about__form-note--success{color:#1a7a3c}.about__form-note--error{color:#b3261e}.connection-backdrop{position:fixed;left:0;right:0;bottom:0;height:220px;z-index:50;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:linear-gradient(to top,#00000059,#0000);-webkit-mask-image:linear-gradient(to top,black 0%,black 35%,transparent 100%);mask-image:linear-gradient(to top,black 0%,black 35%,transparent 100%)}.connection-sheet{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;padding:1rem 1.5rem;padding-left:10%;background-color:var(--color-ink);color:var(--color-knob);font-family:var(--font-fraunces);font-size:1.25rem;text-align:center;box-shadow:0 -4px 24px #0003}.connection-sheet__spinner{--vinyl-color: #111;--vinyl-groove: #242424;--label-color: var(--color-knob, var(--color-accent));display:inline-flex;width:40px;height:40px;animation:connection-sheet-spin 2s linear infinite}.connection-sheet__spinner svg{width:100%;height:100%}.connection-sheet__spinner .disc{fill:var(--vinyl-color)}.connection-sheet__spinner .groove{fill:none;stroke:var(--vinyl-groove);stroke-width:.55}.connection-sheet__spinner .shine{fill:url(#vinyl-shine)}.connection-sheet__spinner .label{fill:var(--label-color)}.connection-sheet__spinner .hole{fill:var(--color-ink)}@keyframes connection-sheet-spin{to{transform:rotate(360deg)}}.connection-pill{position:fixed;left:35%;bottom:2rem;transform:translate(-50%);z-index:60;display:flex;align-items:center;gap:.85rem;max-width:min(90vw,420px);padding:.65rem .65rem .65rem 1.25rem;border-radius:999px;background-color:var(--color-ink);color:var(--color-toast-text);font-family:var(--font-fraunces);font-size:.9rem;box-shadow:0 8px 24px #00000040}.connection-pill__retry{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background-color:var(--color-accent);color:var(--color-ink)}.connection-pill__retry-icon--spinning{animation:connection-pill-retry-spin .75s ease-out}@keyframes connection-pill-retry-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (orientation: portrait){.app{align-items:flex-start;margin-top:3.25rem}.app__panel{--case-detail-image: url(/assets/new-pcb-vertical-iMVGhf8f.webp);aspect-ratio:9/16;height:min(80dvh,calc(85vw * 16 / 9));max-width:80vw;padding:.75rem}.app__panel:before{background-size:100% 102%,100% 100%}.app__panel-inner{width:450px;height:900px}.app__main-row{width:100%;clip-path:url(#mainRowShapePotrait);padding:.5rem;gap:1rem;box-shadow:0 6px 14px #0003,0 2px 4px #0000001f,inset 0 -7px 12px #00000061,inset 0 0 12px #0000003d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.app__bottom{flex:1;flex-direction:row;align-items:stretch;gap:1rem}.header{grid-template-columns:1fr auto;grid-template-areas:"first first" "second third";row-gap:.75rem;padding:0rem 1rem}.header_actions-left{justify-content:flex-start;gap:1rem}.lang-toggle__dropdown{position:absolute;bottom:calc(100% + 0px);top:auto;left:0;min-width:100%;z-index:1000}.lang-toggle__chevron{transform:rotate(180deg)}.lang-toggle__option{padding-top:2px}.app__main-row-bottom{flex-direction:column;gap:1rem}.app__player-col,.app__player-side{width:100%;max-height:none}.player-area{border:none}.sidebar{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:.5fr .5fr 1fr 1fr .75fr;grid-template-areas:"name     year" "artist   genre" "progress surprise" "controls surprise" "songlist songlist";column-gap:1rem;padding:0 1rem}.sidebar__info,.sidebar__middle,.sidebar__bottom{display:contents}.sidebar__info p:nth-child(1){grid-area:year;margin:0}.sidebar__info p:nth-child(2){grid-area:name;margin:0}.sidebar__info p:nth-child(3){grid-area:artist;margin:0}.sidebar__info p:nth-child(4){grid-area:genre;margin:0}.sidebar__middle>div:first-child{grid-area:progress}.transport{grid-area:controls;align-self:center}.surprise-btn,.surprise-btn-wrapper{grid-area:surprise;justify-self:end;align-self:center;margin-top:0}.surprise-btn-wrapper:before{top:-3px;right:-3px;bottom:-3px;left:-3px}.song-list-toggle{grid-area:songlist;justify-self:center;padding-right:30%}.app__bottom-row{flex-direction:column;flex:1;gap:.75rem;position:relative;width:100%;min-width:0}.app__bottom-row-right{order:-1;align-self:flex-end;position:absolute;right:6%;right:2.5rem;bottom:100%;margin-bottom:-5.5rem;z-index:1}.app__bottom-row-left{width:100%}.genre-grid{gap:0;display:flex;flex-wrap:wrap;column-gap:.75rem;padding:1rem .5rem 0}.genre-btn-bg{flex:0 0 auto;margin-bottom:2rem;order:1}.genre-grid:before,.genre-grid:after{content:"";flex-basis:100%;height:0}.genre-grid:before{order:2}.genre-grid:after{order:4}.genre-btn-bg:nth-child(n+4){order:3}.genre-btn-bg:nth-child(n+7){order:5}.genre-grid:has(>:nth-child(7):last-child)>:nth-child(3){order:3}.genre-grid:has(>:nth-child(7):last-child)>:nth-child(n+5){order:5}.genre-btn{display:block;width:100%;padding:.8rem .9rem}.knob-wrap{position:static;left:auto;bottom:auto;transform:scale(1.2);transform-origin:center}.knob-wrap:before{width:130%}.song-list-panel{bottom:0;top:40%;height:60vh;width:100%;max-width:none;padding-bottom:4rem}.toast-stack{top:4%;left:50%;gap:.5rem}.connection-backdrop{top:0;bottom:unset;background:linear-gradient(to bottom,#00000059,#0000);-webkit-mask-image:linear-gradient(to bottom,black 0%,black 35%,transparent 100%);mask-image:linear-gradient(to bottom,black 0%,black 35%,transparent 100%)}.connection-sheet{top:0;bottom:unset}.connection-pill{left:5%}.header__logo{font-size:2rem}.audio-toggle,.lang-toggle{font-size:1.4rem}.lang-toggle__option{font-size:1.25rem}.mute-btn{height:22px;width:22px}.state-message__title{font-size:1.75rem}.state-message__subtitle{font-size:1.1rem}.sidebar__info{font-size:1.35rem}.sidebar__time{font-size:1.2rem}.song-list-toggle{font-size:1.4rem}.surprise-btn{font-size:1.2rem}.genre-btn{font-size:1.1rem}.year-bar__label{font-size:.95rem}.knob-wrap__readout{font-size:1rem}}