:root{color-scheme:dark;--cream:#f5e4bd;--red:#842d21;--gold:#e3b665;font-family:Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#44372c,#151311 70%);color:var(--cream);min-height:100vh}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #6cebd9;outline-offset:3px}button:active:not(:disabled){transform:translateY(2px)}.topbar{max-width:1240px;margin:auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;letter-spacing:1px;color:#c9ba9b}.topbar div{display:flex;gap:8px}.topbar button,dialog button{background:#302921;border:1px solid #9d8864;color:var(--cream);border-radius:6px;padding:10px 14px;min-height:44px;font-size:14px}.cabinet{max-width:1240px;margin:0 auto 24px;padding:14px;border-radius:42px 42px 20px 20px;background:linear-gradient(100deg,#2c100c,#752b20 12%,#421611 50%,#762c20 88%,#29100c);border:5px solid #b4a081;box-shadow:0 0 0 3px #262422,0 0 0 6px #857c68,inset 0 0 0 3px #f0dbb0,0 22px 65px #000b}.chrome{border:7px solid #aaa28d;border-image:linear-gradient(135deg,#51493c,#f7edcf 16%,#807969 23%,#eee2c3 32%,#4b4438 48%,#d6cdb2 62%,#fff3d7 76%,#605746 90%) 1;box-shadow:inset 0 0 0 2px #37261c,0 3px 7px #000b}.crown{display:flex;align-items:center;justify-content:space-around;background:linear-gradient(#17433e,#102e2a);border-radius:32px;margin-bottom:14px;padding:10px;position:relative}.sign{text-align:center;color:#6d2319;background:radial-gradient(ellipse,#fff5d6,#e7bd7b);border:3px solid #b38c4c;border-radius:10px;padding:8px 50px;box-shadow:0 0 18px #ffc36e85,inset 0 0 20px #b87c2b88}.sign>span{font:14px Georgia;letter-spacing:8px}h1{font:clamp(30px,4vw,57px) Georgia,serif;letter-spacing:9px;margin:0 0 4px;text-shadow:1px 1px #fff8de}.sign small{font-size:10px;letter-spacing:3px}.star{color:#e6be77;font-size:64px;text-shadow:1px 3px #734d22}.body{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}.catalog{padding:13px 14px 6px;background:linear-gradient(#392d1e,#644522);box-shadow:inset 0 0 24px #f1a43b55,0 3px 7px #000b}.catalog-title{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;margin:0 0 12px;color:#efd5a0}.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:300px}.card{border:3px solid #b7955f;border-radius:6px;padding:7px 9px;background:radial-gradient(ellipse at 50% 30%,#fff2d3,#e1c38f);box-shadow:0 0 0 2px #31261c,inset 0 0 14px #a7733266,0 0 9px #ffbb5d66;min-width:0;position:relative}.card:after{content:'✦';color:#b16d3d;position:absolute;right:4px;top:calc(50% - 8px);font-size:12px}.song{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;color:#3e281d;padding:9px 2px;min-height:53px;border-radius:0}.song:first-child{border-bottom:1px solid #b87949}.song b{font:700 clamp(20px,2.4vw,30px) Georgia;color:#9d3226;flex-shrink:0}.song span{font-family:'Arial Narrow',Arial,sans-serif;font-size:clamp(13px,1.5vw,18px);font-weight:bold;line-height:1.15;overflow-wrap:anywhere}.song small{display:block;font:11px Georgia;letter-spacing:.5px;margin-top:5px;text-transform:uppercase}.song.selected{background:#e6b972aa;box-shadow:inset 0 0 0 2px #9d3226}.song.current b{color:#176249}.empty{color:#9c825b;text-align:center;font:12px Georgia;letter-spacing:2px;min-height:53px;display:grid;place-items:center}.paging{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:9px}.paging span{text-align:center;font-size:11px;color:#dfc79d}.paging button{background:#d5bd8e;color:#502d1d;border:1px solid #9f7844;min-height:40px;min-width:44px;border-radius:4px}.turntable{background:#221b16;display:flex;flex-direction:column;min-width:0}.glass{position:relative;flex:1;min-height:240px;overflow:hidden;background:linear-gradient(135deg,#d0ac6b22 0%,transparent 40%,#fff1bb11 42%,transparent 65%),radial-gradient(ellipse,#79542e,#1d160f 75%);box-shadow:inset 0 0 22px #000,inset 7px 0 12px #ffb94e66,inset -7px 0 12px #ffb94e66;padding:20px}.mechanism{display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#bda075}.record{width:min(24vw,260px);aspect-ratio:1;margin:15px auto 8px;border-radius:50%;position:relative;background:repeating-radial-gradient(circle,#151515 0 2px,#242321 3px,#111 4px);border:5px solid #171614;box-shadow:0 15px 20px #0009;display:grid;place-items:center}.record:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent,#ffffff18,transparent 30%,transparent 50%,#ffffff18,transparent 80%)}.label{height:39%;width:39%;border-radius:50%;background:radial-gradient(#b54a35,#812c22);border:2px solid #c58053;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f7d9a3;gap:4px}.label span{font:9px Georgia}.label b{font:24px Georgia}.label small{font-size:6px;letter-spacing:1px}.spindle{position:absolute;width:10px;height:10px;border-radius:50%;background:linear-gradient(120deg,#fff,#8f8367);box-shadow:1px 2px 3px #000}.arm{position:absolute;right:9%;top:15%;width:14px;height:58%;background:linear-gradient(90deg,#544b3c,#f4e5bf 45%,#a69a7e);border-radius:8px;transform:rotate(-20deg);transform-origin:50% 0;filter:drop-shadow(4px 4px 3px #0008);transition:transform .9s}.arm:before{content:'';position:absolute;width:36px;height:36px;top:-8px;left:-11px;background:radial-gradient(#333,#d6c7a3 40%,#5b5140);border-radius:50%}.arm i{position:absolute;width:26px;height:48px;bottom:-9px;left:-6px;background:linear-gradient(90deg,#9f937b,#e6d9bb,#77694f);border-radius:5px}.playing .arm{transform:rotate(13deg)}.nowpanel{text-align:center;padding:11px 12px;background:radial-gradient(#ffeac1,#bf8847);color:#6f2b1b;border-top:5px solid #9d8c6c;box-shadow:inset 0 0 16px #99652b}.nowpanel>span{font-size:10px;letter-spacing:2px}.nowpanel h2{font:700 20px Georgia;margin:7px 0;overflow-wrap:anywhere}.nowpanel p{font-size:12px;margin:5px 0}.nowpanel a{color:#274b36;font-size:11px}.console{margin-top:14px;padding:14px;display:grid;grid-template-columns:1.4fr .65fr 1fr;gap:18px;background:linear-gradient(#5f2119,#35130e)}.engraved{display:block;font-size:10px;letter-spacing:1.6px;color:#e9cf9b;margin-bottom:9px;text-align:center}.keys{display:flex;gap:6px;justify-content:center}.keys button,.clear{border:3px solid #8f7a58;border-radius:8px;background:linear-gradient(110deg,#fff5d8,#e5c799);box-shadow:inset 0 3px 2px #fff8de,0 4px 0 #35281c,0 6px 5px #0007;color:#8c2c22;font:700 25px Georgia;min-width:40px;flex:1;height:57px}.keys button.active{background:#d8a458;box-shadow:inset 0 3px 5px #67441d}.lowerkeys{display:flex;gap:12px;align-items:center;margin-top:10px}.lowerkeys .keys{flex:1}.clear{font:11px Arial;height:42px;min-width:70px;flex:0}.lowerkeys .keys button{height:42px}.selection{display:flex;flex-direction:column;gap:8px}.selection .engraved{margin-bottom:0}output{font:36px monospace;letter-spacing:7px;text-align:center;background:#17120c;border:4px ridge #a79472;border-radius:8px;padding:8px;color:#ffd17a;text-shadow:0 0 9px #ec8f2c}#select{background:radial-gradient(#ffe9af,#d29948);border:3px solid #b58f51;color:#772b18;min-height:49px;font:bold 16px 'Arial Narrow',Arial;box-shadow:inset 0 0 8px #f9e3af,0 0 12px #e9a33544;border-radius:7px}.coinpanel{display:flex;justify-content:center;gap:12px}#slot{width:80px;background:linear-gradient(110deg,#8f8370,#e9ddc0 50%,#7c6f58);border:4px ridge #c0ae8b;border-radius:9px;color:#32291f;display:flex;align-items:center;flex-direction:column;justify-content:space-around;font-size:12px;font-weight:bold;padding:6px}#slot i{height:58px;width:11px;display:block;background:#15110d;border:3px inset #756954}#slot b{color:#803222}.coin-side{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px}#coin{border-radius:50%;height:72px;width:72px;flex-shrink:0;border:4px double #70572e;background:radial-gradient(ellipse at 30% 20%,#f5d58b,#af7d39);color:#77521f;box-shadow:inset 0 0 0 2px #eac67e,2px 5px 6px #0007;text-shadow:1px 1px #e9c682;display:flex;flex-direction:column;align-items:center;justify-content:center}#coin span{font:34px Georgia}#coin small{font-size:9px;font-weight:bold}.coin-side>small{font-size:8px;white-space:nowrap;color:#c4ac80}.credits{font-size:10px;letter-spacing:1px;color:#f0c378;background:#20180d;padding:7px;border:2px ridge #a38b5e;border-radius:5px}.credits b{font:22px monospace}.coin-drop{animation:drop .4s ease-in}#slot.over{outline:3px solid #ffe58a}@keyframes drop{to{transform:translate(-55px,30px) scale(.3);opacity:0}}.message{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#221a13;margin-top:12px;border-radius:5px;min-height:44px}.bulb{width:9px;height:9px;border-radius:50%;background:#ffcb75;box-shadow:0 0 9px #ffc35d;flex-shrink:0}#status{margin:0;color:#e7c895;font-size:13px;line-height:1.4}#status.error{color:#ffb5a3}.bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 9px;background:#173c35;margin-top:12px;border:2px solid #a79060}.queue{flex:1;min-width:0}.queue .engraved{text-align:left}.queue p{font-size:12px;line-height:1.6;margin:0;max-height:60px;overflow:auto;color:#e1d4b6}.playcontrols{display:flex;align-items:center;gap:10px}.playcontrols button{background:linear-gradient(#e0c99d,#ad9268);color:#382e20;border:2px solid #7c684b;border-radius:5px;min-height:44px;min-width:44px}.playcontrols label{font-size:9px;letter-spacing:1px}#volume{width:85px;accent-color:#e5bb72;min-height:44px}footer{display:flex;gap:20px;align-items:center;justify-content:center;margin-top:12px;color:#c7a56c;font:11px Georgia}footer>span{white-space:nowrap}.grille{height:25px;flex:1;background:repeating-linear-gradient(#1e1b17 0 3px,#a8997a 4px,#51483a 6px);border-radius:10px}dialog{max-width:560px;width:calc(100% - 28px);background:#202d28;color:#eedfc0;border:3px solid #b49a6a;border-radius:16px;padding:25px;font-size:17px;line-height:1.6}dialog::backdrop{background:#000a}dialog h2{font:32px Georgia;margin-top:0}dialog button{margin:5px}dialog input{width:100%;font:12px monospace;padding:10px;background:#131b18;color:#f0dfbc;border:1px solid #a28f69}details{margin:20px 0}summary{cursor:pointer}.note{font-size:12px;color:#b5b9aa}[hidden]{display:none!important}@media(min-width:1000px) and (max-height:850px){.topbar{padding:6px 16px}.cabinet{padding:10px}.sign{padding:5px 45px}h1{font-size:38px}.cards{min-height:260px;gap:9px}.song{min-height:45px;padding:6px 2px}.record{width:200px;margin:5px auto}.glass{min-height:210px;padding:15px}.console{padding:10px}.nowpanel h2{font-size:18px}.bottom{padding:8px}.crown{margin-bottom:10px}}@media(max-width:800px){.cabinet{margin:0 8px 15px;padding:9px;border-width:3px}.body{gap:8px;grid-template-columns:1.4fr 1fr}.chrome{border-width:5px}.catalog{padding:8px}.cards{gap:8px}.card{padding:4px}.song{gap:5px}.song span{font-size:12px}.song small{font-size:9px}.sign{padding:8px 30px}.star{font-size:38px}.console{gap:10px;padding:10px;grid-template-columns:1.2fr .7fr 1fr}.keys button{min-width:25px;font-size:21px;height:50px}.keys{gap:3px}.coinpanel{gap:5px}#slot{width:55px;font-size:10px}#coin{height:58px;width:58px}.coin-side>small{font-size:6px}.engraved{font-size:9px}.nowpanel h2{font-size:16px}.playcontrols{gap:5px}}@media(max-width:560px){.body{grid-template-columns:1fr}.turntable{display:grid;grid-template-columns:.9fr 1.1fr}.glass{min-height:170px;padding:10px}.record{width:130px;margin:8px auto}.nowpanel{border-top:0;border-left:4px solid #9d8c6c;display:flex;flex-direction:column;justify-content:center}.cards{min-height:280px}.song span{font-size:14px}.console{grid-template-columns:1.3fr .8fr}.coinpanel{grid-column:1/-1;border-top:1px solid #8d6137;padding-top:12px}.coin-side{flex-direction:row;gap:20px}#slot{height:75px;width:95px;display:grid;grid-template-columns:1fr 15px}#slot i{height:40px}#slot b{display:none}.coin-side>small{font-size:9px;white-space:normal;width:60px}.star{font-size:26px}.sign{padding:8px 14px}h1{font-size:30px;letter-spacing:4px}.sign small{font-size:8px}.bottom{flex-direction:column;align-items:stretch}.playcontrols{justify-content:center}.song{min-height:45px}.topbar{font-size:9px}.topbar button{font-size:12px;padding:8px}.catalog-title{font-size:10px}.grille{height:18px}}

.record{animation:vinyl 4s linear infinite;animation-play-state:paused}.playing .record{animation-play-state:running}@keyframes vinyl{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.record{animation:none}.arm{transition:none}.coin-drop{animation:none}}