:root{color-scheme:dark;--black: #000;--bg: #121212;--bg-raised: #1f1f1f;--bg-hover: #2a2a2a;--bg-active: #333;--text: #fff;--text-sub: #b3b3b3;--text-dim: #6a6a6a;--accent: #e8457c;--accent-hover: #f05a90;--green: #1db954;--border: #282828;--overlay: rgba(255,255,255,.1);--rose: #e8457c;--violet: #9c5bd2;--amber: #e8a034;--emerald: #1db954;--sky: #4ca4e8;--slate: #6a6a6a;font-family:DM Sans,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{background:var(--black);color:var(--text)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}.btn-primary{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:100px;padding:8px 24px;font:inherit;font-size:14px;font-weight:600;background:var(--accent);color:#fff;cursor:pointer;transition:all .15s}.btn-primary:hover{background:var(--accent-hover);transform:scale(1.02)}.btn-primary:disabled{opacity:.4;cursor:default;transform:none}.btn-primary.sm{padding:6px 16px;font-size:12px}.btn-ghost{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:6px 16px;font:inherit;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s}.btn-ghost:hover{border-color:#fff}.btn-ghost.sm{padding:4px 12px;font-size:11px}.btn-icon{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;color:var(--text-sub);padding:4px;border-radius:50%;transition:all .1s;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.btn-icon:hover{color:#fff;background:var(--overlay)}.note-rose{background:#e8457c26;color:#f9a8c9}.note-violet{background:#9c5bd226;color:#c4a0f0}.note-amber{background:#e8a03426;color:#f0c878}.note-emerald{background:#1db95426;color:#6ee7a0}.note-sky{background:#4ca4e826;color:#90c8f0}.dot-rose{background:var(--rose)}.dot-violet{background:var(--violet)}.dot-amber{background:var(--amber)}.dot-emerald{background:var(--emerald)}.dot-sky{background:var(--sky)}.dot-slate{background:var(--slate)}.color-dot{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .12s}.color-dot:hover{transform:scale(1.15)}.color-dot.active{border-color:#fff}.loading{display:flex;justify-content:center;padding:32px;color:var(--text-dim)}.loading-dot{display:inline-block;animation:pulse 1.4s infinite both}.loading-dot:nth-child(2){animation-delay:.2s}.loading-dot:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,80%,to{opacity:.3}40%{opacity:1}}.error{color:#f87171;background:#f871711a;border-radius:6px;padding:8px 12px;font-size:13px;margin-bottom:12px}.share-page{max-width:580px;margin:0 auto;min-height:100vh;background:#fef7f4;color:#2d2028}.share-header-mini{text-align:center;padding:24px 0 8px}.share-header-mini h1{font-family:Playfair Display,serif;font-size:28px;font-weight:600;color:#e8457c}.share-hero{padding:24px;border-radius:0 0 12px 12px}.share-message{background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;padding:16px;margin:16px 0;border-left:3px solid}.share-message p{font-style:italic;font-size:15px;line-height:1.5;margin:0}.share-meta{font-size:13px;color:#8c7284;text-align:center}.share-tracks{padding:8px 16px}.share-track-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px}.share-track-row:hover{background:#fff5f5}.share-track-num{width:24px;text-align:center;font-size:13px;font-weight:700;flex-shrink:0}.share-track-art{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0}.share-track-art-placeholder{width:44px;height:44px;border-radius:6px;background:#fce4ec;display:flex;align-items:center;justify-content:center;font-size:16px;color:#e8457c;flex-shrink:0}.share-track-info{flex:1;min-width:0}.share-track-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.share-track-artist{font-size:12px;color:#8c7284;display:block}.share-track-duration{font-size:12px;color:#b8a4b0;flex-shrink:0}.share-footer{text-align:center;padding:32px 16px;font-size:14px;color:#b8a4b0}.share-footer a{text-decoration:none;font-weight:600;color:#e8457c}.waveform-editor,.moment-editor{background:var(--bg-raised);border-radius:8px;padding:12px}.waveform-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.waveform-title{font-size:14px;font-weight:600;margin:0}.waveform-artist{font-size:12px;color:var(--text-sub);margin:0}.waveform-container{border-radius:6px;overflow:hidden;margin-bottom:8px;background:var(--bg)}.waveform-controls{display:flex;align-items:center;gap:8px;margin-bottom:8px}.waveform-actions{display:flex;gap:6px}.player-ctrl-play{font-size:14px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#fff;color:#000;border-radius:50%;border:none;cursor:pointer}.moment-timeline{position:relative;height:28px;background:var(--bg);border-radius:4px;margin:8px 0;cursor:pointer}.moment-pin{position:absolute;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;border:2px solid var(--bg);cursor:pointer}.moment-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}.moment-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--bg);border-radius:4px}.moment-time{font-size:11px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;flex-shrink:0}.moment-thumb{width:28px;height:28px;border-radius:4px;object-fit:cover;flex-shrink:0}.moment-text{flex:1;min-width:0;font-size:12px;color:var(--text-sub);font-style:italic}.moment-overlay{position:fixed;bottom:88px;left:50%;transform:translate(-50%);z-index:101;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:10px 14px;box-shadow:0 8px 24px #00000080;max-width:320px;display:flex;align-items:center;gap:10px}.moment-overlay-img{width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0}.moment-overlay-text{font-size:13px;font-style:italic}.empty-state{text-align:center;padding:32px;color:var(--text-dim)}.empty-icon{font-size:32px;margin-bottom:8px;display:block;opacity:.3}.note-colors{display:flex;gap:4px}html,body,#root{height:100%;overflow:hidden;margin:0;padding:0}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg);overflow:hidden}.app-content{flex:1;overflow-y:auto;min-height:0}.player-strip{display:flex;align-items:center;gap:12px;padding:8px 16px;background:linear-gradient(180deg,var(--bg-raised) 0%,var(--bg) 100%);border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}.ps-art{width:48px;height:48px;border-radius:6px;object-fit:cover;flex-shrink:0}.ps-art-ph{width:48px;height:48px;border-radius:6px;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-dim);flex-shrink:0}.ps-info{flex:1;min-width:0}.ps-name{font-size:14px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-artist{font-size:12px;color:var(--text-sub);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.ps-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--text-sub);font-size:16px;cursor:pointer;padding:4px}.ps-btn:hover{color:#fff}.ps-play{width:32px;height:32px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-size:14px}.ps-play:hover{transform:scale(1.05);color:#000}.ps-progress{position:absolute;top:0;left:0;right:0;height:2px;background:#ffffff1a}.ps-progress-fill{height:100%;background:var(--accent);transition:width .3s linear}.bottom-nav{display:flex;background:var(--black);border-top:1px solid rgba(255,255,255,.08);flex-shrink:0;padding:4px 0 env(safe-area-inset-bottom,4px)}.nav-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;cursor:pointer;color:var(--text-dim);transition:color .12s}.nav-btn:hover{color:var(--text-sub)}.nav-btn.active{color:var(--accent)}.nav-icon{font-size:20px;line-height:1}.nav-label{font-size:10px;font-weight:600;letter-spacing:.02em}.page{padding:20px 20px 16px}.page-title{font-size:24px;font-weight:700;margin-bottom:16px;letter-spacing:-.02em}.stats-range{display:flex;gap:8px;margin-bottom:16px}.tl-row{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:6px;transition:background .08s;cursor:default}.tl-row:hover{background:#ffffff0f}.tl-num{width:24px;text-align:center;font-size:14px;color:var(--text-dim);font-variant-numeric:tabular-nums;flex-shrink:0}.tl-art{width:44px;height:44px;border-radius:4px;object-fit:cover;flex-shrink:0}.tl-art-ph{width:44px;height:44px;border-radius:4px;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;color:var(--text-dim);flex-shrink:0}.tl-info{flex:1;min-width:0}.tl-name{font-size:15px;font-weight:400;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tl-sub{font-size:13px;color:var(--text-sub);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tl-note{font-size:11px;font-style:italic;padding:2px 6px;border-radius:3px;margin-top:2px;display:inline-block}.tl-dur{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;flex-shrink:0}.tl-acts{display:flex;gap:2px;flex-shrink:0}.tl-row.dragging{opacity:.25}.mix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}.mix-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-raised);border:none;border-radius:8px;padding:12px;cursor:pointer;text-align:left;color:inherit;font:inherit;transition:background .15s}.mix-card:hover{background:var(--bg-hover)}.mix-card-art{width:100%;aspect-ratio:1;border-radius:6px;object-fit:cover;margin-bottom:8px}.mix-card-art-ph{width:100%;aspect-ratio:1;border-radius:6px;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--text-dim);margin-bottom:8px}.mix-card-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.mix-card-meta{font-size:12px;color:var(--text-sub);display:block}.mix-detail-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}.mix-detail-art{width:100px;height:100px;border-radius:6px;object-fit:cover;flex-shrink:0}.mix-detail-art-ph{width:100px;height:100px;border-radius:6px;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--text-dim);flex-shrink:0}.builder-bar{display:flex;gap:8px;padding:10px 20px;background:var(--bg-raised);border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;align-items:center;flex-wrap:wrap}.builder-field{background:var(--bg-hover);border:none;border-radius:6px;padding:8px 12px;color:var(--text);font:inherit;font-size:14px;outline:none}.builder-field:focus{outline:1px solid var(--accent)}.builder-field::placeholder{color:var(--text-dim)}.builder-dots{display:flex;gap:4px;align-items:center}.builder-dot{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer}.builder-dot.active{border-color:#fff}.inline-note-bar{display:flex;gap:6px;padding:6px 8px 6px 80px;background:#ffffff08;align-items:center;border-radius:0 0 6px 6px}.inline-editor{padding:12px 8px 12px 80px;background:#ffffff08;border-top:1px solid rgba(255,255,255,.04)}.editor-pills{display:flex;gap:6px;margin-bottom:8px}.login-shell{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg)}.login-logo{font-family:Playfair Display,serif;font-size:48px;font-weight:600;color:var(--accent);margin-bottom:4px}.login-sub{color:var(--text-sub);font-size:16px;margin-bottom:40px}.login-card{background:var(--bg-raised);border-radius:12px;padding:40px 32px;text-align:center;width:380px;max-width:90vw}.login-card p{color:var(--text-sub);margin-bottom:20px;font-size:15px}.login-icon{font-size:40px;margin-bottom:12px;display:block}@media(min-width:768px){.page{padding:24px 32px}.bottom-nav{max-width:480px;margin:0 auto;width:100%;border-radius:12px 12px 0 0}}