:root{color-scheme:dark;--gold:#ffda30;--paper:#eee8cb}*{box-sizing:border-box}body{margin:0;width:400px;max-width:100vw;background:#141310;color:var(--paper);font:14px/1.5 system-ui,sans-serif}main{padding:20px;background:linear-gradient(145deg,#30291d55,transparent 45%),#211f1b}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}header span{font-size:11px;font-weight:800;letter-spacing:.12em}.icon{width:40px;height:40px;flex-shrink:0;border:1px solid #eee8cb35;border-radius:50%;background:#ffffff08;color:var(--paper);font:700 12px system-ui;cursor:pointer}.art-wrap{position:relative;isolation:isolate;aspect-ratio:1;border-radius:22px;overflow:hidden;border:1px solid #ffdf6852;background:#141310;box-shadow:inset 0 1px 0 #fff9dc55,0 12px 28px #0004}.player-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:none}#logo{position:absolute;inset:6% 10% 12%;width:80%;height:82%;object-fit:contain;z-index:2;filter:drop-shadow(0 4px 12px #0008)}#visual{position:absolute;bottom:10px;left:12px;width:calc(100% - 24px);height:38px;z-index:4}#halo{display:none}.topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 12px;font-size:9px;letter-spacing:.08em}#badge{padding:5px 9px;border-radius:99px;background:#ffffff0a;border:1px solid #eee8cb2e;font-size:10px;letter-spacing:0}.is-playing #badge{color:#ffe46a;border-color:#ffda3055}h1{font-size:22px;line-height:1.2;letter-spacing:-.035em;margin:0 0 8px;overflow-wrap:anywhere}#artist{font-size:12px;color:#c9c3b0;margin:0;line-height:1.65}.play{width:100%;min-height:54px;margin-top:20px;border:1px solid #ffdf688c;border-top-color:#fff6bde6;border-radius:16px;color:#241a06;background:linear-gradient(180deg,#ffe65d 0%,#ffda30 38%,#edb909 55%,#ffc91e 100%);box-shadow:inset 0 2px 1px #fffbdab3,inset 0 -3px 4px #b4770066,0 5px 16px #0003;font:800 16px system-ui;cursor:pointer;transition:transform .2s,box-shadow .3s}.play:hover{transform:translateY(-1px)}.play:active{transform:scale(.985)}.volume{display:flex;align-items:center;gap:12px;margin:18px 0}.volume input{flex:1;min-width:0;accent-color:var(--gold)}output{min-width:40px;font-size:11px;text-align:right;color:#c9c3b0}nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid #eee8cb1c}a{font-size:11px;color:#c9c3b0;text-decoration:none}a:hover{color:var(--gold)}.note{font-size:12px;color:#c9c3b0;line-height:1.5}.note:empty{display:none}.error{color:#ffb3a2}.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}:focus-visible{outline:2px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}.demo,.expanded{margin:auto}.expanded{width:100%;max-width:520px}.expanded .art-wrap{max-height:420px}.ribbon{position:absolute;bottom:16px;left:20%;width:60%;height:30px;display:flex;gap:3px;align-items:center;justify-content:center;z-index:3;opacity:0;transition:opacity .5s}.ribbon i{flex:1;height:100%;border-radius:99px;background:linear-gradient(0deg,#c69a22,#fff1ac);box-shadow:0 0 7px #ffda3033;transform:scaleY(.12)}.is-ambient .ribbon{opacity:.9}.is-ambient .ribbon i{animation:royal-wave 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*-110ms)}.art-wrap:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 1px 0 #fff5d455,inset 0 -30px 35px #14131033}.is-playing .art-wrap{animation:royal-light 4s ease-in-out infinite}.is-playing #logo{animation:royal-float 5s ease-in-out infinite}.is-playing .play{box-shadow:inset 0 2px 1px #fffbdab3,0 0 24px #ffda3026}@keyframes royal-wave{0%,100%{transform:scaleY(.15);opacity:.5}45%{transform:scaleY(.95);opacity:1}70%{transform:scaleY(.4);opacity:.7}}@keyframes royal-float{50%{transform:translateY(-3px)}}@keyframes royal-light{50%{box-shadow:inset 0 1px 0 #fff9dc55,0 0 24px #ffda3024}}
@media(max-width:360px){main{padding:16px}h1{font-size:20px}.topline{letter-spacing:.02em}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.ribbon{display:none!important}}

/* Transparent raster overlays video only, keeping the vinyl logo sharp. */
.art-wrap:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle,#0008 .55px,transparent .85px),repeating-linear-gradient(0deg,#ffffff12 0 1px,transparent 1px 3px);background-size:3px 3px,100% 3px;opacity:.32}
@media(max-width:360px){.art-wrap:before{opacity:.24}}