:root{--bg: #f4f4f5;--surface: #ffffff;--surface-2: #f8f8f9;--text: #18181b;--muted: #71717a;--border: #e4e4e7;--accent: #ff3d00;--accent-soft: rgba(255, 61, 0, .1);--accent-text: #ffffff;--sel: #18181b;--grid-bg: #0b0b0c;--shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .12);--skeleton: #ececee;--skeleton-hi: #f7f7f8;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--ease-drawer: cubic-bezier(.32, .72, 0, 1);--dur-press: .14s;--dur-fast: .18s;--dur-base: .22s;--dur-sheet: .32s;color-scheme:light dark}@media (prefers-color-scheme: dark){:root{--bg: #0f0f10;--surface: #18181b;--surface-2: #1f1f23;--text: #f4f4f5;--muted: #a1a1aa;--border: #2a2a30;--accent-soft: rgba(255, 61, 0, .16);--sel: #ffffff;--skeleton: #232327;--skeleton-hi: #2c2c31}}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Noto Sans KR,sans-serif;font-size:15px;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}body.is-dragging,body.is-dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}h1{font-size:18px;margin:0;letter-spacing:-.01em}h2{font-size:17px;margin:0}h3{font-size:14px;margin:16px 0 8px}button,.button{font:inherit;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,opacity var(--dur-fast) ease}button:active:not(:disabled),.button:active{transform:scale(.97)}button:disabled{opacity:.45;cursor:default}button:focus-visible,.button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled),.button:hover{border-color:color-mix(in srgb,var(--text) 25%,var(--border))}button.primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 88%,#000)}}button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}button.ghost{border-color:transparent;background:transparent;color:inherit}button.big{padding:13px 22px;font-size:16px;border-radius:12px}button.wide{width:100%;justify-content:center;margin:8px 0}button.accent-soft{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:600}button.spin{animation:spin .8s linear infinite}@keyframes spin{to{rotate:360deg}}input[type=text],input:not([type]){font:inherit;flex:1;min-width:0;padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);transition:border-color var(--dur-fast) ease}input:not([type]):focus{border-color:var(--accent)}.muted{color:var(--muted)}.small{font-size:12px}.error{color:#e11d48}.empty{color:var(--muted);text-align:center;padding:24px 8px}.center-screen{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 16px;text-align:center}.center-screen p{margin:0}.logo-hex{position:relative;width:120px;height:120px;margin-bottom:8px}.logo-hex span{--s: 36px;position:absolute;width:var(--s);height:calc(var(--s) * .866);left:calc(50% - var(--s) / 2);top:calc(50% - var(--s) * .433);clip-path:path("M1.80 18.71 Q0.00 15.59 1.80 12.47 L7.20 3.12 Q9.00 0.00 12.60 0.00 L23.40 0.00 Q27.00 0.00 28.80 3.12 L34.20 12.47 Q36.00 15.59 34.20 18.71 L28.80 28.06 Q27.00 31.18 23.40 31.18 L12.60 31.18 Q9.00 31.18 7.20 28.06 Z");animation:logo-in .42s var(--ease-out) both}.logo-hex span:nth-child(1){translate:0 -32px}.logo-hex span:nth-child(2){translate:27px -16px}.logo-hex span:nth-child(3){translate:27px 16px}.logo-hex span:nth-child(4){translate:0 32px}.logo-hex span:nth-child(5){translate:-27px 16px}.logo-hex span:nth-child(6){translate:-27px -16px}@keyframes logo-in{0%{opacity:0;transform:scale(.6)}}.app{height:100%;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid var(--border);background:var(--surface);position:relative;z-index:2}header h1{display:flex;align-items:center;gap:8px}.brand-dot{width:14px;height:12px;background:conic-gradient(#f60,#f06,#93f,#06f,#0c9,#9c0,#f60);clip-path:path("M0.77 7.32 Q0.00 6.00 0.77 4.68 L2.73 1.32 Q3.50 0.00 5.04 0.00 L8.96 0.00 Q10.50 0.00 11.27 1.32 L13.23 4.68 Q14.00 6.00 13.23 7.32 L11.27 10.68 Q10.50 12.00 8.96 12.00 L5.04 12.00 Q3.50 12.00 2.73 10.68 Z");transition:background-color var(--dur-base) ease}.header-actions{display:flex;align-items:center;gap:6px}.saving{font-size:12px;color:var(--muted);opacity:0;transform:translateY(4px);transition:opacity var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out)}.saving:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:5px;vertical-align:middle}.saving.on{opacity:1;transform:none}main{flex:1;min-height:0;display:flex}.grid-area{flex:1;min-width:0;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 45%,#1b1b1f 0%,var(--grid-bg) 70%);position:relative}.panel{width:400px;border-left:1px solid var(--border);background:var(--surface);overflow-y:auto;overscroll-behavior:contain}.panel-body{padding:12px 16px 24px}.view-enter{animation:view-in var(--dur-base) var(--ease-out)}@keyframes view-in{0%{opacity:0;transform:translateY(8px)}}@media (max-width: 760px){header h1{font-size:15px}header .ghost{padding-inline:6px}main{flex-direction:column}.grid-area{flex:none;height:52vh}.panel{width:auto;flex:1;border-left:0;border-top:1px solid var(--border);border-radius:16px 16px 0 0;margin-top:-16px;position:relative;z-index:1;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 24px #00000040}.panel:before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--border);margin:8px auto 0}}.banner{padding:8px 16px;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;animation:banner-in var(--dur-base) var(--ease-out)}@keyframes banner-in{0%{opacity:0;transform:translateY(-100%)}}.banner.error{background:#fee2e2;color:#9f1239;cursor:pointer}.assign-banner{background:#fff7ed;color:#7c2d12;position:relative;z-index:1}.assign-banner span{flex:1;min-width:160px}.hint{position:absolute;top:12px;left:50%;translate:-50% 0;z-index:1;max-width:calc(100% - 24px);padding:8px 14px;border-radius:999px;background:#ffffff1f;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:13px;cursor:pointer;animation:hint-in .4s var(--ease-out) .9s both}.hint span{opacity:.6;margin-left:6px}@keyframes hint-in{0%{opacity:0;transform:translateY(-8px)}}.hexgrid{flex:1;min-height:0;position:relative}.hexgrid svg{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}.hexgrid svg:active{cursor:grabbing}.hexgrid .cell{cursor:pointer}.hexgrid .cell path{transform-box:fill-box;transform-origin:center;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) ease,filter var(--dur-fast) ease}.hexgrid .cell path.intro{animation:hex-in .42s var(--ease-out) both}@keyframes hex-in{0%{opacity:0;transform:scale(.85)}}@media (hover: hover) and (pointer: fine){.hexgrid .cell:hover path{filter:brightness(1.15) saturate(1.1)}}.hexgrid .cell.pressing path{transform:scale(.88);transition:transform .38s linear}.hexgrid .cell path.lifted{opacity:.25;transform:scale(.9)}.hexgrid.dragging .cell path:not(.lifted){filter:saturate(.85)}.hexgrid.assign svg{cursor:crosshair}.hexgrid .overlay{transition:transform var(--dur-base) var(--ease-in-out)}.hexgrid .overlay path{transform-box:fill-box;transform-origin:center;transition:transform var(--dur-fast) var(--ease-out),fill var(--dur-fast) ease}.hexgrid .overlay.sel path{transform:scale(1.12);stroke:var(--sel);stroke-width:2.5;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}.hexgrid .overlay.over{transition-duration:.12s;transition-timing-function:var(--ease-out)}.hexgrid .overlay.over path{transform:scale(1.24);stroke:#fff;stroke-width:3;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}.hexgrid .overlay.rec path{transform:scale(1.04);stroke:#fff;stroke-width:2.5;stroke-dasharray:6 4;animation:march .9s linear infinite}@keyframes march{to{stroke-dashoffset:-20}}@starting-style{.hexgrid .overlay.sel path,.hexgrid .overlay.over path{transform:scale(1)}}.hexgrid .mark{transition:opacity var(--dur-fast) ease}.hexgrid .badge{transform-box:fill-box;transform-origin:center;animation:badge-in .26s var(--ease-out)}@keyframes badge-in{0%{opacity:0;transform:scale(.6)}}.zoom-buttons{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px}@media (max-width: 760px){.zoom-buttons{bottom:26px}}.zoom-buttons button{width:36px;height:36px;justify-content:center;padding:0;background:#ffffff1a;border-color:#ffffff29;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hex-tip{position:absolute;z-index:3;width:max-content;max-width:240px;padding:8px 10px;border-radius:10px;background:#18181beb;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:13px;pointer-events:none;translate:-50% -100%;transform-origin:50% 100%;box-shadow:0 10px 24px #0006;opacity:1;transform:scale(1);transition:opacity .15s ease,transform .15s var(--ease-out)}.hex-tip.below{translate:-50% 0;transform-origin:50% 0}@starting-style{.hex-tip{opacity:0;transform:scale(.96)}}.hex-tip-head{display:flex;align-items:center;gap:6px;font-family:ui-monospace,Consolas,monospace;font-size:11px;opacity:.7;margin-bottom:4px}.hex-tip-swatch{width:10px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px #ffffff4d}.hex-tip ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}.hex-tip li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hex-tip li:before{content:"♪";opacity:.5;margin-right:6px;font-size:11px}.hex-tip li.more{opacity:.6;font-size:12px}.hex-tip li.more:before{content:none}.hex-tip-empty{opacity:.6;font-size:12px}.drag-ghost{position:fixed;left:0;top:0;z-index:70;pointer-events:none;will-change:transform}.drag-ghost-inner{translate:-50% calc(-100% - 18px);animation:lift var(--dur-fast) var(--ease-out)}@keyframes lift{0%{opacity:0;transform:scale(.9)}}.ghost-hex{display:block;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}.ghost-hex text{font-weight:800;font-size:18px}.ghost-card{display:flex;align-items:center;gap:8px;max-width:240px;padding:6px 12px 6px 6px;border-radius:12px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);rotate:-2deg}.ghost-card img{width:32px;height:32px;border-radius:6px;object-fit:cover}.ghost-dot{width:14px;height:12px;flex:none;clip-path:path("M0.77 7.32 Q0.00 6.00 0.77 4.68 L2.73 1.32 Q3.50 0.00 5.04 0.00 L8.96 0.00 Q10.50 0.00 11.27 1.32 L13.23 4.68 Q14.00 6.00 13.23 7.32 L11.27 10.68 Q10.50 12.00 8.96 12.00 L5.04 12.00 Q3.50 12.00 2.73 10.68 Z")}.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;margin-bottom:8px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border)}.tabs button{position:relative;z-index:1;justify-content:center;border:0;background:transparent;color:var(--muted);padding:6px;transition:color var(--dur-fast) ease}.tabs button.active{color:var(--text);font-weight:600}.tabs .count{font-size:12px;opacity:.7}.tab-indicator{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:8px;background:var(--surface);box-shadow:0 1px 3px #0000001f;transition:transform var(--dur-base) var(--ease-in-out)}.list{list-style:none;padding:0;margin:4px 0}.list li{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border);animation:row-in var(--dur-base) var(--ease-out) both;animation-delay:calc(var(--i, 0) * 35ms)}@keyframes row-in{0%{opacity:0;transform:translateY(6px)}}.list li.draggable{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:8px;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) ease}.list li.draggable.pressing{transform:scale(.97);background:var(--surface-2);transition:transform .38s linear,background-color .38s linear}.panel-dragging .list li.draggable{opacity:.6}.row{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 2px;border:0;background:transparent;text-align:left;border-radius:0;cursor:pointer}.row:active:not(:disabled){transform:none}.row-text{min-width:0;display:flex;flex-direction:column;gap:2px}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thumb{width:44px;height:44px;border-radius:7px;object-fit:cover;background:var(--border);flex:none}.chip{padding:4px 9px;font-size:12px;border-radius:999px}.swatch{display:inline-block;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1px #7f7f7f66;vertical-align:middle;transition:background-color var(--dur-fast) ease}.swatch.empty{background:repeating-linear-gradient(45deg,transparent 0 3px,rgba(127,127,127,.4) 3px 5px)}.swatch-stack{display:inline-flex}.swatch-stack .swatch{border-radius:50%;margin-left:-4px;box-shadow:0 0 0 2px var(--surface)}.swatch-stack .swatch:first-child{margin-left:0}.skeleton{background:linear-gradient(90deg,var(--skeleton) 0%,var(--skeleton-hi) 50%,var(--skeleton) 100%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}.skeleton.line{height:11px;border-radius:6px;width:70%}.skeleton.line.short{width:30%;margin-top:4px}.skeleton-row{padding:8px 2px}.skeleton-row .row-text{flex:1}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.color-head{display:flex;align-items:center;gap:12px;padding:16px 12px;border-radius:12px;margin-bottom:8px;box-shadow:inset 0 0 0 1px #7f7f7f40}.color-head .hex-code{font-weight:800;font-size:19px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}.color-head span:nth-child(2){flex:1}.inline-form{display:flex;gap:6px;margin:12px 0 4px}.chevron{display:inline-block;transition:transform var(--dur-fast) var(--ease-out)}.chevron.open{transform:rotate(90deg)}.back{padding-left:0;margin-bottom:8px}.detail-head{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 28%,transparent),transparent 70%)}.detail-head .thumb{width:72px;height:72px;box-shadow:0 6px 16px #0003}.actions{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.tracks{padding:0;margin:0;list-style:none}.tracks li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);animation:row-in var(--dur-base) var(--ease-out) both;animation-delay:calc(var(--i, 0) * 30ms)}.tracks .thumb{width:40px;height:40px}.track-no{width:20px;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:16px;z-index:55;animation:fade-in var(--dur-base) ease both}.modal{width:min(520px,100%);max-height:90vh;overflow-y:auto;background:var(--surface);border-radius:16px;padding:16px;box-shadow:var(--shadow-lg);animation:modal-in var(--dur-base) var(--ease-out) both}.modal-backdrop.closing{animation:fade-out var(--dur-fast) ease both}.modal-backdrop.closing .modal{animation:modal-out var(--dur-fast) var(--ease-out) both}@keyframes fade-in{0%{opacity:0}}@keyframes fade-out{to{opacity:0}}@keyframes modal-in{0%{opacity:0;transform:scale(.96)}}@keyframes modal-out{to{opacity:0;transform:scale(.96)}}.modal-head{display:flex;justify-content:space-between;align-items:center}.song-card{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);animation:row-in var(--dur-base) var(--ease-out)}.song-card .row-text{flex:1}.pick-list{max-height:38vh;overflow-y:auto}.pick-list input{width:18px;height:18px;flex:none;accent-color:var(--accent)}@media (max-width: 760px){.modal-backdrop{align-items:flex-end;padding:0}.modal{border-radius:18px 18px 0 0;max-height:92vh;padding-bottom:max(16px,env(safe-area-inset-bottom));animation:sheet-in var(--dur-sheet) var(--ease-drawer) both}.modal-backdrop.closing .modal{animation:sheet-out var(--dur-fast) var(--ease-out) both}}@keyframes sheet-in{0%{transform:translateY(100%)}}@keyframes sheet-out{to{transform:translateY(100%)}}.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));translate:-50% 0;display:flex;align-items:center;gap:12px;background:var(--text);color:var(--surface);padding:10px 10px 10px 16px;border-radius:999px;font-size:14px;z-index:60;max-width:calc(100% - 32px);box-shadow:var(--shadow-lg);opacity:1;transform:translateY(0);transition:opacity var(--dur-base) ease,transform var(--dur-base) var(--ease-out)}@starting-style{.toast{opacity:0;transform:translateY(16px)}}.toast.leaving{opacity:0;transform:translateY(16px)}.toast>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast-action{padding:5px 12px;border-radius:999px;border:0;background:color-mix(in srgb,var(--surface) 18%,transparent);color:var(--surface);font-weight:600;font-size:13px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}.view-enter,.modal-backdrop{animation:fade-in .15s ease!important}.modal,.list li,.tracks li,.drag-ghost-inner{animation:none!important}.hexgrid .overlay,.hexgrid .overlay path,.hexgrid .cell path,.toast,.tab-indicator{transition-property:opacity,fill,filter}.hexgrid .cell.pressing path{transform:none}}:root{--bar-h: 64px}body.has-player main{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}body.has-player .toast{bottom:calc(var(--bar-h) + 16px + env(safe-area-inset-bottom))}button.icon{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;border-color:transparent;background:transparent;flex:none;position:relative}@media (hover: hover) and (pointer: fine){button.icon:hover:not(:disabled){background:color-mix(in srgb,var(--text) 8%,transparent)}}button.icon.on{color:var(--accent)}.chip-play{width:30px!important;height:30px!important;font-size:11px;background:var(--surface-2)!important;border:1px solid var(--border)!important}.spinner{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:spin .7s linear infinite}.spinner.small{width:12px;height:12px;border-width:1.5px}.cover{display:block;position:relative;overflow:hidden;background:var(--border);flex:none}.cover img{width:100%;height:100%;object-fit:cover;display:block}.cover img.letterboxed{transform:scale(1.34)}.track-cover,.q-cover{width:44px;height:44px;border-radius:7px}.q-cover{position:relative;overflow:hidden;flex:none}.q-cover .cover{width:100%;height:100%}.q-cover .eq{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;color:#fff}.eq{display:inline-flex;align-items:flex-end;justify-content:center;gap:2px;height:14px;color:var(--accent)}.q-cover .eq{height:auto;align-items:center}.eq i{width:3px;height:12px;border-radius:2px;background:currentColor;transform-origin:bottom;transform:scaleY(.35)}.eq.on i{animation:eq .9s ease-in-out infinite}.eq.on i:nth-child(2){animation-delay:-.3s}.eq.on i:nth-child(3){animation-delay:-.6s}@keyframes eq{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.player-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--bar-h) + env(safe-area-inset-bottom));padding:0 10px env(safe-area-inset-bottom) 12px;display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--border);transform:translateY(100%);transition:transform var(--dur-sheet) var(--ease-drawer)}.player-bar.on{transform:none}.bar-progress{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform-origin:left;transition:transform .25s linear}.mini-slot{width:44px;height:44px;flex:none}.bar-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;background:transparent;padding:6px 4px;text-align:left}.bar-info:active:not(:disabled){transform:none}.bar-info .title{max-width:100%;font-weight:600;font-size:14px}.bar-info .small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-bar .icon.play{width:42px;height:42px;background:var(--text);color:var(--surface)}@media (max-width: 760px){.hide-mobile{display:none!important}}.art-frame{position:fixed;left:0;top:0;z-index:46;overflow:hidden;transform-origin:0 0;background:#000;box-shadow:0 10px 30px #00000059;visibility:hidden;opacity:0;cursor:pointer;transition:transform var(--dur-sheet) var(--ease-drawer),border-radius var(--dur-sheet) var(--ease-drawer),opacity var(--dur-base) ease,visibility 0s linear var(--dur-base)}.art-frame.on{visibility:visible;opacity:1;transition-delay:0s}.art-frame.big{cursor:default}.art-cover,.art-video{position:absolute;top:0;right:0;bottom:0;left:0}.art-cover{width:100%;height:100%}.art-video{left:-38.9%;width:177.8%;pointer-events:none;opacity:0;transition:opacity .3s ease}.art-video iframe{width:100%;height:100%;border:0;display:block}.art-frame.video .art-video{opacity:1}.now-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:39;background:#00000080;opacity:0;pointer-events:none;transition:opacity var(--dur-sheet) ease}.now-backdrop.open{opacity:1;pointer-events:auto}.now-sheet{position:fixed;left:50%;bottom:0;z-index:40;width:min(880px,100%);height:min(720px,94vh);margin-left:max(-440px,-50%);display:flex;flex-direction:column;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px #00000059;transform:translateY(105%);visibility:hidden;transition:transform var(--dur-sheet) var(--ease-drawer),visibility 0s linear var(--dur-sheet)}.now-sheet.open{transform:none;visibility:visible;transition-delay:0s}.now-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 0}.now-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:8px 24px 24px}.now-main{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}.big-slot{width:min(100%,340px,42vh);aspect-ratio:1;flex:none}.now-meta{width:100%;text-align:center;animation:view-in var(--dur-base) var(--ease-out)}.now-title{font-size:18px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}.seek{width:100%}.seek input{width:100%;height:18px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.seek input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--text) var(--pct),var(--border) var(--pct))}.seek input::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--text) var(--pct),var(--border) var(--pct))}.seek input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--text);transition:transform var(--dur-press) var(--ease-out)}.seek input:active::-webkit-slider-thumb{transform:scale(1.3)}.seek-times{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.now-controls{display:flex;align-items:center;justify-content:center;gap:14px}.play-big{width:60px;height:60px;border-radius:50%;justify-content:center;padding:0;background:var(--text);color:var(--surface);border:0}.repeat-one{position:absolute;right:6px;top:6px;font-size:9px;font-weight:800}.queue{min-height:0;display:flex;flex-direction:column}.queue h3{margin:4px 0 8px}.queue ol{list-style:none;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;flex:1}.queue li{display:flex;align-items:center;gap:4px;border-radius:10px;padding:0 4px;transition:background-color var(--dur-fast) ease}.queue li.current{background:var(--accent-soft)}.queue li.current .title{color:var(--accent);font-weight:600}.queue li.played{opacity:.55}.q-remove{opacity:.5;padding:6px 8px}@media (max-width: 760px){.now-sheet{height:calc(100% - env(safe-area-inset-top) - 12px);border-radius:18px 18px 0 0}.now-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:4px 16px calc(12px + env(safe-area-inset-bottom))}.now-main{gap:10px}.big-slot{width:min(72vw,36vh)}}.panel-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}.panel-toolbar .tabs{flex:1;margin-bottom:0}.add-pl{border:1px solid var(--border)!important;font-size:18px;transition:transform var(--dur-fast) var(--ease-out)}.add-pl.on{transform:rotate(45deg)}.reveal-box{animation:view-in var(--dur-base) var(--ease-out);margin-bottom:8px}.new-pl-form{display:flex;gap:6px;margin:8px 0}.new-pl-form select{font:inherit;font-size:13px;padding:0 6px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--text)}.track-toolbar{display:flex;align-items:center;gap:4px;margin:4px 0}.track-toolbar>span{flex:1}button.small{font-size:13px;padding:4px 8px}.tracks li{border-radius:8px;transition:background-color var(--dur-fast) ease}.tracks li.current .title{color:var(--accent);font-weight:600}.tracks li.selected{background:var(--accent-soft)}.tracks input[type=checkbox]{width:18px;height:18px;margin:0 1px;flex:none;accent-color:var(--accent)}.tracks .row{padding:4px 2px}.tracks .more{font-size:18px;padding:4px 10px;opacity:.6}.track-no .eq{height:12px}.select-bar{position:sticky;bottom:8px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px;padding:8px;border-radius:14px;background:var(--text);box-shadow:var(--shadow-lg);animation:view-in var(--dur-base) var(--ease-out)}.select-bar button{background:transparent;color:var(--surface);border-color:color-mix(in srgb,var(--surface) 25%,transparent);font-size:13px;padding:6px 10px}.select-bar button.danger{background:#e11d48;border-color:#e11d48;color:#fff}.action-sheet .modal-head h2{min-width:0;font-size:15px;overflow:hidden}.sheet-actions{display:grid;gap:2px;margin-top:8px}.sheet-actions button{justify-content:flex-start;border:0;background:transparent;padding:12px 10px;font-size:15px}@media (hover: hover) and (pointer: fine){.sheet-actions button:hover{background:var(--surface-2)}}.danger-text{color:#e11d48!important}.checklist-tools{display:flex;gap:6px;margin:8px 0 4px}.checklist-tools button{margin-left:auto;font-size:13px}.checklist-tools button.on{border-color:var(--accent);color:var(--accent)}.pick-list label.row{border-radius:8px;padding:8px 6px;transition:background-color var(--dur-fast) ease}.pick-list label.row.checked{background:var(--accent-soft)}.pick-list input[type=radio]{width:18px;height:18px;flex:none;accent-color:var(--accent)}@media (prefers-reduced-motion: reduce){.art-frame,.player-bar,.now-sheet{transition-property:opacity,visibility}.eq.on i{animation:none;transform:scaleY(.7)}}