:root{color-scheme:light dark;--bg:#f3f7f5;--surface:#fff;--text:#253d35;--muted:#526a60;--border:#b8c9c0;--soft:#eaf3ed;--brand:#28684d;--button-text:#fff;--focus:#b37310;--warning:#78500d}*{box-sizing:border-box}body{margin:0;padding:32px 16px;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;line-height:1.6}main{max-width:640px;margin:auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:30px}.brand{font-size:14px;font-weight:700;color:var(--muted)}h1{font-size:clamp(26px,5vw,34px);line-height:1.25;margin:10px 0}header p{margin:0 0 24px;color:var(--muted)}label,legend{font-weight:650}textarea{width:100%;min-height:150px;display:block;margin-top:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:14px;font:inherit;font-size:18px;resize:vertical}.muted,#count{font-size:14px;color:var(--muted)}#count{text-align:right;margin-top:4px}.examples{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px}button{font:inherit;cursor:pointer;min-height:48px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--soft);color:var(--text);font-weight:600;overflow-wrap:anywhere}.examples button{font-size:14px}button:hover:not(:disabled){filter:brightness(.94)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}fieldset{border:0;padding:0;margin:0 0 16px}.speeds,.actions{display:flex;gap:10px}.speeds label{flex:1;border:1px solid var(--border);border-radius:10px;padding:12px;min-height:48px}.speeds label:has(input:checked){background:var(--soft);border-color:var(--brand)}input{accent-color:var(--brand)}.actions button{flex:1}#listen{background:var(--brand);color:var(--button-text);border-color:var(--brand)}#status{min-height:48px;font-size:15px;margin:16px 0 20px}.usage{border-top:1px solid var(--border);padding-top:16px}.usage p{margin:0 0 10px}#quota{font-size:16px;font-weight:650}#quota-warning{color:var(--warning);white-space:pre-line}details{font-size:14px;color:var(--muted)}summary{cursor:pointer;min-height:44px;display:flex;align-items:center}footer{text-align:center;font-size:13px;color:var(--muted);padding-top:24px}.test-note{padding:10px 12px;background:var(--soft);font-size:13px;border-radius:10px} [hidden]{display:none!important}@media(max-width:420px){body{padding:16px 12px}main{padding:20px 16px}.examples{gap:6px}.examples button{padding:8px 10px}}@media(prefers-color-scheme:dark){:root{--bg:#192725;--surface:#243630;--text:#e4ece7;--muted:#b8c9c0;--border:#59766a;--soft:#314b3e;--brand:#9dd8b5;--button-text:#163d2a;--focus:#edc576;--warning:#efcf93}}
:root{color-scheme:light}
.input-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.brand{display:inline-flex;align-items:center;gap:7px}
.brand img{display:block;flex:none;width:29px;height:27px;object-fit:contain;clip-path:circle(43% at 50% 50%)}
#clear-text{flex:none;min-height:44px;min-width:44px;padding:6px 10px;font-size:13px;font-weight:550;background:transparent;color:var(--muted)}
@media(prefers-color-scheme:dark){:root{color-scheme:dark}}
#text::placeholder{color:var(--muted);opacity:.8}
.special-characters{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.special-characters button{min-width:44px;min-height:44px;padding:6px 10px;background:transparent;color:var(--muted);font-size:17px;font-weight:500;line-height:1.3}.special-characters button:hover:not(:disabled){background:var(--soft)}
.input-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:6px;color:var(--muted);font-size:13px}.input-meta p{flex:1 1 230px;margin:0}.input-meta #count{flex:none;margin:0 0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.speeds{gap:6px}.speeds label{display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 6px;white-space:nowrap;font-size:14px}.speeds input{margin:0;flex:none}
.ad-note{margin-top:20px;color:var(--muted);font-size:13px}.ad-note h2{font-size:14px;font-weight:600;margin:0 0 6px}.ad-note p{margin:0 0 8px}
.quota-help summary{gap:10px;min-height:48px;padding:8px 10px;border-radius:8px;color:var(--brand);font-size:15px;font-weight:650;list-style:none}
.quota-help summary::-webkit-details-marker{display:none}
.quota-help summary:hover,.quota-help summary:active{background:var(--soft)}
.quota-help summary:active{box-shadow:inset 0 0 0 1px var(--border)}
.quota-help-arrow{width:8px;height:8px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.quota-help[open] .quota-help-arrow{transform:rotate(45deg)}
.quota-help-content{margin-top:6px;padding:16px;background:var(--soft);color:var(--text);border:1px solid var(--border);border-radius:12px;overflow-wrap:anywhere}
.usage .quota-help-content p{margin:0 0 12px}
.usage .quota-help-content p:last-child{margin-bottom:0}
.examples{align-items:center;gap:6px}.examples-label{font-size:13px;color:var(--muted)}.examples button{min-height:44px;padding:6px 10px;border-radius:999px;background:transparent;color:var(--muted);font-size:13px;font-weight:500}.examples button:hover:not(:disabled){background:var(--soft)}