:root{--bg: #0d1117;--surface: #161b22;--surface2: #21262d;--border: #30363d;--text: #e6edf3;--text-muted: #8b949e;--accent: #6c63ff;--accent-hover: #8b83ff;--green: #3fb950;--red: #f85149;--yellow: #d29922;--orange: #f0883e;--blue: #58a6ff;--purple: #d2a8ff;--pink: #db61a2;--cyan: #39d0d8}[data-theme=light]{--bg: #ffffff;--surface: #f6f8fa;--surface2: #eaeef2;--border: #d0d7de;--text: #1f2328;--text-muted: #656d76;--green: #1a7f37;--red: #cf222e;--yellow: #9a6700;--orange: #bc4c00;--blue: #0969da;--purple: #8250df;--pink: #bf3989;--cyan: #0891b2}*{box-sizing:border-box;margin:0;padding:0}.app{background:var(--bg);color:var(--text);font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;height:100vh;display:flex;flex-direction:column;overflow:hidden}.toolbar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex-shrink:0}.toolbar-group{display:flex;gap:4px;align-items:center;padding-right:12px;border-right:1px solid var(--border)}.toolbar-group:last-child{border-right:none}.toolbar-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-right:4px;white-space:nowrap}.toolbar-actions{margin-left:auto;border-right:none;padding-right:0}.btn{background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;padding:5px 10px;cursor:pointer;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:5px}.btn:hover{background:var(--border);border-color:var(--text-muted)}.btn:active{transform:scale(.97)}.btn-theme{font-size:16px;padding:5px 8px;min-width:38px;justify-content:center}.btn-pause{color:var(--yellow)}.btn-emphasis{color:var(--orange)}.btn-speed{color:var(--blue)}.btn-pitch{color:var(--cyan)}.btn-whisper{color:var(--purple)}.btn-stop{color:var(--red)}.btn-phoneme{color:var(--pink)}.btn-custom{color:var(--green)}.main{display:flex;flex:1;overflow:hidden}.editor-panel{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--border);min-width:0}.panel-header{background:var(--surface);border-bottom:1px solid var(--border);padding:8px 16px;font-size:12px;color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.editor{flex:1;padding:24px;overflow-y:auto;font-size:17px;line-height:1.8;outline:none;white-space:pre-wrap;word-break:break-word;color:var(--text);caret-color:var(--accent)}.editor:empty:before{content:"Paste or type your narrative here...\a\aThen select text and click a directive button above to wrap it in SSML.";color:var(--text-muted);pointer-events:none;white-space:pre-wrap}.ssml-break{background:#d2992226;border-bottom:2px solid var(--yellow)}.ssml-emphasis{background:#f0883e26;border-bottom:2px solid var(--orange)}.ssml-prosody{background:#58a6ff26;border-bottom:2px solid var(--blue)}.ssml-whisper{background:#d2a8ff26;border-bottom:2px solid var(--purple)}.ssml-phoneme{background:#db61a226;border-bottom:2px solid var(--pink)}.ssml-stop{background:#f8514926;border-bottom:2px solid var(--red)}[data-theme=light] .ssml-break{background:#9a67001a}[data-theme=light] .ssml-emphasis{background:#bc4c001a}[data-theme=light] .ssml-prosody{background:#0969da1a}[data-theme=light] .ssml-whisper{background:#8250df1a}[data-theme=light] .ssml-phoneme{background:#bf39891a}[data-theme=light] .ssml-stop{background:#cf222e1a}.output-panel{width:420px;flex-shrink:0;display:flex;flex-direction:column;background:var(--surface)}.header-title{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.output{flex:1;overflow-y:auto;padding:16px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:12.5px;line-height:1.7;color:var(--green);white-space:pre-wrap;word-break:break-word;outline:none}.phoneme-panel{position:fixed;top:60px;right:16px;width:360px;max-height:calc(100vh - 80px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 48px #0000004d;z-index:100;display:flex;flex-direction:column;overflow:hidden;transform:translate(120%);transition:transform .2s ease}[data-theme=light] .phoneme-panel{box-shadow:0 8px 32px #00000026}.phoneme-panel.visible{transform:translate(0)}.phoneme-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.phoneme-header h3{font-size:14px;color:var(--text)}.phoneme-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px;border-radius:4px}.phoneme-close:hover{color:var(--text);background:var(--surface2)}.phoneme-body{overflow-y:auto;padding:14px 16px;flex:1}.phoneme-body h4{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px}.phoneme-body h4:first-child{margin-top:0}.phoneme-example{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}.phoneme-example:last-child{border-bottom:none}.phoneme-example .sym{color:var(--pink);font-family:monospace;width:40px;flex-shrink:0}.phoneme-example .desc{color:var(--text-muted);flex:1}.phoneme-example .eg{color:var(--text);font-style:italic}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:200;display:flex;align-items:center;justify-content:center}.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:360px;box-shadow:0 24px 64px #0006}.modal h3{font-size:16px;margin-bottom:16px;color:var(--text)}.modal-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.modal-row label{font-size:12px;color:var(--text-muted)}.modal-row input[type=range]{width:100%;accent-color:var(--accent)}.modal-row .range-val{font-size:20px;font-weight:600;color:var(--accent);text-align:center}.modal-row input[type=text]{background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:14px;padding:8px 12px;width:100%;font-family:monospace}.modal-row input[type=text]:focus{outline:none;border-color:var(--accent)}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.btn-primary{background:var(--accent);border:none;border-radius:6px;color:#fff;font-size:13px;padding:8px 18px;cursor:pointer}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-size:13px;padding:8px 14px;cursor:pointer}.btn-ghost:hover{border-color:var(--text-muted);color:var(--text)}.selection-hint{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--accent);color:#fff;padding:8px 18px;border-radius:20px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:50}.selection-hint.visible{opacity:1}.statusbar{background:var(--surface);border-top:1px solid var(--border);padding:5px 16px;font-size:11px;color:var(--text-muted);display:flex;gap:16px;flex-shrink:0}.statusbar span{display:flex;gap:4px;align-items:center}.statusbar strong{color:var(--text)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media(max-width:768px){.output-panel{display:none}.main{flex-direction:column}.editor-panel{border-right:none;border-bottom:1px solid var(--border)}}