:root{--bg: #f3f6fc;--surface: #ffffff;--ink: #0c1a36;--muted: #526080;--line: #dde4f1;--brand: #2d4f9c;--brand-2: #5278d0;--brand-text: #2d4f9c;--soft: #eaeff9;--ok: #198754;--ok-bg: #d9efe4;--warn: #b45309;--warn-bg: #fff3e0;--warn-line: #f1c27d;--danger: #dc3545;--ring: color-mix(in srgb, var(--brand-2) 38%, transparent);--radius: 24px;--radius-md: 14px;--radius-sm: 12px;--shadow-sm: 0 1px 2px rgba(12, 26, 54, .05), 0 2px 8px rgba(12, 26, 54, .04);--shadow: 0 1px 2px rgba(12, 26, 54, .04), 0 12px 32px rgba(33, 58, 122, .09);--shadow-brand: 0 10px 24px rgba(45, 79, 156, .32);--glow: radial-gradient(60% 50% at 50% 0%, rgba(82, 120, 208, .16), transparent 70%);color-scheme:light}:root[data-theme=dark]{--bg: #080f20;--surface: #0f1a33;--ink: #e8eefc;--muted: #9aaccc;--line: #213056;--soft: #15244a;--brand: #3f66bf;--brand-2: #6d93e8;--brand-text: #8fb1f2;--ok: #4ade80;--ok-bg: #12291d;--warn: #ffc27a;--warn-bg: #3a2a10;--warn-line: #6b4a1a;--danger: #f87171;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .38);--shadow-brand: 0 10px 26px rgba(63, 102, 191, .38);--glow: radial-gradient(60% 50% at 50% 0%, rgba(109, 147, 232, .16), transparent 70%);color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}body{margin:0;overflow-x:hidden;min-height:100vh;background:var(--glow) no-repeat top center / 100% 520px,var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}::selection{background:color-mix(in srgb,var(--brand-2) 32%,transparent)}:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:6px}a{color:var(--brand-text);text-underline-offset:3px}.wrap{width:min(880px,100% - 32px);margin-inline:auto}.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}.logo{display:flex;align-items:center;gap:10px;min-width:0;font-weight:800;font-size:17px;text-decoration:none;color:var(--ink);letter-spacing:-.02em}.logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo i{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand),var(--brand-2));box-shadow:0 6px 14px #2d4f9c59,inset 0 1px #ffffff40}.logo i svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.tools{display:flex;align-items:center;gap:8px;flex:none}.tool-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);font:600 13px inherit;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .18s,background .18s,transform .12s}.tool-btn:hover{border-color:var(--brand-2);background:var(--soft)}.tool-btn:active{transform:scale(.97)}.tool-btn .ico{width:16px;height:16px}.tool-btn .chev{width:14px;height:14px;color:var(--muted);transition:transform .2s}.tool-btn[aria-expanded=true] .chev{transform:rotate(180deg)}.dropdown{position:relative}.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:172px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);animation:pop .16s cubic-bezier(.2,.8,.3,1) both;transform-origin:top right}.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:500 14px inherit;text-align:left;cursor:pointer;transition:background .15s}.menu-item:hover{background:var(--soft)}.menu-item.active{color:var(--brand-text);font-weight:700}.menu-item .ico{width:16px;height:16px}.menu-item .check{margin-left:auto;color:var(--brand-text)}.switch{position:relative;display:grid;grid-template-columns:1fr 1fr;width:80px;height:36px;padding:0;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface);color:var(--ink);font:600 13px inherit;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .18s}.switch:hover{border-color:var(--brand-2)}.switch span{position:relative;z-index:1;display:grid;place-items:center;font-size:12.5px;transition:color .2s}.switch i{position:absolute;z-index:0;top:3px;left:3px;width:calc(50% - 3px);height:28px;border-radius:999px;background:var(--brand);transition:transform .22s}.switch[aria-checked=false] span:first-of-type,.switch[aria-checked=true] span:last-of-type{color:#fff}.switch[aria-checked=true] i{transform:translate(100%)}@media(max-width:520px){.tool-btn-text{display:none}.tool-btn{padding:0 10px}.logo span{font-size:15px}}@media(max-width:380px){.logo span{display:none}}.hero{padding:56px 0 28px;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}.badge{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--soft) 85%,var(--surface));color:var(--brand-text);border:1px solid color-mix(in srgb,var(--brand-2) 22%,transparent);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600}h1{font-size:clamp(30px,5.4vw,52px);line-height:1.08;margin:18px 0 16px;letter-spacing:-.03em;max-width:16em}h1 em{font-style:normal;background:linear-gradient(110deg,var(--brand),var(--brand-2) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:18px;color:var(--muted);max-width:38em;margin:0}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.chips span{border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 85%,transparent);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--muted);box-shadow:var(--shadow-sm)}.eyebrow{color:var(--brand-text);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em}h2{font-size:clamp(22px,3vw,28px);line-height:1.15;margin:6px 0 8px;letter-spacing:-.025em}h3{margin:2px 0 0;font-size:18px;letter-spacing:-.02em}.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;margin-bottom:22px;box-shadow:var(--shadow);animation:rise .55s cubic-bezier(.2,.7,.2,1) both}.form-section{counter-reset:s;overflow:hidden}.form-section:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}.form-head{margin-bottom:26px}.form-head p{margin:0;color:var(--muted);font-size:15px}.step{counter-increment:s;margin-bottom:30px}.step-title{display:flex;align-items:center;gap:12px;margin-bottom:4px;font-weight:700;font-size:16.5px;letter-spacing:-.01em}.step-title:before{content:counter(s);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;font-size:13px;font-weight:800;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-2) 18%,transparent)}label.step-title{cursor:pointer}.field-info{margin:0 0 12px 40px;font-size:13.5px;color:var(--muted)}.sub-label{display:block;margin-bottom:4px;font-size:12.5px;font-weight:500;color:var(--muted)}.hint-line{margin:8px 0 0;font-size:12.5px;color:var(--muted)}.field{display:block}.voice-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px}select,textarea,input[type=url]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--soft) 45%,var(--surface));color:var(--ink);font:inherit;font-size:14.5px;transition:border-color .18s,box-shadow .18s,background .18s}select:hover,textarea:hover,input[type=url]:hover{border-color:color-mix(in srgb,var(--brand-2) 55%,var(--line))}select:focus,textarea:focus,input[type=url]:focus{outline:none;border-color:var(--brand-2);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}textarea{resize:vertical;min-height:140px;line-height:1.55}::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}.select-wrap{position:relative;display:block}.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;text-overflow:ellipsis}.select-wrap:after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}.text-tools{display:flex;align-items:center;gap:8px;margin-top:8px}.text-tools .hint-line{margin:0}.spacer{flex:1}.sliders{display:grid;grid-template-columns:1fr;gap:14px}.sliders .field{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--soft) 45%,var(--surface))}.slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600;font-size:14px}code{padding:1px 9px;border-radius:999px;background:var(--soft);color:var(--brand-text);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}input[type=range]{width:100%;margin:0;accent-color:var(--brand);cursor:pointer}.reset{margin-top:10px}.actions{display:flex;flex-wrap:wrap;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border:1px solid transparent;border-radius:var(--radius-md);font:inherit;font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s,border-color .18s,background .18s}.btn:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0) scale(.99)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-primary{flex:1 1 150px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow-brand),inset 0 1px #ffffff38}.btn-accent{flex:1 1 190px;color:#fff;background:linear-gradient(135deg,#167a4a,#22a566);box-shadow:0 10px 24px #1987544d,inset 0 1px #ffffff38}.btn-ghost{flex:0 1 auto;color:var(--ink);background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm)}.btn-ghost:hover:not(:disabled){filter:none;border-color:var(--brand-2);background:var(--soft)}.btn-sm{padding:7px 14px;font-size:13px;border-radius:10px}.note{display:block;margin:18px 0 0;padding:12px 14px;border-radius:var(--radius-sm);background:var(--soft);border:1px dashed color-mix(in srgb,var(--brand-2) 35%,transparent);color:var(--muted);font-size:13.5px}.status{display:none;align-items:center;gap:10px;margin-top:18px;padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--soft);color:var(--ink);font-size:14px}.status.has{display:flex}.status-ok{background:var(--ok-bg);border-color:var(--ok)}.status-warn{background:var(--warn-bg);border-color:var(--warn-line)}.status-error{background:color-mix(in srgb,var(--danger) 8%,var(--surface));border-color:var(--danger);color:var(--danger)}.rec-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--danger);animation:pulse 1.2s ease-in-out infinite}.result{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:24px;padding:20px;border-radius:18px;background:linear-gradient(160deg,var(--soft),color-mix(in srgb,var(--soft) 40%,var(--surface)));border:1px solid color-mix(in srgb,var(--brand-2) 16%,var(--line))}.result audio{width:100%}.result .hint-line{margin:0}.gate{text-align:center;padding:40px 30px;border-color:var(--warn-line)}.gate-icon{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 14px;border-radius:20px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn)}.gate-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.lead-sm{max-width:34em;margin:0 auto 16px;color:var(--muted)}.tips{list-style:none;max-width:36em;margin:0 auto 16px;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left;font-size:14px;color:var(--muted)}.tips li{padding:12px 14px;border-radius:var(--radius-sm);background:var(--soft);border:1px solid var(--line)}.detected{margin:0 0 20px;font-size:13px;color:var(--muted)}.gate-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.gate-actions .btn{flex:0 1 auto}.loading{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:14.5px}.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand-2);animation:spin .8s linear infinite}.steps-list{margin:14px 0 0;padding:0;list-style:none;counter-reset:h;display:flex;flex-direction:column;gap:10px}.steps-list li{counter-increment:h;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--soft) 45%,var(--surface));font-size:14.5px}.steps-list li:before{content:counter(h);flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--soft);color:var(--brand-text);font-size:12px;font-weight:800}.help .note{margin-top:14px}.site-footer{margin-top:16px;padding:32px 0 48px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;text-align:center}.site-footer .wrap{display:flex;flex-direction:column;gap:4px}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.95) translateY(-6px)}to{opacity:1;transform:none}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}@media(max-width:720px){.card{padding:20px;border-radius:20px}.hero{padding-top:32px}.lead{font-size:16.5px}.field-info{margin-left:0}.voice-row,.sliders{grid-template-columns:1fr}}@media(max-width:520px){.actions{flex-direction:column}.actions .btn{width:100%;flex:1 1 auto}.text-tools{flex-wrap:wrap}.gate{padding:28px 18px}}.voice-pick{display:flex;align-items:stretch;gap:8px}.voice-pick .select-wrap{flex:1;min-width:0}.icon-play{flex:none;display:grid;place-items:center;width:46px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--brand-text);cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .18s,background .18s,color .18s,transform .12s}.icon-play:hover:not(:disabled){border-color:var(--brand-2);background:var(--soft)}.icon-play:active:not(:disabled){transform:scale(.95)}.icon-play:disabled{opacity:.5;cursor:not-allowed}.icon-play.on{background:var(--brand);border-color:var(--brand);color:#fff}.ico.fill{fill:currentColor}.note-warn{display:flex;align-items:flex-start;gap:10px;background:var(--warn-bg);border:1px solid var(--warn-line);border-style:solid;color:var(--ink)}.note-warn .ico{margin-top:2px;color:var(--warn)}.url-row{display:flex;gap:8px}.url-row input{flex:1;min-width:0}.actions-save{margin-top:10px}.actions-save .btn{width:100%}.article-view{margin-top:10px;height:200px;overflow-y:auto;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--soft) 45%,var(--surface));color:var(--ink);font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;cursor:default}.article-view:empty:before{content:attr(data-placeholder);color:var(--muted)}.article-view:focus-visible{outline:none;border-color:var(--brand-2)}.query-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}.query-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}.query-list code,.query-help .note code{overflow-wrap:anywhere}.query-list span{color:var(--muted);font-size:14px}.status-body{flex:1;min-width:0}.status-body small{display:block;margin-top:6px;color:var(--muted);font-size:12.5px}.progress{height:6px;margin-top:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}.progress>span{display:block;height:100%;background:var(--brand-2);border-radius:inherit;transition:width .2s ease}.spinner{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 20%,transparent);border-top-color:var(--brand-2);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}.reco{margin:18px 0 0;padding:12px 14px;max-width:62ch;border-radius:var(--radius-sm);background:var(--soft);border-left:3px solid var(--brand-2);color:var(--muted);font-size:14px;line-height:1.55}.reco strong{color:var(--ink)}
