/* voice10 — night-studio design system */
:root{
  --bg:#0b0d16; --bg2:#11131f; --panel:#161826; --panel2:#1d2032;
  --ink:#eef0f7; --muted:#9aa0b8; --line:#262a3d;
  --amber:#f5b454; --amber2:#ffce7a; --violet:#7c6cff; --violet2:#a99bff;
  --good:#5bd1a0;
  --maxw:1120px; --r:16px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 80% -10%,rgba(124,108,255,.16),transparent 60%),
    radial-gradient(900px 500px at -10% 10%,rgba(245,180,84,.10),transparent 55%);}
a{color:var(--amber2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.4vw,4rem);margin:.1em 0 .25em}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:1.6em 0 .5em}
h3{font-size:1.22rem;margin:0 0 .3em}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.center{text-align:center}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 22px}
section{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--amber);color:#000;padding:8px 12px;border-radius:8px;z-index:99}

/* header */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(11,13,22,.82);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.35rem;color:var(--ink);display:inline-flex;align-items:center;gap:.45em}
.brand:hover{text-decoration:none}
.brand .ten{color:var(--amber)}
.onair{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(245,180,84,.6);
  animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,180,84,.55)}70%{box-shadow:0 0 0 9px rgba(245,180,84,0)}100%{box-shadow:0 0 0 0 rgba(245,180,84,0)}}
.mainnav{display:flex;gap:14px;margin-left:auto;font-size:.9rem}
.mainnav a{color:var(--muted);white-space:nowrap}
.mainnav a:hover{color:var(--ink);text-decoration:none}
.navtoggle{display:none;background:none;border:0;color:var(--ink);font-size:1.5rem;margin-left:auto;cursor:pointer}
.mainnav .navcta{display:none}

/* buttons */
.btn{display:inline-block;background:linear-gradient(180deg,var(--amber2),var(--amber));color:#1a1206;
  font-weight:600;padding:13px 22px;border-radius:999px;border:0;cursor:pointer;font-size:1rem;
  box-shadow:0 6px 22px rgba(245,180,84,.25);transition:transform .12s ease,box-shadow .12s}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 10px 30px rgba(245,180,84,.35)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);box-shadow:none;border:1px solid rgba(255,255,255,.24)}
.btn-ghost:hover{border-color:var(--amber2);color:var(--amber2);box-shadow:none}
.btn-sm{padding:9px 16px;font-size:.92rem}
header.site .btn,.authslot .btn{white-space:nowrap}
header .btn-sm{margin-left:4px}
.ctabtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* hero */
.hero{padding:72px 22px 30px;text-align:center}
.hero-inner{max-width:820px;margin:0 auto}
.kicker{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--violet2);font-weight:600;margin:0 0 .5em}
.lede{font-size:1.2rem;color:#cfd3e6;max-width:660px;margin:.2em auto 1.3em}
.trust{font-size:.85rem;color:var(--muted);margin-top:18px}
.logos{text-align:center;color:var(--muted);font-size:.9rem;padding:6px 22px 0}
/* home hero: value prop + a real sample side-by-side (demo above the fold) */
.hero-home{padding:52px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center}
.hero-copy{max-width:600px}
.hero-copy .kicker{margin-bottom:.6em}
.hero-copy h1{margin:.05em 0 .3em}
.hero-copy .lede{margin:.2em 0 1.2em;max-width:560px}
.hero-copy .ctabtns{margin-top:4px}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;font-size:.85rem;color:var(--muted)}
.hero-proof b{color:var(--ink);font-weight:600}
.hero-demo{margin:0}
.hero-demo .ticks{margin-top:12px}
.hero-demo .cap{margin:12px 2px 0;font-size:.85rem;color:var(--muted);line-height:1.5}
.hero-demo .xscript{margin-top:8px}
.hero-demo .xscript summary{cursor:pointer;color:var(--amber2)}
.hero-demo .xscript p{margin:.6em 0 0;color:#cfd3e6}

/* feature grid */
.features{padding:30px 22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--r);padding:24px}
.card .ico{font-size:1.6rem;margin-bottom:8px}
.card h3{color:var(--ink)}
.card p{color:var(--muted);margin:0;font-size:.98rem}

/* engine demo */
.demo{padding:34px 22px}
.demo-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;
  background:linear-gradient(120deg,rgba(124,108,255,.12),rgba(245,180,84,.07));
  border:1px solid var(--line);border-radius:24px;padding:32px}
.ticks{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.ticks li{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.85rem;color:#cfd3e6}
.ticks li::before{content:"✓ ";color:var(--good)}
.player{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px}
.wave{height:54px;border-radius:10px;margin-bottom:12px;
  background:repeating-linear-gradient(90deg,var(--violet) 0 3px,transparent 3px 7px);
  -webkit-mask:linear-gradient(90deg,#000,#000);opacity:.5;
  background-size:100% 100%;
  background-image:repeating-linear-gradient(90deg,
    rgba(124,108,255,.9) 0 2px,transparent 2px 5px);}
.player audio{width:100%;margin-top:4px}
.player video{width:100%;display:block;border-radius:12px;background:#000;aspect-ratio:16/9}
.bookplayer{margin:18px 0}
.rendering{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;margin:6px 0 12px}
.rendering .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);animation:pulse 2s infinite}

/* steps */
.steps{padding:30px 22px}
.stepl{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.stepl li{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.stepl .n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--violet);color:#fff;font-weight:700;font-family:var(--serif)}
.stepl h3{color:var(--ink)}
.stepl p{margin:0;color:var(--muted);font-size:.95rem}

/* prose */
.prose,.article{max-width:780px;margin:10px auto;padding:0 22px}
.prose h2,.article h2{color:var(--ink)}
.prose a,.article a{color:var(--amber2);text-decoration:underline;text-underline-offset:2px}
.linklist{padding-left:1.1em}
.linklist li{margin:.3em 0}
.excerpt{border-left:3px solid var(--amber);background:var(--panel);margin:1em 0;padding:14px 18px;
  border-radius:0 12px 12px 0;font-style:italic;color:#d6d9ea}

/* faq */
.faq{max-width:780px;margin:24px auto;padding:0 22px}
.faq details{border:1px solid var(--line);border-radius:12px;padding:4px 16px;margin:10px 0;background:var(--panel)}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none;font-family:var(--serif);font-size:1.08rem}
.faq summary::after{content:"+";float:right;color:var(--amber)}
.faq details[open] summary::after{content:"–"}
.faq details>div{color:var(--muted);padding-bottom:12px}
.faq a{color:var(--amber2);text-decoration:underline}

/* cta */
.cta{padding:18px 22px 56px}
.cta-inner{background:linear-gradient(120deg,var(--violet),#5b4fd0);border-radius:24px;padding:46px 28px;text-align:center}
.cta-inner h2{margin-top:0;color:#fff}
.cta-inner p{color:#e7e3ff;max-width:560px;margin:0 auto 18px}
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}

/* crumbs */
.crumbs{font-size:.85rem;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted)}
.crumbs span{color:var(--ink)}

/* pricing */
.pricing{padding:20px 22px 10px}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.price{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;position:relative}
.price.feat{border-color:var(--amber);box-shadow:0 12px 40px rgba(245,180,84,.12)}
.price .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--amber);color:#1a1206;
  font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.price h3{color:var(--ink)}
.price .amt{font-family:var(--serif);font-size:2rem;font-weight:700;margin:.1em 0 .4em}
.price .amt span{display:block;font-size:.8rem;color:var(--muted);font-weight:400;font-family:var(--sans)}
.price ul{list-style:none;padding:0;margin:0 0 18px;font-size:.92rem;color:var(--muted)}
.price li{padding:6px 0;border-bottom:1px solid var(--line)}
.price li::before{content:"✓ ";color:var(--good)}
.price .btn{width:100%;text-align:center}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin:14px 0;font-size:.96rem}
.cmp th,.cmp td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{font-family:var(--serif);font-size:1.05rem}
.cmp th[scope]{color:var(--muted);font-weight:600}
.cmp .us{color:var(--ink)}
.cmp thead .us,.cmp td.us{background:rgba(245,180,84,.08);border-left:2px solid var(--amber)}
.cmp tbody th{font-weight:600;color:#cfd3e6}

/* library */
.library,.postlist,.related{padding:18px 22px}
.bookgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bookcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:block;color:var(--ink)}
.bookcard:hover{text-decoration:none;border-color:var(--violet2);transform:translateY(-2px);transition:.15s}
.cover{aspect-ratio:3/4;display:grid;place-items:center;padding:16px;text-align:center;position:relative;
  background:linear-gradient(150deg,var(--violet),#4a3fb0);overflow:hidden}
.cover::before{content:attr(data-letter);position:absolute;font-family:var(--serif);font-weight:700;
  font-size:9rem;opacity:.12;right:-10px;bottom:-30px;color:#fff}
.cover span{font-family:var(--serif);font-weight:600;color:#fff;font-size:1.05rem;z-index:1;line-height:1.2}
.cover.big{aspect-ratio:auto;min-height:320px;width:240px;border-radius:14px}
.bmeta{padding:14px}
.bmeta h3{font-size:1.02rem;color:var(--ink)}
.bmeta p{margin:0 0 8px;color:var(--muted);font-size:.85rem}
.tag{display:inline-block;font-size:.72rem;color:var(--amber2);border:1px solid var(--line);border-radius:999px;padding:3px 9px}

/* book hero */
.bookhero{padding:20px 22px}
.bookhero-in{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:start}
.byline{color:var(--muted);margin-top:-.4em}
.stars{color:var(--amber);letter-spacing:2px}

/* posts */
.post{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;color:var(--ink)}
.post:hover{text-decoration:none;border-color:var(--violet2)}
.post h3{color:var(--ink)}
.post p{color:var(--muted);font-size:.95rem}
.post span{color:var(--amber2);font-size:.9rem}
.article h1{margin-bottom:.4em}
.article{font-size:1.06rem}
.article h2{margin-top:1.4em}

/* free tool */
.tool{padding:10px 22px 20px;max-width:780px;margin:0 auto}
.tool-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px}
.genform label{display:block;margin:14px 0 4px;font-weight:600;font-size:.95rem}
.genform textarea,.genform select,.genform input[type=file]{width:100%;background:var(--bg2);border:1px solid var(--line);
  color:var(--ink);border-radius:10px;padding:12px;font-family:inherit;font-size:1rem}
.genform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* custom file picker — replaces the browser-localized native button ("选择文件"/"Choose File") with our own English label */
.filepick{display:flex;align-items:center;gap:10px;margin-top:4px;cursor:pointer;max-width:100%}
.genform .filepick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;padding:0;margin:0;border:0;overflow:hidden}
.filebtn{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 14px;font-size:.92rem;color:var(--ink);font-weight:600;white-space:nowrap}
.filepick:hover .filebtn{border-color:var(--violet2)}
.filename{color:var(--muted);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.genform .check{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--muted)}
.genform .check input{width:auto}
.genform .btn{margin-top:16px}
.genstatus{margin-top:16px;padding:14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);color:#cfd3e6}

/* admin dashboard */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:14px 0}
.stat{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:16px}
.stat-l{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat-b{font-family:var(--serif);font-size:1.8rem;font-weight:700;margin:.1em 0;color:var(--amber2)}
.stat-b .stat-u{font-family:var(--sans);font-size:.9rem;color:var(--muted);font-weight:400}
.stat-s{margin-top:2px}
b.ok{color:var(--good)} b.err{color:#e88}
.admtabs{display:flex;gap:8px;margin:16px 0 10px}
.atab{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 16px;font-size:.9rem;cursor:pointer}
.atab.on{background:var(--amber);color:#1a1206;border-color:var(--amber);font-weight:600}
.admt{width:100%;border-collapse:collapse;font-size:.9rem}
.admt th{text-align:left;color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line)}
.admt td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.admt .err{color:#e88}
#admin-tab{overflow-x:auto}

/* footer */
footer.site{border-top:1px solid var(--line);margin-top:30px;background:var(--bg2)}
footer.site .wrap{padding-top:40px;padding-bottom:26px}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-bottom:28px}
.fcols h4{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 12px}
.fcols ul{list-style:none;padding:0;margin:0}
.fcols li{margin:7px 0}
.fcols a{color:#c3c8de;font-size:.92rem}
.fbottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:22px;flex-wrap:wrap}
.fbottom p{margin:.3em 0 0;color:var(--muted);font-size:.88rem;max-width:420px}

/* auth + account */
.authslot{display:inline-flex;align-items:center;gap:6px}
.authslot .btn,.authslot .btn-sm{display:inline-flex !important}
.account{display:grid;gap:16px;margin:18px 0}
.acct-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.acct-card h2{margin:0 0 6px;font-size:1.2rem}
.plan-name{font-family:var(--serif);font-size:1.8rem;font-weight:700;margin:.1em 0 .2em;color:var(--amber2)}
.ppwrap{min-height:46px;display:flex;flex-direction:column;gap:8px}
.ppwrap .btn{width:100%;text-align:center}
.cl-userButtonBox,.cl-userButtonTrigger{vertical-align:middle}

/* generation jobs + progress */
.small{font-size:.85rem}
.genform input[type=text]{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:12px;font-family:inherit;font-size:1rem}
.jobcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;margin:14px 0}
.jobhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.jobstate{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.jobstate.s-running{color:#1a1206;background:var(--amber)}
.jobstate.s-completed{color:#0c1a12;background:var(--good)}
.jobstate.s-failed{color:#fff;background:#c0504e}
.jobstate.s-queued{color:var(--muted)}
.pbar{height:12px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.pfill{height:100%;background:linear-gradient(90deg,var(--violet),var(--amber));transition:width .6s ease;border-radius:999px}
.pmsg{margin:.5em 0 .2em;font-weight:600}
.pmsg.err{color:#e88}
.pmsg.ok{color:var(--good)}
.buyrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0}
.buyrow .ppwrap{flex:1 1 220px;min-width:200px}
.ply{margin:12px 0}
.ply audio,.ply video{width:100%;margin-top:4px;display:block;border-radius:10px}
.ply .dl{display:inline-block;margin-top:6px;font-size:.82rem;font-weight:600;color:var(--amber2);border:1px solid var(--amber);border-radius:999px;padding:2px 11px;opacity:.9}
.ply .dl:hover{color:#1a1206;background:var(--amber);border-color:var(--amber);opacity:1;text-decoration:none}
/* clear high-contrast button on dark cards — amber text on dark + amber border (download, Upgrade, Continue) */
.btn-dl,.btn-clear{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);color:var(--amber2);
  border:1px solid var(--amber);font-weight:700;padding:11px 20px;border-radius:999px;font-size:.95rem;cursor:pointer;
  box-shadow:0 4px 18px rgba(245,180,84,.14);transition:background .12s,color .12s}
.btn-dl:hover,.btn-clear:hover{text-decoration:none;background:linear-gradient(180deg,var(--amber2),var(--amber));color:#1a1206;border-color:var(--amber)}

/* responsive */
/* collapse the top nav to a hamburger before the full bar would wrap to two lines (~1090px) */
@media(max-width:1100px){
  .mainnav,header.site .wrap > .btn-sm{display:none}
  .navtoggle{display:block}
  body.navopen .mainnav{display:flex;position:fixed;inset:64px 0 auto 0;flex-direction:column;
    background:var(--bg2);padding:16px 22px;border-bottom:1px solid var(--line);gap:6px}
  body.navopen .mainnav a{padding:8px 0;font-size:1rem}
  body.navopen .mainnav .navcta{display:inline-block;text-align:center;padding:11px 16px;margin-top:8px;color:#1a1206}
  body.navopen .mainnav .navcta:hover{color:#1a1206}
}
@media(max-width:880px){
  .grid,.pgrid,.bookgrid{grid-template-columns:repeat(2,1fr)}
  .stepl{grid-template-columns:1fr}
  .demo-inner,.bookhero-in{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:30px;text-align:center}
  .hero-copy{max-width:none;margin:0 auto}
  .hero-copy .lede{margin-left:auto;margin-right:auto}
  .hero-copy .ctabtns,.hero-proof{justify-content:center}
  .hero-demo{text-align:left}
  .fcols{grid-template-columns:repeat(2,1fr)}
  .cover.big{width:100%;max-width:240px}
}
@media(max-width:520px){
  .grid,.pgrid{grid-template-columns:1fr}
  .bookgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .bmeta{padding:11px}
  .bmeta h3{font-size:.95rem}
  .genform .row{grid-template-columns:1fr}
}