/* TTSAI 2.0 — visual system and studio enhancements */
:root{--bg:#070915;--bg2:#0d1022;--panel:#13172c;--panel2:#1a1e38;--stroke:rgba(177,190,255,.14);--text:#f9f9ff;--muted:#b6bcda;--muted2:#8992b8;--brand:#7ff4d6;--violet:#b7a7ff;--shadow:0 24px 70px rgba(0,0,0,.28)}
body{background:#080a17;background-image:radial-gradient(ellipse 800px 500px at 85% 4%,rgba(111,94,255,.14),transparent 75%),radial-gradient(ellipse 600px 500px at 4% 18%,rgba(37,224,188,.06),transparent 77%)}
.site-header{background:rgba(10,11,26,.85);border-bottom:1px solid rgba(255,255,255,.08)}.nav-links a{color:#bec4dc}.nav-links a:hover,.nav-links a[aria-current=page]{color:#90f2dc}.brand{letter-spacing:-1.4px}.btn{transition:transform .18s,box-shadow .18s,background .18s}.btn-primary{background:linear-gradient(115deg,#7df0d6,#a5e9e6);box-shadow:0 8px 30px rgba(47,216,175,.14)}.btn-primary:hover{box-shadow:0 12px 30px rgba(93,241,214,.24);transform:translateY(-2px)}.btn-outline{border-color:rgba(183,170,246,.23);background:rgba(255,255,255,.035)}
.theme-toggle{width:40px;height:40px;border:1px solid rgba(185,199,255,.19);border-radius:13px;background:rgba(255,255,255,.04);color:#e9e5ff;font-size:18px;display:grid;place-items:center;flex-shrink:0}.theme-toggle:hover{background:rgba(255,255,255,.1)}
.hero{background:radial-gradient(ellipse at 74% 40%,rgba(98,90,208,.13),transparent 55%);padding-top:106px;padding-bottom:112px}.hero-layout{gap:70px}.hero-copy{position:relative}.hero h1{font-weight:800;line-height:1.16;letter-spacing:-3.5px;font-size:clamp(51px,5vw,76px)}.text-gradient{background:linear-gradient(95deg,#8dfbe1 5%,#99daed 48%,#c2a6ff 95%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p{color:#b9c2e0;max-width:630px;font-size:16px}.eyebrow{letter-spacing:2.2px}.small-note{font-size:11px}.hero-cta{margin-top:32px}.hero-card-wrap{transform:perspective(1200px) rotateY(-2deg)}.studio-preview{background:linear-gradient(150deg,rgba(32,36,72,.97),rgba(14,19,45,.99));border:1px solid rgba(172,188,255,.28);box-shadow:0 45px 110px rgba(0,0,0,.36),0 0 65px rgba(94,100,232,.1);border-radius:28px}.preview-input{background:rgba(5,9,29,.58);border:1px solid rgba(153,185,255,.14)}.preview-wave i{background:linear-gradient(#bca2ff,#63eac7)}.preview-top .chip{color:#91f3dc;background:#73e9c91a;border-color:#73e9c944}
.orb-one{background:#7e72ea;filter:blur(1px)}.orb-two{border-color:#7fe2da}.trust-strip{background:#0d1123;border-color:#26283f}.trust-content{align-items:center}.trust-content>p{color:#bec5e3}.trust-list{color:#bfc9e7}
.section{padding-top:102px;padding-bottom:102px}.alt-section{background:linear-gradient(180deg,rgba(28,28,58,.33),rgba(8,10,23,.1))}.feature-card,.step,.case,.content-card,.studio-panel,.mini-info,.faq-list details{background:linear-gradient(155deg,rgba(30,34,65,.72),rgba(14,18,38,.9));border-color:rgba(181,190,250,.14);box-shadow:0 15px 45px rgba(0,0,0,.06)}.feature-card:hover,.case:hover{border-color:rgba(153,238,222,.42);transform:translateY(-4px);transition:.22s}.feature-icon{background:linear-gradient(145deg,rgba(133,235,222,.2),rgba(164,135,255,.16));color:#b2f7e4}.step-index{color:#9cf3db}.page-hero{background:radial-gradient(ellipse 70% 85% at 80% 0%,rgba(108,93,255,.14),transparent 75%)}.callout{background:linear-gradient(120deg,#86f1d7,#b6b8ff)}.footer-links a:hover{color:#a8f7e9}.site-footer{background:#090c19}
.hero-note-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(138,252,218,.075);border:1px solid rgba(138,252,218,.18);border-radius:999px;font-size:11px;color:#b7f9e8;margin-top:22px}.hero-note-tag i{width:7px;height:7px;background:#8eefd3;border-radius:50%;box-shadow:0 0 12px #8eefd3}
.hero-stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:36px;padding-top:25px;border-top:1px solid rgba(194,200,250,.11)}.hero-stats>span{color:#929fc5;font-size:11px}.hero-stats strong{display:block;font-size:19px;letter-spacing:-.5px;color:#f7f8ff}.hero-stats small{font-size:10px;color:#96a4ca}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px}.feature-highlight{position:relative;border:1px solid rgba(170,178,255,.19);border-radius:23px;background:linear-gradient(145deg,rgba(94,79,152,.17),rgba(18,24,48,.9));padding:27px;min-height:200px;overflow:hidden}.feature-highlight:after{content:'';position:absolute;width:140px;height:140px;right:-55px;bottom:-65px;border-radius:100%;background:rgba(144,128,255,.11)}.feature-highlight b{font-size:19px;display:block;margin-bottom:10px}.feature-highlight p{font-size:12px;line-height:1.9;margin:0;color:#aab5d2}.feature-highlight .hi-icon{font-size:27px;margin-bottom:22px;color:#9bf3e1}
/* Advanced studio */
.studio-page{background:radial-gradient(ellipse at 75% 0%,rgba(120,104,255,.17),transparent 54%);padding-top:58px}.studio-head h1{font-weight:800;letter-spacing:-1.8px}.studio-head p{max-width:620px;color:#abb7d6}.studio-grid{grid-template-columns:minmax(0,1.65fr) minmax(325px,.8fr)}.studio-panel{background:linear-gradient(145deg,rgba(26,28,56,.98),rgba(13,17,35,.96));border:1px solid rgba(177,187,255,.19);border-radius:24px}.panel-pad{padding:30px}.textarea-wrap{background:#0b1024;border-color:#343654}.textarea-wrap:focus-within{border-color:#86e9d5;box-shadow:0 0 0 3px #6cf6d111}#tts-text{min-height:230px;font-size:14px}.text-footer{color:#94a0c2;border-top-color:#313652}.text-tool{color:#9fd9e0}.mode-switch{background:#0a0f24;border-color:#343859}.mode-switch button.active{background:linear-gradient(125deg,#33345a,#2c4f59);color:#dffdf9}.select-control{background:#0b1025;border-color:#363a5c;color:#f1f5ff}.field-label{color:#dce4f8}.side-section{border-color:rgba(177,187,255,.13)}.voice-tile{background:#0d1329;border-color:#323b57}.voice-tile.selected{background:#153b3e;border-color:#7defd6}.output-box{background:#0b1024}.voice-avatar{background:linear-gradient(135deg,#433b7c,#195566)}.mini-info{background:#11162b}.info-inline{background:rgba(151,129,255,.075)}
.studio-toolbar{display:flex;gap:7px;flex-wrap:wrap;padding:12px 0 2px}.tool-btn{border:1px solid rgba(172,190,248,.17);background:#161d35;color:#c1cdee;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:700}.tool-btn:hover{border-color:#82efdc;color:white}.tool-btn:disabled{opacity:.5;cursor:not-allowed}.metrics{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 0;color:#a6b2d3;font-size:11px}.metrics strong{color:#edfafc}.script-templates{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 5px}.script-templates button{border-radius:999px;border:1px solid #393e62;background:#191e3a;padding:9px 12px;color:#cbd4f5;font-weight:650;font-size:11px}.script-templates button:hover{background:#2b3154;border-color:#8ef4da}.advanced-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:4px}.range-control{accent-color:#8deeda;width:100%}.range-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#afbddf;margin:8px 0}.range-head b{color:#eafef7}.studio-small-hint{font-size:11px;color:#9dadcd;line-height:1.7}.list-actions{display:flex;gap:7px;margin-top:15px;flex-wrap:wrap}.draft-list{display:grid;gap:8px;max-height:240px;overflow:auto}.draft-item{background:#11182f;border:1px solid #333b58;border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px}.draft-item-main{min-width:0;flex:1}.draft-item b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.draft-item small{font-size:10px;color:#94a4cc}.draft-item button{background:#232b47;border:1px solid #42486b;border-radius:9px;color:#c9f5ea;padding:7px;font-size:11px}.draft-empty{color:#9aa6c9;font-size:12px}.utility-label{font-size:12px;color:#d8dffc;font-weight:800;display:block;margin-bottom:12px}.studio-top-banner{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px 16px;margin-bottom:20px;border:1px solid rgba(122,239,219,.18);border-radius:15px;background:linear-gradient(110deg,rgba(64,142,134,.12),rgba(128,113,237,.09));font-size:12px;color:#d5e0f7;flex-wrap:wrap}.studio-top-banner a{color:#8bf7db;text-decoration:underline}.history-list{display:grid;gap:8px;max-height:300px;overflow:auto}.history-item{border:1px solid #323c5a;background:#11172e;border-radius:11px;padding:11px;font-size:11px}.history-item b{display:block;color:#ecf7ff;margin-bottom:4px}.history-item span{color:#aab8d9}.history-item .history-action{border:0;background:none;color:#8cf0d6;font-size:11px;font-weight:700;margin:7px 0 0;padding:0}.mini-divider{height:1px;background:rgba(167,190,249,.11);margin:21px 0}.section-kicker{display:inline-flex;padding:8px 12px;border:1px solid rgba(153,239,221,.27);border-radius:999px;color:#a3f9e4;font-size:11px;letter-spacing:.6px}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.template-card{background:linear-gradient(145deg,#1e2140,#101629);border:1px solid #373b62;border-radius:22px;padding:25px}.template-card:hover{border-color:#93eedb}.template-card .category{display:block;color:#a2e5df;font-size:11px;font-weight:700}.template-card h3{font-size:18px;letter-spacing:-.4px}.template-card p{font-size:12px;line-height:1.85;color:#b0bcda;min-height:69px}.template-card a{font-size:12px;font-weight:800;color:#91f2d7}
[data-theme=light]{--bg:#f3f5ff;--bg2:#eaf0ff;--panel:#fff;--panel2:#eef1fc;--stroke:rgba(50,57,110,.13);--text:#1a2243;--muted:#556180;--muted2:#6a789e;--brand:#007c78;--violet:#6d55d2;color:#222844;background:#f4f6ff;background-image:radial-gradient(ellipse at 85% 0%,#e6e1ff,transparent 50%)}
[data-theme=light] .site-header,[data-theme=light] .site-footer{background:rgba(246,248,255,.94)}[data-theme=light] .nav-links a,[data-theme=light] .hero-copy>p,[data-theme=light] .section-heading p,[data-theme=light] .page-hero p{color:#566181}[data-theme=light] h1,[data-theme=light] h2,[data-theme=light] h3,[data-theme=light] .brand{color:#1b2545}[data-theme=light] .hero{background:radial-gradient(ellipse at 65% 30%,#e8e4ff,transparent 72%)}[data-theme=light] .hero-stats strong,[data-theme=light] .trust-content>p{color:#283352}[data-theme=light] .hero-note-tag{color:#186764;background:#d8f6ee}[data-theme=light] .trust-strip,[data-theme=light] .alt-section{background:#eaedfa}[data-theme=light] .feature-card,[data-theme=light] .case,[data-theme=light] .step,[data-theme=light] .content-card,[data-theme=light] .feature-highlight,[data-theme=light] .mini-info,[data-theme=light] .faq-list details{background:#fff}[data-theme=light] .feature-card p,[data-theme=light] .content-prose p,[data-theme=light] .content-prose li,[data-theme=light] .feature-highlight p,[data-theme=light] .case p,[data-theme=light] .step p{color:#596783}[data-theme=light] .studio-panel{background:#fff}[data-theme=light] .field-label,[data-theme=light] .panel-title,[data-theme=light] .side-section h3,[data-theme=light] .output-main,[data-theme=light] .info-inline strong{color:#253453}[data-theme=light] .studio-head p,[data-theme=light] .studio-muted,[data-theme=light] .metrics,[data-theme=light] .range-head{color:#5e6c8e}[data-theme=light] .textarea-wrap,[data-theme=light] .mode-switch,[data-theme=light] .select-control,[data-theme=light] .output-box,[data-theme=light] .voice-tile,[data-theme=light] .draft-item,[data-theme=light] .history-item{background:#f4f6fc;color:#283453;border-color:#dbe2f0}[data-theme=light] #tts-text{color:#22314d}[data-theme=light] .tool-btn,[data-theme=light] .script-templates button,[data-theme=light] .theme-toggle{background:#fff;border-color:#d2dbed;color:#27385e}[data-theme=light] .mode-switch button{color:#4e5976}[data-theme=light] .mode-switch button.active{background:#d9f5ed;color:#156562}[data-theme=light] .studio-top-banner{background:#ecf9f6;color:#435e63}[data-theme=light] .info-inline{background:#f1f3ff;color:#556482}[data-theme=light] .template-card{background:#fff;border-color:#d7dff0}[data-theme=light] .template-card h3{color:#243052}[data-theme=light] .template-card p{color:#5a6886}[data-theme=light] .nav-links.open{background:#fff}[data-theme=light] .footer-bottom{color:#687698}
@media(max-width:1020px){.hero-layout{gap:25px}.studio-grid{grid-template-columns:minmax(0,1fr) 320px}.template-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.hero{padding:62px 0 75px}.hero h1{letter-spacing:-2px}.hero-card-wrap{transform:none}.hero-stats{gap:17px;margin-top:27px}.theme-toggle{width:36px;height:36px}.studio-grid{grid-template-columns:1fr}.feature-strip{grid-template-columns:1fr}.template-grid{grid-template-columns:1fr}.studio-top-banner{font-size:11px}.studio-page{padding-top:34px}.advanced-options{grid-template-columns:1fr 1fr}.section{padding-top:72px;padding-bottom:72px}}
@media(max-width:420px){.hero-stats{gap:20px}.hero-stats>span{width:40%}.advanced-options{grid-template-columns:1fr}.tool-btn{padding:7px 8px}.studio-toolbar{gap:6px}.panel-pad{padding:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:761px){.hero h1{font-size:clamp(52px,4.05vw,61px);letter-spacing:-2.8px}}
