:root{--ink:#111827;--muted:#667085;--subtle:#98a2b3;--line:#e4e7ec;--paper:#f6f7f9;--card:#fff;--accent:#2563eb;--accent-dark:#1d4ed8;--accent-soft:#eff6ff;--success:#16a34a;--danger:#dc2626;--font-readable:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:var(--font-readable);margin:0;font-size:15px;line-height:1.5}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}main{min-height:100vh;overflow:hidden}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;width:min(1120px,100% - 48px);height:76px;margin:0 auto;display:flex}.top-actions{align-items:center;gap:10px;display:flex}.brand{align-items:center;gap:9px;display:flex}.brand strong{letter-spacing:0;font-size:19px}.brand em{font:500 10px/1 var(--font-mono), monospace;letter-spacing:0;color:var(--muted);margin-left:2px;font-style:normal}.brand-mark{background:#111827;border-radius:7px;justify-content:center;align-items:center;gap:2px;width:26px;height:26px;display:flex}.brand-mark i{opacity:.95;background:#fff;border-radius:2px;width:2px;display:block}.brand-mark i:first-child,.brand-mark i:nth-child(4){height:7px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:10px}.server-pill{border:1px solid var(--line);color:#475467;background:#fff;border-radius:8px;align-items:center;gap:8px;min-height:34px;padding:0 11px;font-size:12px;display:flex}.status-dot{background:var(--subtle);border-radius:50%;width:7px;height:7px}.status-dot.online{background:var(--success)}.hero{justify-content:space-between;align-items:flex-end;gap:64px;width:min(1120px,100% - 48px);min-height:210px;margin:0 auto;padding:46px 0 38px;display:flex}.eyebrow{font:600 11px/1 var(--font-mono), monospace;letter-spacing:0;text-transform:uppercase;color:var(--muted);margin:0 0 11px}.hero h1{letter-spacing:0;max-width:620px;margin:0;font-size:clamp(40px,4.5vw,58px);font-weight:720;line-height:1.08}.hero-copy{width:390px;color:var(--muted);margin:0 0 3px;font-size:16px;line-height:1.65}.notice{border:1px solid;border-radius:10px;align-items:center;gap:10px;width:min(1120px,100% - 48px);margin:0 auto 18px;padding:12px 14px;font-size:13px;display:flex}.notice>span{border-radius:50%;place-items:center;width:20px;height:20px;font-weight:800;display:grid}.notice button{color:inherit;background:0 0;border:0;margin-left:auto;font-size:20px}.notice.success{color:#166534;background:#f0fdf4;border-color:#bbf7d0}.notice.success>span{background:#dcfce7}.notice.error{color:#991b1b;background:#fef2f2;border-color:#fecaca}.notice.error>span{background:#fee2e2}.studio-grid{border:1px solid var(--line);background:var(--card);border-radius:12px;grid-template-columns:1.35fr .85fr;width:min(1120px,100% - 48px);margin:0 auto;display:grid;overflow:hidden}.panel{background:var(--card);min-width:0;padding:30px}.sample-panel{border-right:1px solid var(--line)}.create-panel{color:var(--ink);background:#fbfcfe;flex-direction:column;display:flex}.panel-heading,.test-heading{justify-content:space-between;align-items:center;gap:20px;display:flex}.panel-heading>div,.test-heading>div{align-items:center;gap:12px;display:flex}.panel-heading p,.test-heading p{margin:0;font-size:14px;font-weight:700}.step{font:600 10px/1 var(--font-mono), monospace;color:var(--accent);background:var(--accent-soft);border:1px solid #bfdbfe;border-radius:6px;padding:6px 7px}.create-panel .step{color:var(--accent);border-color:#bfdbfe}.hint{color:var(--subtle);font-size:12px}.recorder{border:1px solid var(--line);background:#f8fafc;border-radius:10px;flex-direction:column;justify-content:space-between;min-height:196px;margin-top:25px;padding:24px;transition:border-color .18s,background .18s;display:flex}.recorder.is-recording{background:#f0fdf4;border-color:#86efac}.waveform{justify-content:center;align-items:center;gap:4px;height:64px;display:flex}.waveform i{opacity:.55;background:#64748b;border-radius:3px;width:3px;min-height:8px;transition:height 80ms linear}.waveform i:nth-child(3n){opacity:.3}.record-meta{color:var(--muted);justify-content:space-between;align-items:center;font-size:12px;display:flex}.record-meta strong{font:500 12px/1 var(--font-mono), monospace;color:#344054}.record-button{color:#344054;background:#fff;border:1px solid #d0d5dd;border-radius:8px;justify-content:center;align-self:center;align-items:center;gap:10px;min-width:166px;height:40px;padding:0 16px;font-size:13px;font-weight:700;display:flex}.record-button:hover{border-color:#98a2b3}.record-button>span{background:var(--danger);border-radius:50%;width:8px;height:8px}.record-button.stop>span{border-radius:2px}.divider{height:42px;color:var(--subtle);text-transform:uppercase;align-items:center;gap:14px;font-size:11px;display:flex}.divider:before,.divider:after{content:"";background:var(--line);flex:1;height:1px}.dropzone{cursor:pointer;border:1px dashed #cbd5e1;border-radius:10px;grid-template-columns:35px 1fr;align-content:center;column-gap:12px;min-height:92px;padding:16px;transition:border-color .18s,background .18s;display:grid}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:var(--accent-soft)}.upload-mark{width:35px;height:35px;color:var(--accent);background:#eef2ff;border-radius:8px;grid-row:1/3;align-self:center;place-items:center;font-size:18px;display:grid}.dropzone p{text-overflow:ellipsis;white-space:nowrap;align-self:end;margin:0;font-size:13px;font-weight:700;overflow:hidden}.dropzone small{color:var(--subtle);margin-top:3px;font-size:11px}.sample-audio{width:100%;height:38px;margin-top:12px}.script{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}.script summary{cursor:pointer;color:#475467;font-size:12px;font-weight:700}.script p{color:var(--muted);margin:12px 0 0;font-size:13px;line-height:1.65}.voice-badge{border:1px solid var(--line);background:#fff;border-radius:12px;place-items:center;width:72px;height:72px;margin:44px auto 34px;display:grid}.voice-badge strong{color:var(--accent);font-size:28px;font-weight:700}.field-label{color:var(--muted);font:600 11px/1 var(--font-mono), monospace;text-transform:uppercase;letter-spacing:0;margin-bottom:9px}.text-input{width:100%;height:46px;color:var(--ink);background:#fff;border:1px solid #d0d5dd;border-radius:8px;outline:none;padding:0 13px;font-size:14px}.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2563eb1f}.button{border:0;border-radius:8px;justify-content:center;align-items:center;gap:10px;height:46px;padding:0 17px;font-size:13px;font-weight:750;display:inline-flex}.button.primary{color:#fff;background:var(--accent)}.button.primary:hover:not(:disabled){background:var(--accent-dark)}.clone-button{width:100%;margin-top:13px}.privacy-note{text-align:center;color:var(--muted);margin:auto 0 0;padding-top:24px;font-size:12px}.privacy-note span{color:var(--success);margin-right:5px}.spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:15px;height:15px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.test-section{border:1px solid var(--line);background:#fff;border-radius:12px;width:min(1120px,100% - 48px);margin:48px auto 0;padding:30px}.test-heading select{color:#344054;background:#fff;border:1px solid #d0d5dd;border-radius:8px;min-width:210px;height:38px;padding:0 10px;font-size:13px}.prompt-box{border:1px solid var(--line);border-radius:10px;margin-top:22px;overflow:hidden}.prompt-box textarea{resize:vertical;letter-spacing:0;border:0;outline:0;width:100%;min-height:124px;padding:18px;font-size:16px;line-height:1.6}.prompt-footer{border-top:1px solid var(--line);background:#f8fafc;align-items:center;gap:10px;min-height:60px;padding:10px;display:flex}.suggestions{gap:6px;display:flex}.suggestions button,.refresh,.delete-button{color:#475467;background:#fff;border:1px solid #d0d5dd;border-radius:7px;height:32px;padding:0 10px;font-size:12px;font-weight:700}.suggestions button:hover,.refresh:hover,.delete-button:hover{color:var(--ink);border-color:#98a2b3}.mode-toggle{background:#fff;border:1px solid #d0d5dd;border-radius:8px;align-items:center;gap:3px;height:34px;padding:3px;display:flex}.mode-toggle button{color:#475467;background:0 0;border:0;border-radius:6px;min-width:72px;height:26px;padding:0 10px;font-size:12px;font-weight:700}.mode-toggle button.active{color:var(--accent);background:#eef2ff}.prompt-footer>span{color:var(--subtle);font:400 11px/1 var(--font-mono), monospace;margin-left:auto}.speak-button{min-width:168px;height:40px}.audio-result{background:#f8fbff;border:1px solid #dbeafe;border-radius:10px;align-items:center;gap:16px;margin-top:12px;padding:12px 14px;display:flex}.audio-result span{color:#1e3a8a;white-space:nowrap;font-size:12px;font-weight:750}.audio-result audio{width:100%;height:36px}.stream-bars{flex:1;align-items:center;gap:4px;height:24px;display:flex;overflow:hidden}.stream-bars i{opacity:.75;background:#93c5fd;border-radius:2px;width:5px;height:8px}.stream-bars i:nth-child(3n+1){height:14px}.stream-bars i:nth-child(3n+2){height:20px}.library-section{width:min(1120px,100% - 48px);margin:70px auto 92px}.library-heading{justify-content:space-between;align-items:flex-end;margin-bottom:20px;display:flex}.library-heading .eyebrow{margin-bottom:8px}.library-heading h2{letter-spacing:0;margin:0;font-size:26px}.refresh{background:0 0}.voice-list{border-top:1px solid var(--line)}.voice-row{border-bottom:1px solid var(--line);align-items:center;gap:15px;min-height:72px;padding:10px 0;display:flex}.voice-row.selected{background:#f8fafc}.voice-main{text-align:left;background:0 0;border:0;flex:1;align-items:center;gap:13px;padding:0;display:flex}.voice-avatar{width:38px;height:38px;color:var(--accent);background:#eef2ff;border-radius:9px;place-items:center;font-weight:800;display:grid}.voice-main>span:last-child{flex-direction:column;gap:4px;display:flex}.voice-main strong{font-size:14px}.voice-main small{color:var(--subtle);font:400 11px/1 var(--font-mono), monospace}.delete-button{color:#b42318;border-color:#fecdca;flex:none}.delete-button:hover:not(:disabled){color:#912018;background:#fffbfa;border-color:#fda29b}.empty-voice{color:var(--muted);padding:36px 0;font-size:13px}footer{border-top:1px solid var(--line);width:min(1120px,100% - 48px);min-height:116px;color:var(--muted);align-items:center;gap:30px;margin:0 auto;font-size:12px;display:flex}footer p{margin:0}footer>span{font:400 11px/1 var(--font-mono), monospace;text-transform:uppercase;letter-spacing:0;margin-left:auto}.unlock-shell{background:var(--paper);place-items:center;min-height:100vh;display:grid}.unlock-card{border:1px solid var(--line);background:#fff;border-radius:12px;width:min(420px,100% - 36px);padding:34px}.unlock-card .eyebrow{margin-top:44px}.unlock-card h1{letter-spacing:0;margin:0 0 13px;font-size:34px;line-height:1.12}.unlock-card>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.6}.unlock-card form{gap:10px;margin-top:26px;display:grid}.unlock-card input{background:#fff;border:1px solid #d0d5dd;border-radius:8px;outline:0;height:48px;padding:0 13px}.login-notice{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin-top:18px;padding:10px 12px;font-size:13px}@media (width<=800px){.topbar,.hero,.studio-grid,.notice,.test-section,.library-section,footer{width:min(100% - 28px,620px)}.topbar{flex-direction:column;align-items:flex-start;gap:12px;height:auto;min-height:72px;padding:18px 0}.brand em{display:none}.top-actions{justify-content:space-between;gap:8px;width:100%}.server-pill{font-size:11px}.hero{min-height:auto;padding:42px 0 34px;display:block}.hero h1{letter-spacing:0;font-size:clamp(38px,11vw,52px)}.hero-copy{width:auto;margin-top:22px}.studio-grid{grid-template-columns:1fr}.sample-panel{border-right:0;border-bottom:1px solid var(--line)}.panel{padding:22px}.create-panel{min-height:390px}.voice-badge{margin:30px auto 26px}.test-section{margin-top:32px;padding:22px}.test-heading{flex-direction:column;align-items:flex-start}.test-heading select{width:100%}.prompt-footer{flex-wrap:wrap;align-items:stretch}.suggestions{width:100%;overflow-x:auto}.suggestions button{white-space:nowrap}.mode-toggle{width:100%}.mode-toggle button{flex:1}.speak-button{width:100%}.prompt-footer>span{display:none}.audio-result{flex-direction:column;align-items:flex-start}.library-section{margin:58px auto 66px}footer{gap:14px;min-height:100px}footer p{display:none}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:.01ms!important}}