.twg-vinyl{--twg-label-color:#f02b32;position:relative;width:100%;aspect-ratio:1;isolation:isolate;overflow:visible;background:transparent;color:inherit;font-family:inherit}
.twg-vinyl *{box-sizing:border-box}
.twg-vinyl__stage{position:absolute;inset:0;display:grid;place-items:center;overflow:visible}
.twg-vinyl__deck{position:relative;width:min(70%,640px);max-width:100%;aspect-ratio:1;}
.twg-vinyl__deck:before{content:"";position:absolute;inset:-2.3%;border:1px solid #8e929366;border-radius:50%;background:linear-gradient(145deg,#55595b,#17191a 24%,#3c4042 56%,#17191a 84%);box-shadow:0 12px 24px #0003,inset 0 1px 2px #ffffff55;}
.twg-vinyl__disc{position:absolute;inset:1.2%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 50%,#1b1b1b 0 30%,#101112 31% 100%);box-shadow:0 18px 40px #0003,inset 0 2px 4px #ffffff22,inset 0 -4px 12px #0009;}
.twg-vinyl__disc:before{content:"";position:absolute;inset:1.7%;z-index:2;border:1px solid #d9dadd66;border-radius:50%;background:repeating-conic-gradient(from 0deg,#c8cbca 0deg 1.2deg,transparent 1.2deg 3.2deg);-webkit-mask:radial-gradient(circle,transparent 0 93%,#000 93.5% 98%,transparent 98.5%);mask:radial-gradient(circle,transparent 0 93%,#000 93.5% 98%,transparent 98.5%);opacity:.72;pointer-events:none}
.twg-vinyl__grooves,.twg-vinyl__sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.twg-vinyl__grooves{background:repeating-radial-gradient(circle at center,transparent 0 2px,rgba(255,255,255,.09) 2.5px,rgba(0,0,0,.42) 3px,transparent 3.8px);mask-image:radial-gradient(circle,#000 0 99%,transparent 100%);opacity:.8}
.twg-vinyl__sheen{background:conic-gradient(from 218deg,transparent 0 18%,rgba(255,255,255,.11) 21%,transparent 29% 55%,rgba(255,255,255,.055) 60%,transparent 67%);mix-blend-mode:screen}
.twg-vinyl__label{position:absolute;z-index:3;inset:31%;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--twg-label-color);box-shadow:inset 0 0 0 1px #0004,inset 0 0 0 7px #ffffff18;color:#fff3e5}
.twg-vinyl__label-type{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.twg-vinyl__label-type text{fill:#fff4e6;font:700 10px ui-monospace,monospace;letter-spacing:1.3px}
.twg-vinyl__label-center{position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle,#e9e1d4 0 72%,#d7cebf 73% 100%);box-shadow:0 2px 8px #0003}
.twg-vinyl__label-image{position:absolute;z-index:1;inset:29%;width:42%;height:42%;border-radius:50%;object-fit:contain;}
.twg-vinyl__spindle{position:absolute;z-index:2;left:50%;top:50%;width:2.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#171615;box-shadow:0 0 0 1px #fff8}
.twg-vinyl__arm{position:absolute;z-index:4;top:-4%;right:-11%;height:73%;width:auto;overflow:visible;transform-origin:78% 14%;filter:drop-shadow(0 5px 7px #0004);transition:transform .65s cubic-bezier(.2,.75,.25,1);transform:rotate(-8deg);pointer-events:none}
.twg-vinyl.is-playing .twg-vinyl__arm{transform:rotate(0deg)}
.twg-vinyl.is-playing .twg-vinyl__disc{animation:twg-spin 2.4s linear infinite}
.twg-vinyl.is-loading .twg-vinyl__status{opacity:.7}
.twg-vinyl.has-error .twg-vinyl__status{color:#a5282d}
.twg-vinyl__controls{position:absolute;left:16%;bottom:10%;z-index:5;display:flex;align-items:center;max-width:86%;}
.twg-vinyl__control{display:inline-flex;align-items:center;justify-content:center;width:41px;height:37px;min-width:41px;min-height:37px;border:2px solid #090a0b;border-radius:4px;padding:0;background:linear-gradient(145deg,#292c2e,#131516 72%);color:#e4e5e4;font:inherit;font-size:18px;font-weight:700;line-height:1;cursor:pointer;box-shadow:inset 0 1px 1px #8e939455,inset 0 -2px 2px #000b,0 3px 7px #0004;transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
.twg-vinyl__control:hover{background:linear-gradient(145deg,#34383a,#17191a 72%);transform:translateY(-1px);box-shadow:inset 0 1px 1px #a8adae66,0 5px 10px #0004}
.twg-vinyl__control:focus-visible{outline:3px solid #ef2e35;outline-offset:4px}
.twg-vinyl__control:disabled{opacity:.6;cursor:not-allowed;transform:none}
.twg-vinyl__control-icon{display:block;color:#68bf83;font-size:17px;line-height:1}.twg-vinyl.is-playing .twg-vinyl__control-icon,.twg-vinyl.is-loading .twg-vinyl__control-icon{color:#ef3036}
.twg-vinyl__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.twg-vinyl audio{display:none}
@keyframes twg-spin{to{transform:rotate(1turn)}}
@media(max-width:600px){.twg-vinyl__deck{width:70%}.twg-vinyl__arm{right:-9%;height:77%}.twg-vinyl__controls{left:12%;bottom:7%}.twg-vinyl__control{width:38px;height:34px;min-width:38px;min-height:34px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.twg-vinyl__arm,.twg-vinyl__control{transition:none}.twg-vinyl.is-playing .twg-vinyl__disc{animation-duration:12s}}