body{background:#0c0c0f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8f5f1;--bg-2:#f3efe8;--surface:#ffffffb8;--surface-strong:#fffdfb;--surface-soft:#f5efe9;--border:#5e4d5c1f;--text:#2f2a30;--muted:#6b6270;--accent:#c9b8ff;--accent-strong:#9d8dff;--accent-2:#ffd8c7;--mint:#d8f1e7;--sky:#dfeeff;--peach:#ffe5d9;--rose:#f8dfe8;--radius:24px;--shadow:0 18px 40px #62575f14;--transition:.18s ease}html,body{background:radial-gradient(circle at top left, #c9b8ff7a, transparent 30%), radial-gradient(circle at top right, #ffd8c780, transparent 25%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,Segoe UI,sans-serif}body{min-height:100vh}#root{flex-direction:column;min-height:100vh;display:flex}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#68607540;border-radius:999px}button,input,select{font:inherit}.app-header{z-index:10;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);background:#f8f5f1a6;justify-content:center;align-items:center;padding:24px 20px;display:flex;position:sticky;top:0}.logo{letter-spacing:.04em;color:var(--text);align-items:center;gap:10px;font-size:1.05rem;font-weight:700;display:flex}.logo-icon{width:22px;height:22px;color:var(--accent-strong)}.app-main{flex-direction:column;flex:1;align-items:center;gap:30px;padding:44px 18px 28px;display:flex}.hero-section{text-align:center;max-width:620px}.hero-title{letter-spacing:-.07em;color:#2d2a30;margin-bottom:14px;font-size:clamp(2.15rem,5vw,4rem);font-weight:800;line-height:.96}.gradient-text{background:linear-gradient(135deg,#b697ff 0%,#ffbca8 55%,#9adcc7 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-subtitle{color:var(--muted);font-size:1rem;line-height:1.7}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:min(100%,520px);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden}.dropzone{cursor:pointer;transition:transform var(--transition), background var(--transition), border-color var(--transition);padding:46px 30px;position:relative}.dropzone.dragging{background:#c9b8ff1a;transform:translateY(-1px)}.dropzone.drag-error{background:#ffaeae1f}.dropzone.disabled{opacity:.6;cursor:not-allowed}.dropzone:before{content:"";pointer-events:none;transition:border-color var(--transition), background var(--transition);border:1.5px dashed #7a6f8142;border-radius:18px;position:absolute;inset:12px}.dropzone.dragging:before{border-color:#9d8dffb3}.dropzone.drag-error:before{border-color:#db7b8cb3}.dropzone-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.dropzone-input:disabled{pointer-events:none}.dropzone-label{pointer-events:none;-webkit-user-select:none;user-select:none;text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.dropzone-icon{color:#8a78d8;width:60px;height:60px;transition:transform var(--transition), box-shadow var(--transition);background:linear-gradient(#c9b8ff42,#fffc);border:1px solid #9d8dff3d;border-radius:18px;justify-content:center;align-items:center;margin-bottom:4px;display:flex}.dragging .dropzone-icon{transform:translateY(-2px)scale(1.03);box-shadow:0 12px 22px #9d8dff2e}.drag-error .dropzone-icon{color:#d76f7b}.dropzone-icon svg{width:28px;height:28px}.dropzone-title{color:var(--text);font-size:1.04rem;font-weight:700}.dropzone-subtitle{color:var(--muted);font-size:.84rem}.dropzone-badges{gap:8px;margin-top:4px;display:flex}.badge{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;background:#ffffffbd;border:1px solid #6f627e1a;border-radius:999px;justify-content:center;align-items:center;padding:5px 10px;font-size:.66rem;font-weight:700;display:inline-flex}.analyzing-view{flex-direction:column;align-items:center;gap:12px;padding:52px 30px;display:flex}.analyzing-icon{margin-bottom:6px}.wave-bars{align-items:flex-end;gap:6px;height:46px;display:flex}.wave-bar{background:linear-gradient(#bdaaf8 0%,#ffbca8 100%);border-radius:999px;width:6px;animation:.8s ease-in-out infinite alternate wavePulse}@keyframes wavePulse{0%{opacity:.5;height:10px}to{opacity:1;height:42px}}.analyzing-filename{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:300px;font-size:.83rem;overflow:hidden}.analyzing-status{color:var(--text);font-size:1rem;font-weight:700}.progress-track{background:#7f748a14;border-radius:999px;width:278px;height:7px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg,#c7b8ff 0%,#ffd8c7 60%,#bfeee0 100%);height:100%;transition:width .22s}.progress-pct{color:var(--muted);font-size:.74rem}.bpm-result{flex-direction:column;align-items:center;gap:24px;padding:30px 22px 32px;animation:.45s fadeUp;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.result-header{width:100%}.file-info{background:#ffffffb3;border:1px solid #75678114;border-radius:14px;align-items:center;gap:10px;width:100%;padding:12px 14px;display:flex}.file-badge{color:#362f3d;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(135deg,#c9b8ff 0%,#ffccb7 100%);border-radius:8px;justify-content:center;align-items:center;padding:4px 8px;font-size:.62rem;font-weight:800;display:inline-flex}.file-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.8rem;overflow:hidden}.file-duration{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.74rem}.bpm-main{justify-content:center;align-items:center;width:210px;height:210px;display:flex;position:relative}.bpm-pulse-ring{opacity:0;border:2px solid #997ee180;border-radius:50%;animation:1s ease-out infinite pulseRing;position:absolute;inset:0}.bpm-pulse-ring--delay{animation-delay:.5s}@keyframes pulseRing{0%{opacity:.55;transform:scale(.88)}to{opacity:0;transform:scale(1.22)}}.bpm-circle{z-index:1;background:linear-gradient(#ffffffb8,#f4eff9db);border:2.5px solid;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:170px;height:170px;display:flex;position:relative;box-shadow:0 18px 30px #8566ba26}.bpm-label-top{letter-spacing:.15em;color:var(--muted);text-transform:uppercase;font-size:.62rem;font-weight:800}.bpm-number{letter-spacing:-.08em;color:var(--text);align-items:baseline;gap:2px;font-size:3.1rem;font-weight:800;line-height:1;display:flex}.bpm-decimal{color:var(--muted);font-size:1.15rem}.bpm-category{letter-spacing:.08em;text-transform:uppercase;margin-top:2px;font-size:.65rem;font-weight:800}.bpm-meta{background:#ffffffa6;border:1px solid #75678117;border-radius:16px;width:100%;display:flex;overflow:hidden}.meta-item{flex-direction:column;flex:1;align-items:center;gap:4px;padding:14px 8px;display:flex}.meta-item:not(:last-child){border-right:1px solid #75678114}.meta-label{letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-size:.62rem;font-weight:800}.meta-value{color:var(--text);font-variant-numeric:tabular-nums;font-size:.96rem;font-weight:700}.button-row{gap:10px;width:100%;display:flex}.btn-primary,.btn-reset{cursor:pointer;transition:transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:11px 18px;font-size:.86rem;font-weight:700;display:inline-flex}.btn-primary{color:#342d41;background:linear-gradient(135deg,#cabdff 0%,#ffd5c5 100%);border:1px solid #9282c833;flex:1.2;box-shadow:0 10px 24px #9e8ecb47}.btn-primary:hover,.btn-reset:hover{transform:translateY(-1px)}.btn-reset{color:var(--text);background:#ffffffbd;border:1px solid #76678024;flex:1}.btn-reset:hover{background:#ffffffe6;border-color:#76678038}.btn-reset svg{width:16px;height:16px}.error-view{flex-direction:column;align-items:center;gap:12px;padding:52px 28px;display:flex}.error-icon{color:#cf6772;background:#ffc7d047;border:1px solid #d76f7b2e;border-radius:50%;justify-content:center;align-items:center;width:54px;height:54px;display:flex}.error-icon svg{width:26px;height:26px}.error-title{color:var(--text);font-size:1.04rem;font-weight:800}.error-message{color:var(--muted);text-align:center;max-width:320px;font-size:.84rem;line-height:1.6}.app-header{justify-content:center;align-items:center;gap:14px;display:flex}.account-card,.beat-card,.store-card,.library-card{grid-column:span 12}.account-row{justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.account-name{color:var(--text);font-size:1.08rem;font-weight:800}.account-handle{color:var(--muted);font-size:.8rem}.plan-badge{color:var(--text);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(135deg,#c9b8ff52,#ffd8c75c);border-radius:999px;justify-content:center;align-items:center;padding:6px 10px;font-size:.66rem;font-weight:800;display:inline-flex}.account-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px;display:grid}.account-stats>div{background:#f8f5f1d1;border:1px solid #60516e14;border-radius:14px;padding:12px 14px}.stat-label{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-size:.62rem;display:block}.account-stats strong{color:var(--text);font-size:1.3rem;font-weight:800}.account-form,.tool-grid{flex-direction:column;gap:14px;display:flex}.account-form label,.tool-grid label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex-direction:column;gap:8px;font-size:.74rem;font-weight:700;display:flex}.account-form input,.tool-grid input,.tool-grid select{width:100%;color:var(--text);background:#ffffffd9;border:1px solid #6c567c1f;border-radius:12px;padding:11px 12px;font-size:.92rem;font-weight:600}.account-toggle,.account-submit{width:100%}.beat-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:18px;display:grid}.beat-step{min-height:42px;color:var(--muted);cursor:pointer;transition:transform var(--transition), background var(--transition), border-color var(--transition);background:#ffffffb8;border:1px solid #60516e1f;border-radius:12px;font-size:.74rem;font-weight:800}.beat-step.active{color:#2f2937;background:linear-gradient(135deg,#cabdff 0%,#ffd5c5 100%);border-color:#0000;box-shadow:0 10px 18px #ad8dd32e}.store-list,.project-list{flex-direction:column;gap:12px;display:flex}.store-list{list-style:none}.store-list li,.project-item{background:#f8f5f1cc;border:1px solid #60516e14;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:12px;display:flex}.store-list strong,.project-item strong{color:var(--text);font-size:.94rem;display:block}.store-list span,.project-item span{color:var(--muted);font-size:.72rem;display:block}.store-list button{letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:#fffc;border:1px solid #6e5a821f;border-radius:10px;padding:8px 10px;font-size:.7rem;font-weight:800}.project-meta{color:var(--text);flex-direction:column;align-items:flex-end;gap:3px;font-weight:700;display:flex}.account-pill{color:var(--text);background:#ffffffb3;border:1px solid #60516e1a;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:.76rem;font-weight:700;display:inline-flex}.account-dot{background:linear-gradient(135deg,#9fdcc4 0%,#b89cff 100%);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #9fdcc433}.studio-shell{grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;width:min(100%,1000px);margin-top:8px;display:grid}.studio-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffb3;border:1px solid #60516e1a;border-radius:22px;padding:18px 18px 20px;box-shadow:0 18px 30px #796c7e0f}.account-card,.project-card,.library-card{grid-column:span 12}.section-label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-size:.68rem;font-weight:800;display:inline-block}.account-summary{background:#f8f5f1e6;border:1px solid #60516e14;border-radius:14px;flex-direction:column;gap:6px;margin-bottom:14px;padding:14px 12px;display:flex}.account-summary strong{color:var(--text);font-size:1.08rem}.account-summary span{color:var(--muted);font-size:.8rem}.auth-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px;display:grid}.auth-list.single-provider{grid-template-columns:1fr}.auth-button{letter-spacing:.08em;text-transform:uppercase;color:var(--text);cursor:pointer;border:1px solid #60516e14;border-radius:12px;padding:11px 12px;font-size:.75rem;font-weight:800}.auth-button:disabled{opacity:.6;cursor:wait}.signout-button{width:100%}.setup-note,.empty-state,.status-box{color:var(--muted);background:#fffc;border:1px solid #60516e14;border-radius:14px;margin-top:14px;padding:12px 14px;font-size:.78rem;line-height:1.5}.status-box{color:var(--text);font-weight:600}.tool-grid{flex-direction:column;gap:14px;display:flex}.tool-grid label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex-direction:column;gap:8px;font-size:.74rem;font-weight:700;display:flex}.tool-grid input,.tool-grid select{width:100%;color:var(--text);background:#ffffffd9;border:1px solid #6c567c1f;border-radius:12px;padding:11px 12px;font-size:.92rem;font-weight:600}.tool-row{gap:14px;display:grid}.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}.two-up label strong{color:var(--text);letter-spacing:0;text-transform:none;margin-top:8px;font-size:1rem;display:block}.tool-actions{gap:10px;margin-top:18px;display:flex}.app-footer{text-align:center;color:var(--muted);padding:20px 16px 30px;font-size:.74rem}@media (width>=760px){.account-card{grid-column:span 4}.project-card{grid-column:span 8}.library-card{grid-column:span 12}}@media (width<=480px){.app-main{padding:34px 12px 24px}.card{border-radius:20px}.bpm-result{padding:24px 16px 28px}.dropzone{padding:38px 18px}.progress-track{width:220px}.two-up{grid-template-columns:1fr}.tool-actions{flex-direction:column}.auth-list{grid-template-columns:1fr}}@media (width>=760px){.account-card{grid-column:span 4}.beat-card{grid-column:span 5}.store-card{grid-column:span 3}.library-card{grid-column:span 12}}@media (width<=480px){.app-main{padding:34px 12px 24px}.card{border-radius:20px}.bpm-result{padding:24px 16px 28px}.dropzone{padding:38px 18px}.progress-track{width:220px}.two-up{grid-template-columns:1fr}.tool-actions{flex-direction:column}}