:root{color:#fffbe8;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#1e1f22;font-family:system-ui,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;width:100%;height:100%;overflow:hidden}body{--frame-gap:clamp(0px, 1vh, 8px);padding:var(--frame-gap);margin:0}button{font:inherit}.stage{--cover-color:72 95 16;background-color:rgb(var(--cover-color));background-image:radial-gradient(at 50% 28%,#ffffff10,#0000 50%,#0006);border-radius:12px;grid-template-rows:auto minmax(0,1fr) auto auto;width:100%;height:100%;padding:clamp(8px,min(3vw,3vh),42px);transition:background-color .6s;display:grid;position:relative;overflow:hidden}.topbar{z-index:1;justify-content:space-between;align-items:center;gap:16px;min-width:0;display:flex}.brand{letter-spacing:.16em;color:var(--ui-text);white-space:nowrap;align-items:center;gap:12px;font-size:11px;font-weight:700;display:flex}.brand-dot{background:var(--ui-accent);border-radius:50%;width:5px;height:5px}.stage{--ui-text:color-mix(in srgb, rgb(var(--cover-color)) 10%, white);--ui-accent:color-mix(in srgb, rgb(var(--cover-color)) 20%, white)}.modes{border:1px solid color-mix(in srgb, var(--ui-accent) 35%, transparent);background:#0003;border-radius:999px;flex-shrink:0;padding:4px;display:flex}.modes button{color:var(--ui-text);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:8px 17px;font-size:12px;font-weight:700}.modes button[aria-pressed=true]{color:rgb(var(--cover-color));background:var(--ui-accent)}button:focus-visible,summary:focus-visible{outline:2px solid var(--ui-accent);outline-offset:4px}.turntable{perspective:1000px;place-items:center;min-width:0;min-height:0;display:grid;container-type:size}.record-angle{--record-size:min(82cqw, 80cqh, 560px);width:var(--record-size);aspect-ratio:1;transform-style:preserve-3d;transition:transform .65s;position:relative}.record-angle:before{content:"";box-shadow:0 calc(var(--record-size) * .05) calc(var(--record-size) * .1) #07100080, 0 0 0 1px #68725150;background:#0d140c;border-radius:50%;position:absolute;inset:0}.record{border:clamp(1px, calc(var(--record-size) * .009), 5px) solid #141814;width:100%;height:100%;box-shadow:inset 0 0 calc(var(--record-size) * .07) #000;background:repeating-radial-gradient(circle,#111613 0% .7%,#2c3029 1%,#141915 1.4%);border-radius:50%;animation:12s linear infinite paused spin;position:relative}.record:after{content:"";border-radius:inherit;pointer-events:none;background:conic-gradient(from 35deg,#0000,#ffffff15,#0000 22%,#0005 40%,#0000 60%,#ffffff12 75%,#0000);position:absolute;inset:0}.stage[data-playing=true] .record{animation-play-state:running}.stage[data-mode="3d"] .record-angle{transform:rotateX(48deg)rotate(-18deg)}.stage[data-mode="3d"] .record-angle:before{box-shadow:0 calc(var(--record-size) * .01) 0 #060b06, 0 calc(var(--record-size) * .02) 0 #0d140c, 0 calc(var(--record-size) * .11) calc(var(--record-size) * .11) #06100090}.label{background:#f7eed6;border-radius:50%;place-items:center;display:grid;position:absolute;inset:24%;overflow:hidden}.label-fallback{color:#3d5110;letter-spacing:.2em;text-align:center;font-size:clamp(12px,2vw,24px);line-height:1.8}.art{object-fit:cover;width:100%;height:100%;position:absolute}[hidden]{display:none!important}.spindle{z-index:2;border:clamp(.5px, calc(var(--record-size) * .005), 3px) solid #e4ddc1;width:2.5%;height:2.5%;box-shadow:0 0 0 clamp(.5px, calc(var(--record-size) * .005), 3px) #0003;background:#152011;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.track-info{min-width:0;max-width:100%;padding-bottom:16px}.title{color:var(--ui-text);white-space:nowrap;text-overflow:ellipsis;font-size:clamp(14px,2vw,30px);font-weight:700;overflow:hidden}.artist{color:var(--ui-text);white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:14px;overflow:hidden}.diagnostics{max-width:min(420px,100% - 40px);color:var(--ui-text);z-index:3;font-size:10px;position:absolute;bottom:14px;right:20px}.diagnostics[open]{overflow-wrap:anywhere;background:#101018ed;border-radius:8px;max-height:50%;padding:12px;overflow:hidden}.diagnostics summary{cursor:pointer}.music-bar{width:100%;min-width:0;padding-bottom:14px}.music-controls{pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:24px;height:36px;display:flex}.music-icon{width:20px;height:20px;color:var(--ui-accent);display:flex}.music-icon svg{width:100%;height:100%}.music-play{background:var(--ui-accent);width:36px;height:36px;color:rgb(var(--cover-color));border-radius:50%;place-items:center;display:grid}.music-play svg{width:22px;height:22px}.music-play .icon-pause,.stage[data-playing=true] .music-play .icon-play{display:none}.stage[data-playing=true] .music-play .icon-pause{display:block}.timeline{--progress:0%;--hover-position:50%;cursor:default;height:18px;margin-top:12px;position:relative}.timeline-line{background:color-mix(in srgb, var(--ui-accent) 30%, transparent);border-radius:4px;height:4px;position:absolute;top:50%;left:0;right:0;overflow:hidden;transform:translateY(-50%)}.timeline-fill{width:var(--progress);border-radius:inherit;background:var(--ui-accent);height:100%}.timeline-dot{top:50%;left:var(--progress);background:var(--ui-accent);opacity:0;pointer-events:none;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%)}.time-tooltip{bottom:25px;left:var(--hover-position);color:var(--ui-text);opacity:0;pointer-events:none;background:#101018ed;border-radius:4px;padding:4px 7px;font-size:13px;font-weight:600;line-height:1.2;position:absolute;transform:translate(-50%)}.timeline:hover .timeline-dot,.timeline:hover .time-tooltip{opacity:1}.timeline:hover .timeline-line{background:color-mix(in srgb, var(--ui-accent) 55%, transparent)}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=540px){.stage{row-gap:8px}.brand{letter-spacing:.1em;gap:7px;font-size:9px}.modes button{padding:6px 12px}.track-info{padding-bottom:0}.title{font-size:13px}.artist{font-size:11px}.music-controls{gap:20px;height:30px}.music-icon{width:16px;height:16px}.music-play{width:30px;height:30px}.music-play svg{width:18px;height:18px}.timeline{margin-top:8px}}@media (height<=360px){.stage{border-radius:8px;row-gap:5px;padding:10px}.brand{letter-spacing:.08em;gap:5px;font-size:7px}.modes{padding:2px}.modes button{padding:3px 9px;font-size:9px}.record-angle{--record-size:min(70cqw, 94cqh, 260px)}.stage[data-mode="3d"] .record-angle{transform:rotateX(38deg)rotate(-12deg)}.label-fallback{font-size:clamp(4px,8cqh,12px)}.track-info{padding-bottom:0}.title{font-size:11px;line-height:1.3}.artist{margin-top:2px;font-size:9px}.diagnostics{display:none}.music-bar{padding-bottom:0}.music-controls{gap:18px;height:20px}.music-icon{width:12px;height:12px}.music-play{width:20px;height:20px}.music-play svg{width:13px;height:13px}.timeline{height:10px;margin-top:4px}.timeline-line{height:2px}.timeline-dot{width:8px;height:8px}.time-tooltip{font-size:10px;bottom:16px}}@media (prefers-reduced-motion:reduce){.record{animation:none}.record-angle,.stage{transition:none}}@media (width<=220px) and (height<=360px){body{padding:0}.stage{grid-template-columns:minmax(0,1fr);row-gap:5px;padding:8px}.topbar{gap:4px}.brand{letter-spacing:.04em;gap:3px;font-size:6px}.brand-dot{width:3px;height:3px}.modes{padding:1px}.modes button{padding:3px 5px;font-size:7px}.record-angle{--record-size:min(80cqw, 90cqh, 140px)}.title{font-size:9px;line-height:1.3}.artist{font-size:8px}.music-controls{gap:10px;height:18px}.music-icon{width:10px;height:10px}.music-play{width:18px;height:18px}.music-play svg{width:12px;height:12px}.timeline{height:8px;margin-top:3px}}@media (width<=160px) and (height<=360px){.stage{row-gap:2px;padding:5px}.modes button{padding:2px 4px;line-height:1.2}.brand-format,.brand-dot,.artist{display:none}.title{font-size:8px}.music-controls{gap:8px;height:16px}.music-play{width:16px;height:16px}}