:root{--bg:#000;--fg:#fff;--muted:#9aa0a6;--primary:#00FFCC;--secondary:#4E80FF;--btn-color:#fff;--color-title:#fff;--text-body:#fff;--text-h1:#fff;--text-h2:#fff;--font-body:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;--font-head:var(--font-body);--font-title:var(--font-head);--header-h:56px;--brand-img-h:22px}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text-body);font-family:var(--font-body);overflow:hidden}h1{color:var(--text-h1)}h2{color:var(--text-h2)}*{box-sizing:border-box;-webkit-tap-highlight-color:#fff0}a{color:var(--primary);text-decoration:none}.ui-hidden .center-btn{opacity:0;pointer-events:none}.center-btn{transition:opacity .5s ease}.sc-header{position:fixed;top:0;left:0;right:0;height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;z-index:10002;background:linear-gradient(to bottom,rgb(0 0 0 / .6),#fff0);transition:opacity .5s ease}.sc-header.hidden{opacity:0;pointer-events:none}.sc-left,.sc-center,.sc-right{display:flex;align-items:center;gap:12px;justify-content:center}.sc-left{justify-content:flex-start}.sc-right{justify-content:flex-end}.sc-menu-toggle{display:inline-flex;align-items:center;justify-content:center;padding:6px;background:#fff0;border:none;cursor:pointer}.sc-menu-toggle svg{width:22px;height:22px;fill:var(--btn-color)}.sc-brand,.sc-brand img{height:var(--brand-img-h)}.sc-brand-title{display:inline-block;color:var(--color-title);font-family:var(--font-title)}.sc-bpm-btn{background:#fff0;border:none;color:var(--btn-color);cursor:pointer;font-weight:700}.sc-trackbar{position:fixed;top:var(--header-h);left:0;right:0;padding:8px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:10001;pointer-events:none}.track-title{font-family:var(--font-title);font-size:clamp(16px, 2.6vw, 22px);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(92vw,900px);color:var(--color-title)}.track-title.marquee{position:relative}.track-title.marquee span{display:inline-block;padding-left:20px}.track-title.marquee .scroll{display:inline-block;animation:marq 10s linear infinite}@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}.entry-artist{font-size:clamp(12px, 2vw, 14px);color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(92vw,900px)}@media (max-width:640px){.track-title{font-size:calc(clamp(16px, 2.6vw, 22px) + 10px)}}.sc-menu-overlay{position:fixed;inset:0;background:rgb(0 0 0 / .6);backdrop-filter:blur(6px);display:none;z-index:10050}.sc-menu-overlay.active{display:block}.sc-menu-panel{position:absolute;left:0;top:0;bottom:0;width:min(90vw,380px);background:rgb(10 10 10 / .95);border-right:1px solid rgb(255 255 255 / .08);padding:16px;overflow:auto}.sc-bpm-overlay{position:fixed;inset:0;display:none;z-index:10050;background:rgb(0 0 0 / .6);backdrop-filter:blur(4px);align-items:center;justify-content:center}.sc-bpm-overlay.active{display:flex}.sc-bpm-panel{background:rgb(10 10 10 / .95);border:1px solid rgb(255 255 255 / .08);border-radius:14px;padding:16px;min-width:min(92vw,560px);color:#fff}.sc-bpm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;margin-top:10px}.sc-input{display:flex;align-items:center;gap:8px;background:#0e0e0e;border:1px solid #222;border-radius:10px;padding:8px 10px}.sc-input input{width:100%;background:#fff0;border:none;outline:none;color:#fff;font-size:14px}.sc-bpm-meter{position:relative;border-radius:14px;background:#0e0e0e;border:1px solid #222;padding:12px}.sc-bpm-meter .track{position:relative;height:6px;background:#222;border-radius:999px;margin:8px 12px}.sc-bpm-meter .range{position:absolute;height:6px;background:var(--secondary);border-radius:999px}.sc-bpm-meter input[type=range]{position:absolute;left:0;right:0;width:100%;appearance:none;background:#fff0;height:42px;margin:-18px 0 0 0;pointer-events:auto}.sc-bpm-meter input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 0 2px rgb(0 0 0 / .3)}#bpm-min{z-index:3}#bpm-max{z-index:2}.sc-bpm-apply{display:block;margin:10px auto 0 auto;width:max-content;cursor:pointer;background:#fff0;border:none;color:var(--primary);font-weight:700;text-transform:uppercase}.sc-canvas{width:100vw;height:100vh;overflow:hidden;position:relative}.swiper{width:100%;height:100%}.sc-slide{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;position:relative;background:#000;padding-top:calc(var(--header-h) + 56px)}.sc-slide .backdrop{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.25;filter:blur(8px) saturate(1.05)}.sc-slide .content{position:relative;z-index:2;width:min(92vw,1200px);height:min(92vh,820px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:transform .28s ease;will-change:transform}.sc-slide.dragging .content{transition:none}.media-circle{width:100%;max-width:min(92vw,520px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;position:relative;background:#000;box-shadow:0 8px 26px rgb(0 0 0 / .45);touch-action:none}.media-circle video,.media-circle img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%}@keyframes spin360{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.media-circle.playing img,.media-circle.playing video{animation:spin360 10s linear infinite}.media-circle.scrubbing img,.media-circle.scrubbing video{animation:none}.swipe-zone{position:absolute;left:0;right:0;height:33vh;z-index:3}.swipe-zone.top{top:calc(var(--header-h) + 8px)}.swipe-zone.bottom{bottom:90px}.sc-center-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:auto}.center-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px;background:#fff0;border:none;cursor:pointer}.center-btn svg{width:54px;height:54px;fill:var(--btn-color)}.center-btn .pause{display:none}.center-btn.playing .play{display:none}.center-btn.playing .pause{display:block}#sc-player{position:fixed;left:0;right:0;bottom:0;background:#fff0;border:none;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:10000;transition:opacity .5s ease}#sc-player.hidden{opacity:0;pointer-events:none}#sc-progress{position:relative;height:4px;background:#222;border-radius:999px;overflow:hidden;width:100vw;max-width:100vw}#sc-progress .bar{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--secondary)}.sc-controls{display:flex;align-items:center;justify-content:space-between;width:min(96vw,1100px)}.ctrl-left,.ctrl-right{display:flex;align-items:center;gap:10px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px;background:#fff0;border:none;outline:none;box-shadow:none;cursor:pointer}.icon-btn svg{width:26px;height:26px;fill:var(--btn-color)}.icon-btn.toggled svg{fill:var(--secondary)}.sc-playlist{position:fixed;left:0;right:0;bottom:56px;max-height:50vh;overflow:auto;background:rgb(10 10 10 / .9);border-top:1px solid rgb(255 255 255 / .08);display:none;z-index:10000}.sc-playlist.active{display:block}.sc-playlist ul{list-style:none;margin:0;padding:8px 12px}.sc-playlist li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;cursor:pointer}.sc-playlist li:hover{background:rgb(255 255 255 / .06)}.sc-playlist .pl-title{font-weight:600}.sc-playlist .pl-artist{color:#9aa0a6;font-size:12px}@media (max-width:640px){:root{--header-h:50px}.center-btn svg{width:48px;height:48px}.media-circle{max-width:min(92vw,420px)}}:root{--menu-width:320px;--menu-font-size:16px;--menu-font-color:#ffffff;--title-font-size:clamp(16px, 2.6vw, 22px);--artist-font-size:clamp(12px, 2vw, 14px)}.sc-header,.sc-header *{color:var(--menu-font-color)}.sc-brand-title{color:var(--menu-font-color);font-size:var(--menu-font-size)}.track-title{font-size:var(--title-font-size)}.entry-artist{font-size:var(--artist-font-size)}.sc-header,.sc-header a,.sc-header .sc-brand-title,.sc-header .sc-bpm-btn,.sc-header .sc-menu-toggle svg{color:var(--menu-font-color);fill:var(--menu-font-color)}.sc-header .sc-brand-title{font-size:var(--menu-font-size);line-height:1.2}:root{--_menu-width:var(--menu-width)}@media (min-width:768px){.sc-header{max-width:var(--_menu-width);margin-left:auto;margin-right:auto}}.track-title{font-size:var(--title-font-size)}.entry-artist{font-size:var(--artist-font-size)}:root{--menu-item-font-size:var(--menu-font-size);--menu-bg:rgba(8,8,8,0.96);--menu-accent:var(--primary);--menu-gap:12px;--menu-transform:none;--menu-letter-spacing:0px}.sc-menu-toggle{cursor:pointer}.sc-offcanvas{position:fixed;inset:0;background:var(--menu-bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;z-index:10050}.sc-offcanvas.active{display:block}.sc-offcanvas .inner{position:absolute;top:0;bottom:0;right:0;width:min(100vw, var(--menu-width));max-width:100vw;background:#fff0;color:var(--menu-font-color);padding:calc(var(--header-h) + 18px) 20px 20px;overflow:auto;transform:translateX(0);transition:opacity .35s ease}.sc-offcanvas .menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--menu-gap)}.sc-offcanvas a{color:var(--menu-font-color);font-size:var(--menu-item-font-size);text-transform:var(--menu-transform);letter-spacing:var(--menu-letter-spacing)}.sc-offcanvas a:hover,.sc-offcanvas .current-menu-item>a{color:var(--menu-accent)}.sc-offcanvas .close{position:absolute;top:12px;right:16px;background:#fff0;border:none;color:var(--menu-font-color);font-size:18px;cursor:pointer}.sc-header,.sc-header a,.sc-header .sc-brand-title,.sc-header .sc-bpm-btn,.sc-header .sc-menu-toggle svg{color:var(--menu-font-color);fill:var(--menu-font-color)}.sc-header .sc-brand-title{font-size:var(--menu-font-size)!important;line-height:1.2}.track-title{font-size:var(--title-font-size)!important}.entry-artist{font-size:var(--artist-font-size)!important}:root{--_menu-width:var(--menu-width)}@media (min-width:768px){.sc-header{max-width:var(--_menu-width);margin-left:auto;margin-right:auto}}.sc-header nav,.sc-header .menu,.sc-header .primary-menu,.sc-header .menu-primary{display:none!important}.sc-offcanvas{position:fixed;inset:0;background:var(--menu-bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;z-index:10050}.sc-offcanvas.active{display:block}.sc-offcanvas .inner{position:absolute;top:0;bottom:0;left:0;width:min(100vw, var(--menu-width));max-width:100vw;background:#fff0;color:var(--menu-font-color);padding:calc(var(--header-h) + 18px) 24px 24px;overflow:auto}.sc-offcanvas ul,.sc-offcanvas li{list-style:none;margin:0;padding:0}.sc-offcanvas .menu{display:flex;flex-direction:column;gap:var(--menu-gap)}.sc-offcanvas a{color:var(--menu-font-color)!important;font-size:var(--menu-item-font-size);text-transform:var(--menu-transform);letter-spacing:var(--menu-letter-spacing)}.sc-offcanvas a:hover,.sc-offcanvas .current-menu-item>a{color:var(--menu-accent)!important}.sc-offcanvas .close{position:absolute;top:10px;left:10px;background:#fff0;border:none;color:var(--menu-font-color);font-size:20px;cursor:pointer;line-height:1}body.sc-menu-open{overflow:hidden}