*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 15%,#33343b,#111216 65%);color:#efe7d8;font-family:Inter,sans-serif}main{min-height:100svh;display:grid;place-items:center;padding:36px 16px}.chassis{width:400px;max-width:100%;padding:10px;border-radius:34px;background:repeating-linear-gradient(90deg,#ffffff08 0 1px,transparent 1px 3px),linear-gradient(#262a31,#1b1e24,#111318);box-shadow:0 35px 90px #000b,inset 0 1px #ffffff40,inset 0 0 0 1px #000}.screen{padding:18px;background:linear-gradient(#16191f,#1b1e24);border-radius:25px;box-shadow:inset 0 3px 8px #0009,inset 0 0 0 1px #0009}button{font:inherit;cursor:pointer;color:#b4b3b2;border:0;border-radius:12px;background:radial-gradient(120% 120% at 50% 0%,#464b54,#30343c 46%,#1c1f25);box-shadow:0 6px 12px #0009,inset 0 1.5px #ffffff38,inset 0 -3px 6px #0009,inset 0 0 0 1px #0009;display:grid;place-items:center;transition:transform .15s}button:active{transform:translateY(2px);box-shadow:inset 0 3px 6px #0009}button:focus-visible{outline:2px solid #ffdd9a;outline-offset:4px}button.active{color:#e0a94e;filter:drop-shadow(0 0 3px #e0a94e30)}header{display:flex;align-items:center;justify-content:space-between;gap:10px}header button{width:37px;height:37px}header>div{text-align:center}header b{font-size:10px;color:#d7ac66;letter-spacing:.16em}header small{display:block;color:#948875;font-size:7px;letter-spacing:.12em;margin-top:6px}.album{position:relative;margin:26px 8px 22px;padding:5px;background:linear-gradient(#363a42,#14161b);border-radius:12px;box-shadow:0 10px 20px #0008,inset 0 1px #ffffff30}.cover{position:relative;aspect-ratio:1;background:linear-gradient(145deg,#c8703f,#8f3f42 45%,#20101c 90%);border-radius:7px;padding:22px;overflow:hidden;box-shadow:inset 0 0 0 1px #e0a94e73,inset 0 -40px 50px #0007}.cover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(130deg,transparent 15%,#ffffff3b 24%,#fff1 30%,transparent 50%,#ffffff0c 80%);pointer-events:none}.cover>span{font-size:11px;letter-spacing:.3em}.cover h1{font-size:39px;line-height:1.1;letter-spacing:-.05em;margin:58px 0 12px;text-shadow:0 1px #ffffff30,0 -2px 2px #0009}.cover small{font-size:8px;letter-spacing:.2em;color:#dcc0ab}.vinyl{position:absolute;right:-10px;top:12%;height:76%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#101114 0,#101114 2px,#242329,#242329 4px);box-shadow:4px 4px 10px #0009}.meta{display:flex;align-items:center;justify-content:space-between;margin:0 2px 24px}.meta h2{font-size:21px;margin:0 0 7px;font-weight:700}.meta p{color:#a89a86;font-size:11px;margin:0}.meta button{width:40px;height:40px}.slider{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:9px;border-radius:20px;background:linear-gradient(#ffdd9a,#e0a94e,#b7863a) left center/38% 100% no-repeat,linear-gradient(#0f1015,#20232a);box-shadow:inset 0 3px 6px #000c,inset 0 -1px #ffffff0f;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;background:repeating-linear-gradient(90deg,transparent 0 2px,#0002 2px 3px),radial-gradient(circle at 50% 30%,#f4f6f9,#c2c6cd 45%,#6c7078);box-shadow:0 3px 6px #000a,inset 0 1px #fffffff2}.time{display:flex;justify-content:space-between;font:14px Share Tech Mono,monospace;letter-spacing:.05em;color:#e0a94e;text-shadow:0 0 6px #e0a94e8c;margin-top:8px}.time span+span{color:#8f8674;text-shadow:0 1px black}.leather{position:relative;margin:23px -5px 24px;border-radius:20px;background:radial-gradient(140% 130% at 50% -10%,#4d2f20,#361e14 55%,#22110b);box-shadow:inset 0 1px #ffdeb424,inset 0 -10px 22px #0008,inset 0 0 0 1px #0009;padding:22px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}.leather:before{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px dashed #c99a5b77;border-radius:14px;pointer-events:none}.leather button{width:30px;height:30px;z-index:1;border-radius:50%}.leather button.medium{width:44px;height:44px}.leather button.brass{width:70px;height:70px;color:#39250d;background:radial-gradient(120% 120% at 50% 0%,#ffe6ad,#e5ad50 42%,#a9772f);box-shadow:0 10px 20px #0009,inset 0 2px #ffffffa6,inset 0 -5px 9px #78460a99,inset 0 0 0 1px #5a370abf,0 0 22px #e0a94e47}.volume{display:flex;align-items:center;gap:14px;margin:0 5px 26px;color:#e0a94e}.volume input{flex:1}.volume svg:first-child{color:#8f8674}footer{display:flex;justify-content:space-between;gap:8px;background:#111318;border-radius:15px;padding:9px;box-shadow:inset 0 2px 5px #0009}footer button{flex:1;padding:10px 0 8px;gap:7px;border-radius:9px}footer span{font-size:7px;text-transform:uppercase;letter-spacing:.04em}.demo-note{font-size:6px;letter-spacing:.2em;color:#777266;text-align:center;margin:12px 0 0}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;display:grid;place-items:center;z-index:10;padding:20px}.panel{background:#24272e;border:1px solid #79603f;border-radius:24px;padding:28px;max-width:400px;width:100%;box-shadow:0 20px 60px #000a}.close{float:right;padding:7px}.panel h2{font-size:24px;margin-top:24px}.panel p{color:#bfb09b;font-size:13px;line-height:1.7}.song{display:block;text-align:left;width:100%;padding:16px;margin-bottom:10px}.song small{display:block;margin-top:8px;color:#a89a86;font-size:11px}@media(max-width:430px){main{padding:16px 12px}.screen{padding:14px}.cover h1{margin-top:40px}.leather{gap:5px;padding:20px 12px}.leather button.brass{width:62px;height:62px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}main{grid-template-columns:minmax(0,1fr)}.chassis{justify-self:center;width:min(400px,100%);min-width:0}.screen,.leather{min-width:0}.cover h1{font-size:clamp(29px,9vw,39px)}