:root{--bg:#f7f6f0;--paper:#fffefa;--ink:#303528;--muted:#8b8e81;--accent:#c96945;--line:#e6e6dc;--soft:#efeee6;--green:#747c5a;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #dba87b;outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.site-header{max-width:1392px;margin:auto;height:105px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:23px;letter-spacing:-.5px;font-weight:700}.brand b{font-family:Georgia,serif;font-weight:400}.brand small{display:block;font-size:12px;font-weight:400;letter-spacing:2px;margin-top:4px;color:var(--muted)}.brand-mark{display:grid;place-items:center;background:var(--accent);color:white;width:44px;height:44px;border-radius:13px 13px 13px 2px;font-size:29px;font-weight:400}.site-header nav{display:flex;gap:32px;height:100%;align-items:center}.nav-item{border:0;background:none;color:var(--muted);height:100%;position:relative;font-size:15px}.nav-item.active{color:var(--ink);font-weight:600}.nav-item.active:after{position:absolute;content:'';height:3px;background:var(--accent);bottom:0;left:10px;right:10px}.nav-item span{font-size:12px;background:var(--soft);padding:3px 6px;border-radius:6px;margin-left:3px}.local-badge{font-size:13px;border:1px solid var(--line);padding:8px 12px;border-radius:20px;color:#777e66}.local-badge i,.live-dot{display:inline-block;width:6px;height:6px;background:#82936d;border-radius:50%;margin-right:5px}main{max-width:1200px;margin:auto;padding:0 40px}.hero{text-align:center;padding:52px 0 43px;position:relative}.eyebrow{font-size:12px;letter-spacing:2.6px;color:var(--accent);font-weight:600}.hero .eyebrow span{display:inline-block;background:var(--accent);width:20px;height:1px;vertical-align:middle;margin-right:9px}.hero h1{font-size:42px;letter-spacing:-1.8px;margin:18px 0 14px;font-weight:600}.hero em{font-style:normal;color:var(--accent)}.hero svg{position:absolute;width:228px;height:10px;left:calc(50% + 15px);top:127px;stroke:#d4b28e;fill:none;stroke-width:2}.hero p{color:var(--muted);font-size:15px;letter-spacing:1px;margin:20px 0 0}.workspace{display:grid;grid-template-columns: .88fr 1.12fr;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:0 12px 36px #30352805;overflow:hidden}.preview-panel{padding:23px 30px 22px;background:#eeeee5;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center}.panel-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#7f8474;width:100%;margin-bottom:20px;letter-spacing:1px}.panel-label>span:last-child{font-family:Consolas,monospace;letter-spacing:.6px}.canvas-wrap{position:relative;width:100%;max-width:365px;box-shadow:0 7px 24px #3035280a;border:1px solid #deded2;border-radius:8px;overflow:hidden;margin:auto}canvas{display:block;width:100%;height:auto}.preview-play{position:absolute;left:calc(50% - 24px);top:calc(50% - 24px);width:48px;height:48px;border:1px solid #fff8;border-radius:50%;color:white;background:#303528d9;opacity:0;transition:opacity .2s}.canvas-wrap:hover .preview-play:not(:disabled){opacity:1}.preview-caption{display:flex;justify-content:space-between;width:100%;font-size:12px;color:#919581;margin-top:21px;letter-spacing:.7px}.editor-panel{padding:26px 29px 22px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-heading h2{font-size:15px;margin:0;font-weight:600;letter-spacing:.5px}.section-heading h2>span{font-family:Georgia,serif;font-style:italic;color:#a5aa96;margin-right:10px}.engine{font-size:11px;color:#919783;background:#f0f1e9;padding:5px 8px;border-radius:4px}.textarea-box{border:1px solid #dedfd4;border-radius:8px;background:#fff;transition:border .2s}.textarea-box:focus-within{border-color:#c4a38b;box-shadow:0 0 0 3px #c9694509}textarea{display:block;resize:vertical;width:100%;min-height:116px;max-height:250px;padding:14px 15px 5px;border:0;outline:none!important;background:transparent;line-height:1.9;color:#4e5347;font-size:14px}textarea::placeholder{color:#b0b2a7}.textarea-bottom{display:flex;justify-content:space-between;align-items:center;padding:5px 13px 10px;font-size:11px;color:#a3a799}.textarea-bottom b{font-weight:400;color:#7d8371}.text-button{border:0;background:transparent;color:#979d8b;font-size:12px;padding:3px 0}.text-button:hover{color:var(--accent)}.ideas{display:flex;gap:6px;align-items:center;margin:12px 0 21px;font-size:12px;color:#959b87;flex-wrap:wrap}.ideas>span{margin-right:3px}.ideas button{border:1px solid var(--line);border-radius:5px;background:#f8f8f2;font-size:11px;padding:5px 8px;color:#7c826e}.ideas button:hover{border-color:#c7bc9c}.range-label{display:flex;justify-content:space-between;align-items:center;font-size:13px}.range-label>span{font-size:12px;color:var(--accent)}.range-label b{font-family:Georgia,serif;font-size:19px;font-weight:400;margin-right:2px}input[type=range]{appearance:none;cursor:pointer;height:3px;background:#e5e6db;accent-color:var(--accent);border:0;border-radius:2px}input[type=range]::-webkit-slider-thumb{appearance:none;height:12px;width:12px;border-radius:50%;border:2px solid white;background:var(--accent);box-shadow:0 0 0 1px #c9694555}#mixRatio{width:100%;margin:16px 0 9px}.range-hints{display:flex;justify-content:space-between;font-size:11px;color:#a5aa99;margin-bottom:15px}.button{border:1px solid var(--line);border-radius:7px;background:#f6f6ed;padding:11px 15px;font-size:13px;font-weight:500;transition:background .15s,transform .15s}.button:not(:disabled):hover{filter:brightness(.97);transform:translateY(-1px)}.mix-button{width:100%;color:white;background:var(--ink);border-color:var(--ink);position:relative;letter-spacing:.5px}.mix-button>span:first-child{margin-right:6px;font-size:15px}.button-arrow{position:absolute;right:15px;color:#c5cbb7;font-size:15px}.divider{height:1px;background:var(--line);margin:22px 0 20px}.style-row{display:flex;align-items:center;gap:15px;margin-bottom:13px}.style-row>label{font-size:12px;width:54px;flex-shrink:0;color:#8d9380}.segments{display:flex;background:#f1f2ea;border:1px solid #e9eadf;border-radius:6px;padding:3px;gap:2px;flex:1}.segments button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;padding:6px 5px;border-radius:4px;background:transparent;color:#999f8d;font-size:11px}.segments button.selected{background:#fffef8;border-color:#dedfd0;color:var(--ink);box-shadow:0 1px 3px #00000004}.ratio-icon{display:block;border:1px solid currentColor;opacity:.75;border-radius:1px}.tall{width:7px;height:11px}.portrait{width:8px;height:10px}.square{width:9px;height:9px}.theme-options{display:flex;gap:7px;flex:1}.theme-chip{display:flex;gap:5px;align-items:center;padding:5px 7px;border-radius:5px;border:1px solid transparent;background:none;font-size:11px;color:#939985}.theme-chip.selected{border-color:#dbdece;background:#f8f9f2;color:#5c654a}.theme-chip i{width:17px;height:17px;border:1px solid #dbdcd1;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff70}#fontSize{flex:1;min-width:20px}.small-value{font-size:11px;color:#959b87;min-width:30px}.voice-row{display:flex;gap:14px;margin:18px 0}.voice-row label{flex:1;font-size:11px;color:#959b87;display:flex;align-items:center;gap:8px}select{border:1px solid #e4e6d8;border-radius:5px;background:#fcfcf8;font-size:12px;color:#6d755c;padding:7px;flex:1;min-width:0}.audio-player{display:flex;align-items:center;gap:11px;background:#f3f4ed;border:1px solid #e9ebdf;border-radius:6px;padding:9px 10px}.audio-player>button{width:26px;height:26px;border:0;background:var(--ink);color:#fff;border-radius:50%;font-size:12px;padding-left:8px}.audio-player>input{flex:1;min-width:30px}.audio-player>span{color:#949b86;font-size:11px;font-family:Consolas,monospace}.action-row{display:flex;gap:9px;margin-top:14px}.action-row button{flex:1}.generate-button{background:#f0f1e7;color:#65704f;border-color:#e4e7d6}.export-button{background:var(--accent);border-color:var(--accent);color:#fff}.status-line{font-size:11px;text-align:center;margin:12px 0 0;color:#a0a591;line-height:1.7;min-height:15px}.status-line.error{color:#b24e36}.status-line.success{color:#667a4d}.progress-track{height:3px;overflow:hidden;background:#eee9df;margin-top:8px;border-radius:5px}.progress-track i{display:block;width:35%;height:100%;background:var(--accent);animation:loading 1.5s ease-in-out infinite}@keyframes loading{from{transform:translateX(-100%)}to{transform:translateX(400%)}}.mix-result{margin-top:17px;padding:12px;background:#f8f8f0;border:1px solid #e9eadf;border-radius:6px}.result-heading{display:flex;justify-content:space-between;font-size:12px;color:#7e866b}.result-heading b{font-weight:400;color:#a0a78e;margin-left:5px;font-size:11px}.mixed-text{font-size:14px;line-height:2.1;margin-top:9px;color:#60664f}.mixed-text button{border:0;background:#efedb9;color:#6b683e;border-radius:2px;padding:0 3px;font-size:inherit;line-height:1.6;margin:0 2px}.mixed-text button:hover{background:#e3df8e}.result-tip{font-size:11px;color:#a0a68f;margin:9px 0 0}.how-it-works{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:42px 27px 45px}.how-it-works>div{position:relative;padding-left:40px}.step-icon{position:absolute;left:0;top:0;color:#8b9477;border:1px solid #dfe3d2;border-radius:7px;width:28px;height:28px;display:grid;place-items:center;font-family:Georgia,serif;font-size:16px;background:#f1f3e9}.step-icon>span{font-size:11px;position:absolute;right:2px;bottom:2px;background:#f1f3e9}.how-it-works h3{font-size:13px;font-weight:500;margin:2px 0 8px}.how-it-works p{font-size:12px;line-height:1.9;color:#999f8b;margin:0}footer{border-top:1px solid var(--line);max-width:1296px;margin:auto;padding:24px 48px 30px;display:flex;justify-content:space-between;color:#a1a590;font-size:11px;letter-spacing:1px}.footer-brand{font-family:Georgia,"Microsoft YaHei",serif;color:#7e866d;font-size:15px}.collection-view{min-height:70vh}.collection-header{padding:60px 0 35px}.collection-header h1{font-size:32px;margin:20px 0}.collection-header p{font-size:14px;color:var(--muted);line-height:1.8}.collection-header button{margin-top:10px}.words-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:50px}.word-card,.history-card{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:23px}.word-card h3{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:0 0 8px}.word-card p{font-size:14px;color:var(--muted)}.word-card .card-actions{display:flex;justify-content:space-between;margin-top:18px}.word-card button{font-size:13px}.history-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding-bottom:50px}.history-card{cursor:pointer;text-align:left;line-height:1.9}.history-card:hover{border-color:#c2ba9e}.history-card small{color:var(--muted);font-size:12px}.history-card p{font-size:14px;max-height:68px;overflow:hidden}.empty{color:var(--muted);font-size:15px;padding:35px;border:1px dashed #d9dece;border-radius:12px;grid-column:1/-1;text-align:center}dialog{border:1px solid #dedfd2;border-radius:16px;padding:34px;background:var(--paper);color:var(--ink);max-width:430px;width:calc(100% - 40px);box-shadow:0 20px 100px #2225}dialog::backdrop{background:#30352860;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:15px;top:10px;font-size:25px;border:0;background:none;color:#909782}dialog h2{font-family:Georgia,serif;font-weight:400;font-size:40px;margin:25px 0 12px}.word-ipa{color:#999e8c;font-size:15px}.dialog-actions{display:flex;gap:10px;margin-top:28px}.dialog-actions button{flex:1}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:8px;background:#303528;color:#fff;font-size:14px;box-shadow:0 3px 25px #0002;z-index:100}.download-area{font-size:13px;text-align:center;margin-top:12px}.download-area a{display:inline-block;border-bottom:1px solid var(--accent);color:var(--accent);padding:3px}.download-area video{width:100%;max-height:280px;display:block;margin-top:12px;border-radius:7px;background:#f0f0e7}@media(min-width:1500px){main{max-width:1260px}.hero{padding-top:60px}.workspace{grid-template-columns:.95fr 1.05fr}.canvas-wrap{max-width:390px}}@media(max-width:900px){.site-header{padding:0 24px}.local-badge{display:none}.site-header nav{gap:20px}main{padding:0 24px}.hero h1{font-size:34px}.hero svg{top:120px;width:195px}.preview-panel{padding:20px}.editor-panel{padding:23px 20px}.workspace{grid-template-columns:.85fr 1.15fr}.theme-options{gap:1px}.theme-chip{padding:5px}.voice-row{gap:9px}.voice-row label{display:block}.voice-row select{display:block;width:100%;margin-top:7px}.how-it-works{padding:35px 0;gap:18px}.how-it-works>div{padding-left:0}.step-icon{position:relative;margin-bottom:12px}.words-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.site-header{height:85px;padding:0 18px}.brand{font-size:19px;gap:8px}.brand-mark{width:34px;height:36px;font-size:25px}.brand small{font-size:8px;letter-spacing:1px}.site-header nav{gap:12px}.nav-item{font-size:12px}.nav-item span{display:none}main{padding:0 16px}.hero{padding:35px 0 30px}.hero .eyebrow{font-size:8px;letter-spacing:2px}.hero h1{font-size:28px;letter-spacing:-1px;margin:18px 0 12px}.hero svg{width:150px;top:96px;left:calc(50% + 3px)}.hero p{font-size:12px;letter-spacing:0;line-height:1.8}.workspace{display:flex;flex-direction:column}.preview-panel{border-right:0;border-bottom:1px solid var(--line);padding:16px 24px}.panel-label{margin-bottom:14px}.canvas-wrap{max-width:260px}.preview-caption{margin-top:14px}.editor-panel{padding:23px 20px}.style-row{gap:12px}.theme-options{gap:8px}.theme-chip{padding:5px 7px}.voice-row label{display:flex}.voice-row select{margin-top:0;width:auto}.how-it-works{gap:18px;padding:30px 5px}.how-it-works h3{font-size:12px}.how-it-works p{font-size:11px}.how-it-works br{display:none}footer{padding:20px 20px 25px;font-size:8px}footer>span:last-child{display:none}.collection-header h1{font-size:26px}.words-grid,.history-grid{grid-template-columns:1fr}.toast{max-width:90%;white-space:nowrap}.preview-play:not(:disabled){opacity:.8}}
:root{--preview-top:24px}.canvas-wrap{margin:0 auto;position:sticky;top:var(--preview-top)}.preview-caption{margin-top:auto;padding-top:21px}@media(max-width:650px){.canvas-wrap{position:relative;top:auto}.preview-caption{padding-top:14px}}
.preview-play:disabled{visibility:hidden}@media(max-width:420px){.site-header{padding:0 14px;height:78px}.brand{font-size:17px;white-space:nowrap}.brand small{display:none}.site-header nav{gap:9px}.nav-item{font-size:11px;white-space:nowrap;padding:0 2px}.brand-mark{width:32px;height:34px;font-size:24px}}
.settings-link{border:1px solid #dfe3d4;border-radius:20px;padding:9px 14px;font-size:12px;color:#7c8965}.settings-link:hover{color:var(--accent);border-color:#d6b89c}.voice-service-line{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#919b81;margin:-7px 0 14px}.voice-service-line a{color:#a37453}.voice-service-line .not-ready{color:#b5754e}.voice-row label>span{white-space:nowrap}@media(max-width:650px){.site-header>.settings-link{display:none}.voice-service-line{font-size:10px}}
.mixed-text{line-height:2.3}.mixed-text button{display:inline-block;white-space:nowrap;padding:1px 5px;margin:0 4px;vertical-align:baseline}
.background-row{align-items:flex-start}.background-row>label{padding-top:8px}.background-options{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.background-chip{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid #e5e6da;border-radius:7px;background:#fafaf5;font-size:11px;color:#879078;text-align:left;min-width:0}.background-chip.selected{color:#505f3d;border-color:#9ba982;background:#f0f3e7;box-shadow:0 0 0 1px #9ba98222}.background-chip:hover{border-color:#b5bba5}.background-chip i{display:block;flex:none;width:25px;height:31px;border:1px solid #d9ddce;border-radius:3px;background-color:#fffdf4}.swatch-notebook{background-image:linear-gradient(90deg,transparent 4px,#ddb9a9 4px,#ddb9a9 5px,transparent 5px),repeating-linear-gradient(transparent 0px,transparent 6px,#cfd8cb 6px,#cfd8cb 7px)}.swatch-grid{background-image:linear-gradient(#dce2d6 1px,transparent 1px),linear-gradient(90deg,#dce2d6 1px,transparent 1px);background-size:6px 6px}.swatch-dots{background-image:radial-gradient(#aebca2 .8px,transparent .9px);background-size:6px 6px}@media(max-width:420px){.background-chip{padding:6px;gap:5px;font-size:10px}}
.billing-line{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;font-size:11px;line-height:1.8;color:#8b957c}.billing-line a{color:#a47451;text-decoration:underline;text-underline-offset:3px}