:root{--bg:#0e1013;--surface:#16191e;--surface-2:#1d2128;--surface-3:#262b33;--border:#8b94a71f;--border-strong:#a8afbd38;--text:#f1f3f6;--text-2:#a7afba;--text-3:#737c88;--keep:#7cc4ff;--keep-soft:#7ac6ff24;--move:#c6f06b;--move-soft:#c4f06a24;--on-accent:#10140a;--danger:#ff7a70;--radius-sm:10px;--radius:16px;--radius-lg:24px;--shadow-card:0 1px 0 #ffffff0a inset, 0 24px 60px -12px #000000a6;--dur-fast:.12s;--dur-base:.22s;--dur-slow:.4s;--ease-out:cubic-bezier(.22, 1, .36, 1);--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display:"Space Grotesk", var(--font-ui);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-size:16px;line-height:1.5;overflow-x:hidden}button{font:inherit;color:inherit}img{max-width:100%;display:block}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;text-wrap:balance;margin:0;line-height:1.15}p{text-wrap:pretty;margin:0}:focus-visible{outline:2px solid var(--keep);outline-offset:3px;border-radius:6px}kbd{font-family:var(--font-ui);border:1px solid var(--border-strong);min-width:1.6em;color:var(--text-2);background:var(--surface-2);border-bottom-width:2px;border-radius:6px;place-items:center;padding:.1em .45em;font-size:.72rem;font-weight:600;display:inline-grid}.tabular{font-variant-numeric:tabular-nums}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app{isolation:isolate;flex-direction:column;min-height:100dvh;display:flex;position:relative}.ambient{z-index:-1;filter:blur(90px)saturate(1.4);opacity:.28;transition:opacity var(--dur-slow) var(--ease-out);pointer-events:none;background-position:50%;background-size:cover;position:fixed;inset:-20%}.ambient:after{content:"";background:radial-gradient(ellipse at center, transparent 0%, var(--bg) 70%);position:absolute;inset:0}.topbar{padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));align-items:center;gap:12px;display:flex}.brand{font-family:var(--font-display);letter-spacing:-.01em;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;display:flex}.brand img{width:28px;height:28px}.route{min-width:0;color:var(--text-2);flex:1;justify-content:center;align-items:center;gap:8px;font-size:.86rem;display:flex}.route-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;align-items:center;gap:6px;max-width:34vw;padding:4px 10px 4px 4px;display:inline-flex}.route-chip img,.route-chip .cover-fallback{border-radius:6px;flex:none;width:22px;height:22px}.route-chip span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.icon-btn{width:40px;height:40px;color:var(--text-2);cursor:pointer;transition:background var(--dur-fast), color var(--dur-fast);background:0 0;border:1px solid #0000;border-radius:12px;place-items:center;display:inline-grid}.icon-btn:hover{background:var(--surface-2);color:var(--text)}.avatar{object-fit:cover;background:var(--surface-3);border-radius:50%;width:32px;height:32px}.btn{border:1px solid var(--border-strong);background:var(--surface-2);cursor:pointer;min-height:48px;transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), filter var(--dur-fast);border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 22px;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{background:var(--surface-3)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:var(--move);color:var(--on-accent);border-color:#0000}.btn-primary:hover{background:var(--move);filter:brightness(1.07)}.btn-ghost{color:var(--text-2);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--surface-2);color:var(--text)}.btn-sm{min-height:36px;padding:0 14px;font-size:.88rem}.center{padding:24px 16px max(24px, env(safe-area-inset-bottom));flex:1;place-items:center;display:grid}.panel{flex-direction:column;gap:20px;width:100%;max-width:520px;display:flex}.hero-art{width:132px;height:132px;margin-bottom:8px;position:relative}.hero-art div{border-radius:18px;width:92px;height:116px;position:absolute;top:8px;left:20px}.hero-art .a{background:var(--surface-3);transform:rotate(-14deg)translate(-18px)}.hero-art .b{background:var(--keep);opacity:.85;transform:rotate(10deg)translate(18px)}.hero-art .c{background:var(--move);color:var(--on-accent);place-items:center;display:grid}.lead{color:var(--text-2);max-width:46ch;font-size:1.05rem}.display{font-size:clamp(2rem,1.4rem + 2.6vw,2.8rem)}.steps{counter-reset:step;gap:10px;margin:0;padding:0;list-style:none;display:grid}.steps li{counter-increment:step;color:var(--text-2);grid-template-columns:28px 1fr;gap:12px;font-size:.94rem;display:grid}.steps li:before{content:counter(step);background:var(--surface-2);border:1px solid var(--border);width:28px;height:28px;color:var(--text);border-radius:50%;place-items:center;font-size:.82rem;font-weight:600;display:grid}.steps code,.lead code{background:var(--surface-2);color:var(--text);word-break:break-all;border-radius:6px;padding:.1em .4em;font-size:.86em}.alert{border-radius:var(--radius-sm);color:#ffd3cf;background:#ff7c701a;border:1px solid #ff7c7040;gap:10px;padding:12px 14px;font-size:.92rem;display:flex}.alert svg{color:var(--danger);flex:none;margin-top:2px}.note{color:var(--text-3);font-size:.85rem}.setup-step{flex-direction:column;gap:10px;display:flex}.setup-step header{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.setup-step h2{font-size:1.1rem}.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-size:.72rem;font-weight:600}.search{border:1px solid var(--border);background:var(--surface);width:100%;min-height:44px;color:var(--text);font:inherit;border-radius:12px;padding:0 14px;font-size:16px}.search::placeholder{color:var(--text-3)}.pl-list{overscroll-behavior:contain;flex-direction:column;gap:4px;max-height:264px;margin:0 -4px;padding:4px;display:flex;overflow-y:auto}.pl-row{text-align:left;cursor:pointer;transition:background var(--dur-fast), border-color var(--dur-fast);background:0 0;border:1px solid #0000;border-radius:12px;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:8px 12px 8px 8px;display:grid}.pl-row:hover{background:var(--surface-2)}.pl-row[aria-checked=true]{background:var(--surface-2);border-color:var(--border-strong)}.pl-row[aria-checked=true][data-role=source]{border-color:var(--keep)}.pl-row[aria-checked=true][data-role=target]{border-color:var(--move)}.pl-row:disabled{opacity:.4;cursor:not-allowed}.pl-row img,.pl-row .cover-fallback{object-fit:cover;border-radius:8px;width:44px;height:44px}.pl-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.pl-meta{color:var(--text-3);font-size:.82rem}.pl-check{color:var(--text-3)}.pl-row[aria-checked=true] .pl-check{color:var(--text)}.cover-fallback{background:var(--surface-3);color:var(--text-3);place-items:center;display:grid}.create-row{gap:8px;display:flex}.create-row .search{flex:1}.triage{padding:4px 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;flex:1;align-items:center;gap:16px;display:flex}.progress{flex-direction:column;gap:8px;width:100%;max-width:400px;display:flex}.progress-row{color:var(--text-2);justify-content:space-between;font-size:.84rem;display:flex}.progress-row .stats{gap:14px;display:flex}.progress-row .dot{border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.bar{background:var(--surface-3);border-radius:999px;height:4px;overflow:hidden}.bar>div{background:linear-gradient(90deg, var(--keep), var(--move));border-radius:inherit;height:100%;transition:width var(--dur-base) var(--ease-out)}.deck{aspect-ratio:4/5.1;width:100%;max-width:400px;min-height:340px;max-height:calc(100dvh - 370px);position:relative}.card{border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card);border:1px solid var(--border);touch-action:pan-y;-webkit-user-select:none;user-select:none;will-change:transform;position:absolute;inset:0;overflow:hidden}.card.top{cursor:grab}.card.top:active{cursor:grabbing}.card-art{object-fit:cover;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.card-shade{background:linear-gradient(#0000 38%,#0a0c0f8c 62%,#0a0c0ff2 100%);position:absolute;inset:0}.card-body{flex-direction:column;gap:6px;padding:22px;display:flex;position:absolute;bottom:0;left:0;right:0}.card-title{font-family:var(--font-display);letter-spacing:-.02em;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:clamp(1.4rem,1.1rem + 1.4vw,1.8rem);font-weight:700;line-height:1.12;display:-webkit-box;overflow:hidden}.card-artist{color:#e3e7ec;text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.card-meta{color:#ffffff9e;flex-wrap:wrap;gap:6px 12px;font-size:.82rem;display:flex}.card-meta span{align-items:center;gap:4px;display:inline-flex}.unavailable{color:#ffd27a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#141006b8;border:1px solid #ffd37a73;border-radius:999px;align-self:flex-start;align-items:center;gap:6px;margin-bottom:4px;padding:4px 10px;font-size:.78rem;font-weight:600;display:inline-flex}.explicit{color:#fff;background:#ffffff2e;border-radius:4px;padding:1px 5px;font-size:.66rem;font-weight:700}.stamp{font-family:var(--font-display);letter-spacing:.02em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;background:#0a0c0f99;border:2px solid;border-radius:12px;align-items:center;gap:8px;padding:8px 14px;font-size:1.05rem;font-weight:700;display:inline-flex;position:absolute;top:22px}.stamp.keep{color:var(--keep);left:20px}.stamp.move{color:var(--move);right:20px}.tint{pointer-events:none;position:absolute;inset:0}.tint.keep{background:linear-gradient(90deg,#33a7ff59,#0000 70%)}.tint.move{background:linear-gradient(270deg,#acea2e59,#0000 70%)}.player{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;max-width:400px;height:80px;overflow:hidden}.player iframe{border:0;width:100%;height:80px;display:block}.player-wrap{flex-direction:column;gap:10px;width:100%;max-width:400px;display:flex}.switch{color:var(--text-2);cursor:pointer;-webkit-user-select:none;user-select:none;align-self:flex-start;align-items:center;gap:10px;font-size:.86rem;display:inline-flex}.switch input{opacity:0;width:1px;height:1px;position:absolute}.switch-track{background:var(--surface-3);border:1px solid var(--border-strong);width:36px;height:22px;transition:background var(--dur-base);border-radius:999px;position:relative}.switch-thumb{background:var(--text-2);width:16px;height:16px;transition:transform var(--dur-base) cubic-bezier(.34, 1.56, .64, 1), background var(--dur-base);border-radius:50%;position:absolute;top:2px;left:2px}.switch input:checked+.switch-track{background:var(--move);border-color:#0000}.switch input:checked+.switch-track .switch-thumb{background:var(--on-accent);transform:translate(14px)}.switch input:focus-visible+.switch-track{outline:2px solid var(--keep);outline-offset:3px}.actions{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:100%;max-width:400px;display:grid}.action{cursor:pointer;min-height:60px;transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast);border:1.5px solid;border-radius:20px;justify-content:center;align-items:center;gap:10px;font-size:1rem;font-weight:650;display:flex}.action:active{transform:scale(.96)}.action:disabled{opacity:.45;cursor:not-allowed}.action.keep{color:var(--keep);background:var(--keep-soft);border-color:#7ac6ff73}.action.keep:hover{background:#7ac6ff38}.action.move{color:var(--on-accent);background:var(--move);border-color:#0000}.action.move:hover{filter:brightness(1.07)}.action kbd{color:inherit;opacity:.7;background:0 0;border-color:currentColor}.undo-btn{border:1px solid var(--border-strong);background:var(--surface-2);width:52px;height:52px;color:var(--text-2);cursor:pointer;transition:color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);border-radius:50%;place-items:center;display:grid}.undo-btn:hover:not(:disabled){color:var(--text);background:var(--surface-3)}.undo-btn:active:not(:disabled){transform:rotate(-30deg)scale(.95)}.undo-btn:disabled{opacity:.35;cursor:not-allowed}.shortcuts{color:var(--text-3);flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:.8rem;display:flex}.shortcuts span{align-items:center;gap:6px;display:inline-flex}.sync{color:var(--text-3);align-items:center;gap:6px;font-size:.8rem;display:inline-flex}.spinner{border:2px solid var(--surface-3);border-top-color:var(--move);border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{border-radius:var(--radius-lg);background:linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);border:1px solid var(--border);background-size:200% 100%;animation:1.5s linear infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.toast-region{left:50%;bottom:max(20px, env(safe-area-inset-bottom));z-index:50;pointer-events:none;width:min(440px,100vw - 32px);position:fixed;transform:translate(-50%)}.toast{background:var(--surface-3);border:1px solid var(--border-strong);pointer-events:auto;border-radius:14px;align-items:center;gap:12px;padding:12px 12px 12px 16px;font-size:.92rem;display:flex;position:relative;overflow:hidden;box-shadow:0 16px 40px -8px #0009}.toast.error{border-color:#ff7c7066}.toast .msg{flex:1;min-width:0}.toast .msg strong{font-weight:600}.toast-timer{background:var(--move);transform-origin:0;height:2px;position:absolute;bottom:0;left:0}.summary{grid-template-columns:1fr 1fr;gap:12px;display:grid}.summary div{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);padding:16px}.summary strong{font-family:var(--font-display);margin-bottom:6px;font-size:2rem;line-height:1;display:block}.summary .keep strong{color:var(--keep)}.summary .move strong{color:var(--move)}.summary span{color:var(--text-2);font-size:.88rem}.row{flex-wrap:wrap;gap:10px;display:flex}@media (width<=480px){.route{display:none}.topbar{justify-content:space-between}.shortcuts{display:none}.action{min-height:56px}.action kbd{display:none}}@media (height<=720px){.shortcuts{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-property:opacity,background-color,color,border-color!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.spin{animation:.8s linear infinite spin}