*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f4f0; --card:#ffffff; --ink:#191817; --muted:#6f6d67; --faint:#9a978f;
  --line:#e7e4dd; --line2:#dcd8cf; --dark:#1a1917; --accent:#2f6df6; --accent-soft:#eaf1ff;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px -12px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark){
  :root{--bg:#17181a;--card:#202225;--ink:#eceae6;--muted:#a2a09b;--faint:#77756f;
    --line:#2f3236;--line2:#3a3d42;--dark:#eceae6;--accent:#6ea0ff;--accent-soft:#20293a;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px -14px rgba(0,0,0,.6);}
}
body{background:var(--bg);color:var(--ink);
  font:15.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:70px;-webkit-font-smoothing:antialiased}
header{max-width:660px;margin:0 auto;padding:40px 20px 6px}
.brand{font-size:26px;font-weight:750;letter-spacing:-.02em}
.tag{color:var(--muted);margin-top:6px;font-size:15px}
main{max-width:660px;margin:0 auto;padding:14px 20px;display:flex;flex-direction:column;gap:18px}

.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.num{flex:0 0 24px;height:24px;border-radius:50%;background:var(--dark);color:var(--card);
  font-size:13px;font-weight:700;display:grid;place-items:center}
.step-head h2{font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.step-head .side{margin-left:auto;color:var(--faint);font-size:12.5px}

.genbar{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:12px}
@media(max-width:560px){.genbar{grid-template-columns:1fr}}

select,input[type=text],input:not([type]),textarea{
  background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  border-radius:10px;padding:11px 12px;font:inherit;width:100%;outline:none;transition:border-color .12s}
select{cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236f6d67' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
:focus{border-color:var(--accent)}
textarea{resize:vertical;line-height:1.55;min-height:96px}

.hint{color:var(--muted);font-size:13px;margin-top:9px}
.hint code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;
  font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.preview{margin-top:12px;display:flex;flex-wrap:wrap;gap:3px 9px;font-weight:750;font-size:17px;
  line-height:1.6;letter-spacing:-.01em}
.preview:empty{display:none}

.btn{border:0;border-radius:10px;padding:11px 16px;font:inherit;font-weight:650;cursor:pointer;
  transition:.12s;white-space:nowrap}
.btn.dark{background:var(--dark);color:var(--card)}
.btn.dark:hover{opacity:.88}
.btn.go{background:var(--dark);color:var(--card);font-size:16px;padding:14px 22px;border-radius:12px;width:100%}
.btn.go:hover{opacity:.9}
.btn:disabled{opacity:.5;cursor:default}

.voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px;
  max-height:300px;overflow:auto;margin:-4px -4px 0;padding:4px}
.v{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line2);
  border-radius:11px;padding:9px 11px;cursor:pointer;transition:.1s;position:relative}
.v:hover{border-color:var(--faint)}
.v.on{border-color:var(--accent);background:var(--accent-soft)}
.v .play{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--line2);background:var(--card);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.v .play svg{width:11px;height:11px}
.v.on .play{background:var(--accent);border-color:var(--accent);color:#fff}
.v.load .play{border-color:var(--accent)}
.v.load .play svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.v .vn{font-weight:650;font-size:13.5px;line-height:1.2}
.v .vt{font-size:11px;color:var(--muted);margin-top:1px}
.v .star{position:absolute;top:-6px;right:-4px;background:var(--dark);color:var(--card);font-size:9px;
  font-weight:700;padding:2px 6px;border-radius:20px;letter-spacing:.03em}

.looks{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:12px}
@media(max-width:560px){.looks{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:6px}
.fld>span{font-size:12.5px;color:var(--muted);font-weight:600}
.bgrow{display:flex;align-items:center;gap:6px}
input[type=color]{width:38px;height:38px;padding:2px;border-radius:9px;border:1px solid var(--line2);background:var(--card);cursor:pointer}
.sw{width:22px;height:22px;border-radius:6px;border:1px solid var(--line2);cursor:pointer;padding:0}
.sw:hover{transform:scale(1.12)}

.makebar{position:sticky;bottom:14px;z-index:5}
.prog{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;box-shadow:var(--shadow)}
.prog .bar{height:7px;background:var(--bg);border-radius:5px;overflow:hidden}
.prog .bar i{display:block;height:100%;width:3%;background:var(--dark);border-radius:5px;transition:width .4s}
.pmsg{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

.result{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
.result video{width:100%;max-height:70vh;border-radius:10px;background:#000;display:block}
.rrow{display:flex;align-items:center;gap:14px;margin-top:12px}
.meta{color:var(--muted);font-size:13px}
.err{background:#fff1f0;border:1px solid #ffd0cb;color:#b42318;border-radius:12px;padding:12px 14px;
  font-size:13.5px;white-space:pre-wrap}
@media (prefers-color-scheme: dark){.err{background:#2a1614;border-color:#5a2a24;color:#ff9d92}}
.hidden{display:none}