@font-face{font-family:Yomogi;src:url('./fonts/yomogi.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}*{box-sizing:border-box}body{margin:0;background:#fffefb;color:#292824;font-family:Yomogi,"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-size:17px;-webkit-font-smoothing:antialiased}main{width:min(100% - 44px,590px);margin:0 auto;padding:62px 0 36px}header{text-align:center}h1{font-size:58px;font-weight:400;line-height:1.2;letter-spacing:.1em;margin:0 0 25px;padding-left:.1em}.description{font-size:17px;line-height:2;margin:0 auto;max-width:540px;text-wrap:pretty}form{margin-top:35px}.field{display:flex;flex-direction:column;gap:8px;font-size:15px}textarea,input,select,button{font:inherit;color:inherit}textarea,input,select{width:100%;background:transparent;border:1.5px solid #a5a397;border-radius:5px;padding:11px 12px}textarea{min-height:150px;resize:vertical;line-height:1.9;font-size:17px}input,select{height:47px;min-width:0}select{cursor:pointer;padding-right:28px}.settings{display:grid;grid-template-columns:1fr 1.5fr;gap:20px;margin-top:19px;align-items:start}.settings:has(#key-field[hidden]){grid-template-columns:1fr}button{cursor:pointer;background:transparent;border:1.5px solid #615f55;border-radius:6px;font-size:17px;transition:background .15s}button:hover:not(:disabled){background:#eeede5}button:disabled{opacity:.35;cursor:default}.convert{display:block;min-width:145px;padding:9px 25px;margin:26px auto 0;background:#eeede5}.convert:hover:not(:disabled){background:#e3e1d7}.privacy{font-size:12px;text-align:center;line-height:1.8;margin:17px 0 0;color:#716e63}.result{display:block;width:100%;margin-top:25px;min-height:130px;max-height:250px;background:#f5f4ed;border-color:#cbc8b9;font-size:15px}.audio{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;margin-top:37px}.audio p{font-size:16px;line-height:1.9;margin:0}#play-audio{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 24px;min-width:108px}#play-audio svg{width:15px;height:15px;fill:currentColor}#play-audio[aria-pressed=true]{background:#e9e8dd}.speech{position:relative;min-width:130px;border:1.5px solid #615f55;border-radius:48% 45% 47% 43%;padding:15px 27px;margin-top:8px;text-align:center;font-size:30px;background:#fffefb;line-height:1.4}.speech:before{content:"";position:absolute;top:-8px;left:calc(50% - 6px);width:12px;height:12px;border-left:1.5px solid #615f55;border-top:1.5px solid #615f55;background:#fffefb;transform:rotate(45deg)}.api-link{display:block;width:fit-content;max-width:100%;margin:46px auto 0;color:#555247;font-size:14px;line-height:1.9;text-underline-offset:6px;text-decoration-thickness:1px;text-align:center}.api-link:hover{color:#111}.error{font-size:13px;color:#a13629;line-height:1.8;margin:15px 0 0;text-align:center}footer{font-size:11px;line-height:1.9;color:#858174;text-align:center;margin-top:45px}:focus-visible{outline:2px solid #77725c;outline-offset:4px}[hidden]{display:none!important}@media(max-width:480px){main{padding-top:42px;width:calc(100% - 38px)}h1{font-size:49px;margin-bottom:20px}.description{font-size:16px;line-height:2}.settings{gap:14px;grid-template-columns:1fr 1.3fr}form{margin-top:28px}.privacy{font-size:11px}.api-link{font-size:13px;margin-top:36px}.audio{margin-top:31px}}@media(prefers-reduced-motion:reduce){button{transition:none}}

.speaker{display:flex;align-items:center;justify-content:center;gap:20px;min-height:130px}.character{display:block;width:145px;height:auto;flex-shrink:0}.speech-slot{display:grid;place-items:center;width:145px;min-height:90px}.speaker .speech{margin:0;min-width:120px;padding:14px 20px}.speaker .speech:before{top:calc(50% - 6px);left:-8px;transform:rotate(-45deg)}@media(max-width:480px){.speaker{gap:15px;min-height:110px}.character{width:125px}.speech-slot{width:130px}.speaker .speech{font-size:27px}}

.speaker{width:100%;align-items:flex-start;gap:16px}.character{width:125px}.speech-slot{display:block;flex:1;min-width:0;width:auto;min-height:110px}.speaker .speech{width:100%;min-width:0;border-radius:18px;padding:14px 16px;font-size:20px;line-height:1.8}.speaker .speech:before{top:29px}#spoken-word{display:block;max-height:220px;overflow-y:auto;white-space:pre-wrap;word-break:keep-all;text-align:left;scrollbar-width:thin}@media(max-width:480px){.speaker{gap:10px}.character{width:80px}.speaker .speech{padding:12px;font-size:16px}}

.result-actions{display:flex;justify-content:flex-end;margin-top:9px}#copy-result{padding:6px 16px;font-size:14px}