@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#263b35;background:#f6f8f6;font-synthesis:none;--ink:#263b35;--green:#2c5147;--line:#dfe6e1;--muted:#75827b}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible+span{outline:3px solid #789c40;outline-offset:4px}button{transition:background .16s,transform .16s}button:active{transform:translateY(1px)}.topbar{height:90px;padding:0 max(5vw,24px);display:flex;align-items:center;justify-content:space-between;background:white;border-bottom:1px solid var(--line)}.brand{text-decoration:none;display:flex;align-items:center;font-family:Manrope,sans-serif;font-size:27px;font-weight:800;letter-spacing:-1.5px;color:var(--ink)}.brandmark{display:grid;place-items:center;font-family:Georgia,serif;line-height:1;width:39px;height:42px;border-radius:12px;background:var(--green);color:#dcffa2;font-size:36px;font-weight:400;margin-right:11px;transform:rotate(-7deg)}.brandbang{color:#80a744}.header-note{font-size:11px;letter-spacing:2.4px;font-weight:600;color:#75847d}.quiet{border:0;background:transparent;color:#52645b;padding:10px;font-size:14px}.quiet:hover{background:#edf2ed;border-radius:8px}main{max-width:1450px;padding:43px 5vw 0;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:31px}.eyebrow{font-size:11px;letter-spacing:1.9px;font-weight:700;color:#718276}h1{font-family:Manrope,sans-serif;font-size:clamp(28px,3vw,42px);letter-spacing:-1.7px;margin:9px 0 10px;font-weight:750}h1>span{color:#89af4a}.intro p{color:#758078;font-size:15px;margin:0}.sound-motif{display:flex;gap:9px;align-items:center;padding-right:8px}.sound-motif span{display:grid;place-items:center;width:61px;height:67px;border:1px solid;font:32px Georgia,serif;border-radius:16px;transform:rotate(-8deg);background:#fff3e6;color:#a76320;border-color:#ecd5b9}.sound-motif span:nth-child(2){transform:rotate(7deg) translateY(-9px);background:#e9f1ff;border-color:#cdddf1;color:#38629c}.sound-motif span:nth-child(3){transform:rotate(-5deg);background:#f3ebfb;border-color:#e1d2ee;color:#8550a8}.input-panel,.reading-panel,.vowel-panel{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}.input-panel{box-shadow:0 5px 15px #263b3503}.section-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 8px;font-size:14px;font-weight:600}.step{font-size:11px;color:#7e8c82;border:1px solid #dfe6df;border-radius:6px;padding:3px 5px;margin-right:9px}.text-button{border:0;background:transparent;font-size:13px;color:#64755d;padding:6px}textarea{display:block;width:100%;border:0;resize:vertical;min-height:113px;padding:14px 25px 19px;line-height:1.85;font-size:17px;color:#34473c;background:transparent;outline-offset:-4px!important}textarea::placeholder{color:#929b95}.input-footer{padding:15px 23px;display:flex;align-items:center;gap:20px;border-top:1px solid #edf0eb;background:#fcfdfb}.accent-picker{display:flex;padding:4px;margin:0;border:1px solid #e5e9e2;border-radius:9px;background:#eff2ee;gap:2px}.accent-picker input{position:absolute;opacity:0;width:1px}.accent-picker label span{display:block;padding:9px 12px;border-radius:6px;font-size:13px;color:#79837c;font-weight:500;cursor:pointer}.accent-picker input:checked+span{background:white;color:#314c3f;box-shadow:0 1px 4px #253d391a}.accent-picker small{font-size:10px;margin-left:8px;color:#8a978d}.muted{font-size:12px;color:#98a097;margin-left:auto;white-space:nowrap}.primary{padding:13px 21px;border:1px solid var(--green);border-radius:9px;background:var(--green);color:#fff;font-size:15px;font-weight:600;display:flex;gap:25px;align-items:center}.primary:hover{background:#3d6855}.primary span{color:#d6ff95;font-size:20px}.status{min-height:19px;margin:11px 3px 18px;color:#73816e;font-size:12px}.status.error{color:#b24530}.workspace{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(340px,1fr);gap:24px;align-items:start}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:26px 25px 18px;gap:10px}h2{font-family:Manrope,sans-serif;font-size:21px;font-weight:750;letter-spacing:-.65px;margin:7px 0 0}.badge{border:1px solid #dce5d8;background:#f1f6ec;color:#718166;border-radius:5px;padding:6px 8px;font-size:9px;letter-spacing:1.2px;white-space:nowrap}.reading-toolbar{display:flex;align-items:center;gap:7px;margin:0 25px;padding:14px 0;border-top:1px solid #edf1e9;border-bottom:1px solid #edf1e9}.audio-button{border:1px solid #dee5da;background:#f6f8f2;color:#526644;border-radius:7px;padding:9px 12px;font-size:12px;font-weight:550;display:flex;align-items:center;gap:9px}.audio-button:hover{background:#e8f0dd}.speed-label{margin-left:auto;display:flex;gap:8px;align-items:center;color:#8a948d;font-size:11px}select{border:1px solid #e0e5da;border-radius:6px;background:#fff;color:#62715a;padding:6px;font-size:12px}.reading{min-height:270px;padding:24px 25px 34px}.initial-example{display:flex;flex-direction:column;gap:8px;font-size:25px}.initial-example span+span{color:#93644b;font-family:Georgia,serif}.reading-line{display:flex;align-items:flex-start;flex-wrap:wrap;gap:20px 9px;margin:0 0 28px;padding-left:25px;position:relative}.line-number{position:absolute;left:0;top:9px;font-size:10px;color:#a6afa6}.word{display:inline-flex;align-items:stretch;vertical-align:top;border:0;border-radius:7px;background:transparent;padding:5px 3px 6px;color:inherit;position:relative;max-width:100%;flex-wrap:wrap}.word:hover{background:#f0f4ec}.word.active{background:#e6efce;box-shadow:0 0 0 2px #89a65b}.segment{display:inline-grid;grid-template-rows:auto auto;text-align:center;align-items:baseline;min-width:.2em}.orth{font-size:20px;line-height:1.65;white-space:pre}.ipa{font-family:'Segoe UI',Arial,sans-serif;font-size:17px;line-height:1.7;white-space:pre}.segment+.segment{margin-left:1px}.silent .orth{color:#a3ada5}.silent .ipa{color:#c4cbc4}.reading-foot{padding:17px 25px;display:flex;gap:10px;border-top:1px solid #edf0e9;background:#fcfdfb;align-items:center}.reading-foot p{font-size:12px;line-height:1.6;color:#919b90;margin:0}.tiny-square{width:17px;height:24px;border:1px solid #bac8ae;border-radius:4px}.vowel-panel .panel-heading{padding-bottom:8px}.count{display:grid;place-items:center;border-radius:50%;width:30px;height:30px;background:#eef3e7;color:#6b8052;font-size:12px}.panel-caption{font-size:12px;color:#8b958b;margin:0;padding:0 25px 22px}.empty{padding:24px;color:var(--muted)}#groups{padding:0 18px 18px;display:flex;flex-direction:column;gap:10px;max-height:690px;overflow:auto}.vowel-group{border:1px solid var(--group-border,#e6e8e4);background:var(--group-bg,#fafbf9);border-radius:11px;padding:14px}.group-head{display:flex;align-items:center;gap:11px}.group-symbol{font-family:'Segoe UI',Arial,sans-serif;font-size:27px;min-width:45px;color:var(--group-color);font-weight:500}.group-info{flex:1}.group-info h3{font-size:12px;font-weight:650;margin:0 0 3px;color:#59654f}.group-info p{margin:0;font-size:10px;color:#8b9283;line-height:1.5}.group-play,.phoneme-play{border:1px solid var(--group-border);background:#ffffff99;border-radius:50%;height:31px;width:31px;display:grid;place-items:center;color:var(--group-color);font-size:11px}.group-play:hover,.phoneme-play:hover{background:white}.group-actions{display:flex;gap:5px}.group-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid var(--group-border)}.group-words .word{background:#ffffffab;padding:5px 8px;border:1px solid #ffffff}.group-words .word.active{background:#e6efce;border-color:#89a65b}.group-words .orth{font-size:15px}.group-words .ipa{font-size:13px}.group-words .segment+.segment{margin-left:0}.guide{padding:20px 25px;margin:0 0 24px;background:#fff;border:1px solid var(--line);border-radius:12px}.guide p{font-size:14px;line-height:1.8;color:#657167;max-width:1000px}#guide-families{display:flex;flex-wrap:wrap;gap:12px}.family-chip{border-radius:8px;padding:8px 12px;font-size:13px;border:1px solid #e0e7de}footer{display:flex;align-items:center;justify-content:space-between;padding:28px 2px;color:#939d91;font-size:11px;gap:15px}.credits{color:#718363;margin-left:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(min-width:1500px){main{padding-left:45px;padding-right:45px}}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1.3fr) minmax(310px,1fr);gap:16px}.header-note{display:none}.panel-heading{padding:22px 18px 16px}.badge{display:none}.reading{padding:22px 14px}.reading-toolbar{margin:0 18px}.speed-label{font-size:0}.sound-motif span{width:47px;height:54px;font-size:27px}.input-footer{gap:10px}.accent-picker label span{padding:9px}.accent-picker small{display:none}h2{font-size:19px}}@media(max-width:760px){.topbar{height:75px;padding:0 22px}.brand{font-size:24px}.brandmark{width:33px;height:35px;font-size:30px}.quiet{font-size:12px}main{padding:30px 20px 0}.intro{margin-bottom:25px}.intro p{font-size:14px;line-height:1.6;max-width:260px}.sound-motif{display:none}.workspace{grid-template-columns:1fr}.input-footer{flex-wrap:wrap;padding:13px 17px}.accent-picker{flex:1}.accent-picker label{flex:1}.accent-picker label span{text-align:center}.input-footer .muted{order:2;margin-left:0}.primary{order:3;margin-left:auto}.section-head{padding:17px 17px 8px}.text-button{font-size:11px}textarea{padding:13px 18px;font-size:16px}.reading{min-height:220px}#groups{max-height:none}.reading-line{gap:15px 7px}.panel-heading{padding:22px}.badge{display:block}.panel-caption{padding-left:22px}footer{flex-direction:column;align-items:flex-start;line-height:1.8}.reading .orth{font-size:19px}.reading .ipa{font-size:16px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Readable instructional labels and robust wrapping on narrow screens. */
.section-head,.accent-picker label span,.text-button,.audio-button,.quiet{font-size:14px}
.panel-caption,.status,.group-info p,.reading-foot p,.speed-label,.badge,.eyebrow,.header-note,footer{font-size:12px}
.group-info h3{font-size:14px}.group-info p{line-height:1.6}.group-symbol{font-size:28px}
.vowel-group.active{outline:2px solid var(--group-color);outline-offset:-2px}
.segment{max-width:100%}.orth,.ipa{overflow-wrap:anywhere;white-space:normal}
@media(max-width:760px){.text-button{font-size:12px}.section-head{gap:10px}.accent-picker label span{font-size:12px}.badge{font-size:10px}.reading-toolbar{flex-wrap:wrap}.reading-toolbar .speed-label{font-size:12px}footer>span{max-width:100%}}

.voice-settings{padding:16px 25px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.voice-settings label{font-size:14px;color:#62715a}.voice-settings select{flex:1;min-width:0;max-width:100%;font-size:13px;padding:8px}.voice-settings p{flex-basis:100%;margin:0;color:#75827b;font-size:12px;line-height:1.6}