body{margin:0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0c12;--panel:#141823;--border:#1f2535;--text:#d8dcea;--text-dim:#7a839b;--accent:#ffb84a;--accent-soft:#ffd58a;--blue:#5fa8ff}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);margin:0;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;font-size:13px}.app{grid-template-rows:auto 1fr;height:100vh;display:grid;overflow:hidden}.editor-view{grid-template-rows:auto 1fr auto;height:100%;min-height:0;display:grid}.app-header{border-bottom:1px solid var(--border);background:var(--panel);align-items:baseline;gap:12px;padding:12px 18px;display:flex}.app-header h1{letter-spacing:.5px;color:var(--accent);margin:0;font-size:18px;font-weight:600}.app-header .subtitle{color:var(--text-dim);font-size:12px}.online-indicator{color:var(--text-dim);font-variant-numeric:tabular-nums;align-items:center;gap:6px;margin-left:12px;font-size:12px;display:inline-flex}.online-dot{background:#22c55e;border-radius:50%;width:8px;height:8px;animation:2s ease-out infinite online-pulse;box-shadow:0 0 #22c55eb3}@keyframes online-pulse{0%{box-shadow:0 0 #22c55e99}70%{box-shadow:0 0 0 8px #22c55e00}to{box-shadow:0 0 #22c55e00}}.app-header .tabs{gap:4px;margin-left:auto;display:flex}.app-header .tab{color:var(--text-dim);border:1px solid var(--border);cursor:pointer;letter-spacing:.3px;background:0 0;border-radius:5px;padding:5px 14px;font-size:12px}.app-header .tab:hover{color:var(--text);border-color:var(--accent)}.app-header .tab.active{background:var(--accent);color:#1a1f2e;border-color:var(--accent);font-weight:600}.recorder{justify-content:center;align-items:center;min-height:0;padding:24px;display:flex;overflow:auto}.recorder-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:18px;width:100%;max-width:560px;padding:32px 36px;display:flex}.recorder-card h2{color:var(--text);margin:0;font-size:18px;font-weight:600}.recorder-card .muted{color:var(--text-dim);margin:0;font-size:12px;line-height:1.5}.recorder-card .small{font-size:11px}.meter-row{align-items:center;gap:12px;display:flex}.meter-track{border:1px solid var(--border);background:#0c0f17;border-radius:5px;flex:1;height:10px;position:relative;overflow:hidden}.meter-fill{background:linear-gradient(90deg,#4ade80 0%,#facc15 70%,#f87171 95%);transition:width 60ms linear;position:absolute;inset:0 auto 0 0}.meter-peak{background:#fff9;width:2px;position:absolute;top:-2px;bottom:-2px;transform:translate(-1px)}.elapsed{font-variant-numeric:tabular-nums;color:var(--text);text-align:right;min-width:60px}.record-controls{align-items:center;gap:10px;display:flex}.big-record{color:#fff;cursor:pointer;letter-spacing:.3px;background:#ff4d4f;border:none;border-radius:999px;align-items:center;gap:10px;padding:10px 22px;font-size:14px;font-weight:600;display:inline-flex}.big-record:hover{filter:brightness(1.1)}.big-record:disabled{opacity:.6;cursor:not-allowed}.big-record .dot{background:#fff;border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 3px #ffffff40}.big-record.stop{color:var(--text);background:#1f2535}.big-record.stop .square{background:#ff4d4f;border-radius:2px;width:11px;height:11px}.record-controls .primary{background:var(--accent);color:#1a1f2e;cursor:pointer;border:none;border-radius:5px;padding:8px 16px;font-weight:600}.record-controls .ghost{color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:5px;padding:8px 14px}.record-controls .ghost:hover{color:var(--text)}.preview{border-top:1px solid var(--border);flex-direction:column;gap:6px;padding-top:6px;display:flex}.preview .label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;font-size:10px}.preview audio{width:100%}.recorder-card .error{color:#ff6b6b;background:#ff6b6b14;border:1px solid #ff6b6b4d;border-radius:5px;padding:8px 10px;font-size:12px}.toolbar{border-bottom:1px solid var(--border);background:var(--panel);flex-wrap:wrap;align-items:center;gap:16px;min-height:48px;padding:10px 18px;display:flex}.toolbar-section{align-items:center;gap:6px;display:flex}.toolbar .label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;font-size:10px}.toolbar .value{font-variant-numeric:tabular-nums;color:var(--text);min-width:50px}.toolbar .divider{background:var(--border);align-self:stretch;width:1px;margin:0 4px}.toolbar .hint{color:var(--text-dim);font-style:italic}.toolbar input[type=range]{width:100px;accent-color:var(--accent)}.toolbar button{color:var(--text);border:1px solid var(--border);cursor:pointer;background:#1c2132;border-radius:4px;padding:4px 10px;font-size:12px}.toolbar button:hover{border-color:var(--accent)}.toolbar button.active{background:var(--accent);color:#1a1f2e;border-color:var(--accent);font-weight:600}.toolbar button .kbd-hint{color:var(--text-dim);letter-spacing:.3px;margin-left:4px;font-size:10px}.toolbar button.active .kbd-hint{color:#1a1f2ea6}.toolbar button.primary{background:var(--accent);color:#1a1f2e;border-color:var(--accent);font-weight:600}.toolbar button.cancel{color:#ffb0b8;background:#3a1f25;border-color:#6b3a45}.toolbar button.ghost{color:var(--text-dim);border:1px solid var(--border);background:0 0}.toolbar button.ghost:hover{color:var(--text)}.toolbar .value.small{color:var(--text-dim);font-size:11px}.export-section{position:relative}.popover{z-index:50;border:1px solid var(--border);background:#1c2132;border-radius:6px;flex-direction:column;gap:2px;min-width:220px;padding:6px;display:flex;position:absolute;top:36px;left:0;box-shadow:0 8px 24px #0006}.popover-title{letter-spacing:.6px;color:var(--text-dim);text-transform:uppercase;padding:6px 8px 4px;font-size:10px}.popover-item{color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;font-size:12px;display:flex}.popover-item:hover{background:#ffffff0d}.popover-item.primary{color:var(--accent-soft);background:#ffb84a1f}.popover-item.primary:hover{background:#ffb84a33}.popover-item.ghost{color:var(--text-dim);justify-content:center;font-size:11px}.popover-item .muted{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:11px}.toolbar .hint.warning{color:#facc15;letter-spacing:.3px;font-size:11px}.toolbar .btn-group{gap:0;display:flex}.toolbar .btn-group button{border-radius:0}.toolbar .btn-group button:first-child{border-radius:4px 0 0 4px}.toolbar .btn-group button:last-child{border-left:none;border-radius:0 4px 4px 0}.file-button{border:1px dashed var(--border);color:var(--text-dim);cursor:not-allowed;background:#1c2132;border-radius:4px;align-items:center;padding:6px 12px;font-size:12px;display:inline-flex}.file-button input{display:none}.pitch-editor{background:#0e1119;flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.pitch-editor.tool-slicer{cursor:crosshair}.pitch-editor.tool-slicer canvas{cursor:crosshair!important}.pitch-editor.tool-stretcher{cursor:ew-resize}.pitch-editor.tool-stretcher canvas{cursor:ew-resize!important}.minimap{border-top:1px solid var(--border);-webkit-user-select:none;user-select:none;background:#10131c}.toolbar .filename{color:var(--accent-soft);text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:12px;overflow:hidden}.toolbar .error{color:#ff6b6b;max-width:220px;font-size:11px}.toolbar button:disabled{opacity:.5;cursor:not-allowed}.app-footer{border-top:1px solid var(--border);background:var(--panel);color:var(--text-dim);padding:8px 18px;font-size:11px}.auth-button{background:var(--accent);color:#1a1f2e;border:1px solid var(--accent);letter-spacing:.3px;cursor:pointer;border-radius:5px;align-items:center;gap:6px;margin-left:12px;padding:5px 14px;font-size:12px;font-weight:600;display:inline-flex}.auth-button:hover{filter:brightness(1.05)}.auth-button.user{color:var(--text);border-color:var(--border);background:0 0;font-weight:500}.auth-button.user:hover{border-color:var(--accent)}.pro-pill{background:var(--accent);color:#1a1f2e;letter-spacing:.5px;border-radius:3px;padding:2px 6px;font-size:9px;font-weight:700}.user-menu{position:relative}.user-popover{border:1px solid var(--border);z-index:100;background:#1c2132;border-radius:6px;flex-direction:column;gap:2px;min-width:200px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 24px #0006}.user-popover-row{padding:6px 10px;font-size:11px}.user-popover-item{text-align:left;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:8px 10px;font-size:12px;text-decoration:none;display:block}.user-popover-item:hover{background:#ffffff0d}.auth-modal-backdrop{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.auth-modal{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:14px;width:360px;max-width:calc(100vw - 32px);padding:28px 32px;display:flex;position:relative;box-shadow:0 20px 60px #00000080}.auth-modal h2{color:var(--accent);margin:0;font-size:18px}.auth-modal .muted{color:var(--text-dim);margin:0;font-size:12px}.auth-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:22px;line-height:1;position:absolute;top:8px;right:10px}.auth-close:hover{color:var(--text)}.google-btn{color:#3c4043;cursor:pointer;background:#fff;border:1px solid #dadce0;border-radius:6px;justify-content:center;align-items:center;gap:10px;padding:10px 16px;font-size:14px;font-weight:500;display:inline-flex}.google-btn:hover{background:#f8f9fa}.google-btn:disabled{opacity:.6;cursor:not-allowed}.auth-error{color:#ff6b6b;background:#ff6b6b14;border:1px solid #ff6b6b4d;border-radius:5px;padding:8px 10px;font-size:12px}.bottom-ad{z-index:800;background:var(--panel);border-top:1px solid var(--border);justify-content:center;align-items:center;min-height:64px;padding:6px 12px;transition:transform .48s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -4px 16px #0000004d}.bottom-ad.in{transform:translateY(0)}.bottom-ad-slot{justify-content:center;max-width:100%;display:flex}.overlay-ad-backdrop{z-index:1100;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#000000bf;justify-content:center;align-items:center;animation:.2s fadein;display:flex;position:fixed;inset:0}@keyframes fadein{0%{opacity:0}to{opacity:1}}.overlay-ad{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:10px;width:min(720px,100vw - 32px);max-height:calc(100vh - 64px);padding:14px;display:flex;box-shadow:0 20px 60px #0009}.overlay-ad-header{justify-content:space-between;align-items:center;display:flex}.overlay-ad-label{color:var(--text-dim);letter-spacing:.8px;text-transform:uppercase;font-size:10px}.overlay-ad-timer{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:12px}.overlay-ad-close{color:var(--text);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:24px;line-height:1}.overlay-ad-close:hover{color:var(--accent)}.overlay-ad-slot{justify-content:center;align-items:center;min-height:250px;display:flex}.admin-shell{background:var(--bg);min-height:100vh;color:var(--text);flex-direction:column;display:flex}.admin-header{border-bottom:1px solid var(--border);background:var(--panel);justify-content:space-between;align-items:center;padding:14px 24px;display:flex}.admin-header h1{color:var(--accent);margin:0;font-size:18px}.admin-header-right{align-items:center;gap:12px;font-size:12px;display:flex}.admin-header-right .ghost{color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:5px;padding:5px 12px;font-size:12px;text-decoration:none}.admin-header-right .ghost:hover{color:var(--text);border-color:var(--accent)}.admin-main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:24px}.admin-section{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:16px;padding:24px;display:flex}.admin-section h2{margin:0;font-size:16px}.admin-section .muted{color:var(--text-dim);margin:0;font-size:12px}.admin-section .small{font-size:11px}.admin-toggle{cursor:pointer;align-items:center;gap:8px;font-size:13px;display:inline-flex}.admin-toggle.inline{color:var(--text-dim);font-size:11px}.admin-toggle input{accent-color:var(--accent)}.admin-field{flex-direction:column;gap:6px;display:flex}.admin-field label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:12px}.admin-grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=800px){.admin-grid-2{grid-template-columns:1fr}}.admin-card{border:1px solid var(--border);background:#11141d;border-radius:8px;flex-direction:column;gap:10px;padding:16px;display:flex}.admin-card-head{justify-content:space-between;align-items:center;display:flex}.admin-card-head h3{margin:0;font-size:14px}.admin-section textarea{color:var(--text);border:1px solid var(--border);resize:vertical;background:#0c0f17;border-radius:5px;width:100%;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.admin-section textarea:focus{border-color:var(--accent);outline:none}.admin-inline-fields{flex-wrap:wrap;gap:12px;display:flex}.admin-inline-fields label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;flex-direction:column;gap:4px;font-size:11px;display:flex}.admin-inline-fields input{color:var(--text);border:1px solid var(--border);font-variant-numeric:tabular-nums;background:#0c0f17;border-radius:5px;width:100px;padding:6px 10px;font-size:13px}.admin-actions{align-items:center;gap:12px;padding-top:8px;display:flex}.admin-actions .primary{background:var(--accent);color:#1a1f2e;cursor:pointer;border:none;border-radius:5px;padding:9px 18px;font-size:13px;font-weight:600}.admin-actions .primary:disabled{opacity:.6;cursor:not-allowed}.admin-actions .muted{color:var(--text-dim);font-size:12px}.admin-empty{text-align:center;flex-direction:column;align-items:center;gap:12px;margin:auto;padding:60px 24px;display:flex}.admin-empty h2{color:var(--accent);margin:0}.admin-empty .muted{color:var(--text-dim);margin:0}.admin-empty .primary{background:var(--accent);color:#1a1f2e;cursor:pointer;border:none;border-radius:5px;padding:9px 18px;font-size:13px;font-weight:600}.admin-empty a{color:var(--blue)}.sessions-menu{margin-left:8px;position:relative}.sessions-trigger{color:var(--text);border:1px solid var(--border);cursor:pointer;background:#1c2132;border-radius:5px;align-items:center;gap:8px;max-width:240px;padding:5px 12px;font-size:12px;display:inline-flex}.sessions-trigger:hover{border-color:var(--accent)}.sessions-label{text-overflow:ellipsis;white-space:nowrap;max-width:200px;overflow:hidden}.sessions-caret{color:var(--text-dim);font-size:10px}.sessions-popover{border:1px solid var(--border);z-index:100;background:#1c2132;border-radius:6px;flex-direction:column;gap:4px;min-width:280px;max-width:340px;padding:8px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 28px #00000073}.sessions-section{flex-direction:column;gap:2px;display:flex}.sessions-section-title{letter-spacing:.6px;color:var(--text-dim);text-transform:uppercase;padding:6px 8px 4px;font-size:10px}.sessions-item{text-align:left;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;gap:8px;padding:8px 10px;font-size:12px;display:inline-flex}.sessions-item:hover{background:#ffffff0d}.sessions-item.primary{color:var(--accent-soft);background:#ffb84a1f}.sessions-item.primary:hover{background:#ffb84a33}.sessions-divider{background:var(--border);height:1px;margin:4px 0}.sessions-row{border-radius:4px;align-items:stretch;gap:0;display:flex;overflow:hidden}.sessions-row:hover{background:#ffffff0a}.sessions-row-load{text-align:left;color:var(--text);cursor:pointer;background:0 0;border:none;flex:1;align-items:center;gap:8px;padding:8px 10px;font-size:12px;display:inline-flex;overflow:hidden}.sessions-row-load:disabled{opacity:.5;cursor:not-allowed}.sessions-row-load.current{color:var(--accent-soft)}.sessions-row-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.sessions-row-tag{color:var(--accent-soft);letter-spacing:.5px;text-transform:uppercase;background:#ffb84a26;border-radius:3px;padding:2px 5px;font-size:9px}.sessions-row-del{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:0 10px;font-size:16px}.sessions-row-del:hover{color:#ff6b6b}.sessions-empty{color:var(--text-dim);padding:8px 10px;font-size:11px}.sessions-error{color:#ff6b6b;background:#ff6b6b14;border:1px solid #ff6b6b4d;border-radius:4px;margin-top:6px;padding:6px 8px;font-size:11px}.pro-pill-small{background:var(--accent);color:#1a1f2e;letter-spacing:.5px;border-radius:3px;margin-left:4px;padding:1px 5px;font-size:9px;font-weight:700}.modal-input{color:var(--text);border:1px solid var(--border);background:#0c0f17;border-radius:5px;width:100%;padding:9px 12px;font-size:13px}.modal-input:focus{border-color:var(--accent);outline:none}.modal-actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.primary-btn{background:var(--accent);color:#1a1f2e;cursor:pointer;border:none;border-radius:5px;padding:8px 16px;font-size:13px;font-weight:600}.primary-btn:disabled{opacity:.6;cursor:not-allowed}.ghost-btn{color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:5px;padding:8px 14px;font-size:13px}.ghost-btn:hover{color:var(--text)}.landing-loading{min-height:100vh;color:var(--text-dim);background:var(--bg);justify-content:center;align-items:center;display:flex}.landing-embed{min-height:100vh}.landing{background:radial-gradient(circle at top, #1a2030 0%, var(--bg) 60%);min-height:100vh;color:var(--text);flex-direction:column;display:flex}.landing-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:18px 28px;display:flex}.landing-header h1{color:var(--accent);letter-spacing:.5px;margin:0;font-size:22px}.landing-main{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:18px;padding:48px 24px;display:flex}.landing-title{letter-spacing:-.5px;max-width:720px;margin:0;font-size:40px;line-height:1.1}.landing-sub{color:var(--text-dim);max-width:560px;margin:0;font-size:16px;line-height:1.5}.landing-cta{background:var(--accent);color:#1a1f2e;letter-spacing:.4px;border-radius:999px;margin-top:14px;padding:14px 32px;font-size:16px;font-weight:700;text-decoration:none;display:inline-block;box-shadow:0 8px 24px #ffb84a40}.landing-cta:hover{filter:brightness(1.05)}.landing-footer{border-top:1px solid var(--border);color:var(--text-dim);justify-content:space-between;padding:18px 28px;font-size:12px;display:flex}.landing-footer a{color:var(--blue);text-decoration:none}.admin-tabs{border-bottom:1px solid var(--border);background:var(--panel);gap:4px;padding:0 24px;display:flex}.admin-tab{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:12px 18px;font-size:13px}.admin-tab:hover{color:var(--text)}.admin-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}