.ph-panel{margin:20px auto;max-width:100%;text-align:center}
.ph-containers{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.ph-container{background:#f5faff;border:1px solid #e1edf7;border-radius:14px;padding:9px 13px 10px;max-width:100%;box-sizing:border-box}
.ph-units,.ph-split-row{display:flex;align-items:flex-start;justify-content:center;gap:7px}
.ph-units{flex-wrap:wrap}
.ph-unit{display:inline-flex;flex-direction:column;align-items:center;min-width:16px}
.ph-unit[type=button]{appearance:none;border:0;background:transparent;padding:0;font:inherit;cursor:pointer;border-radius:5px}
.ph-controls{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:12px}
.ph-controls button{border:1px solid #dceaf6;background:#f7fbff;color:#427eae;border-radius:18px;font-size:13px;padding:7px 13px;min-height:36px;cursor:pointer}
.ph-controls button[aria-pressed=true]{background:#e4f3ff;border-color:#83bee9}
.ph-trial{font-size:11px;color:#7994aa}
.ph-speaking{outline:2px solid #de9c38;outline-offset:2px;border-radius:4px}
.ph-unit:focus-visible,.ph-controls button:focus-visible{outline:2px solid #328aca;outline-offset:3px}
.ph-letters{font-size:30px;font-weight:750;line-height:40px;white-space:pre;border-bottom:2px solid currentColor;display:block}
.ph-sound{font-size:13px;line-height:20px;margin-top:3px;white-space:nowrap;font-weight:500}
.ph-vowel{color:#E53935}.ph-consonant{color:#1565C0}.ph-silent{color:#9E9E9E}.ph-tricky{color:#FB8C00}
.ph-silent .ph-letters{border-bottom-color:transparent}
.ph-split{display:inline-flex;flex-direction:column;align-items:stretch}
.ph-split-row{position:relative;gap:5px}
.ph-split-row:after{content:"";position:absolute;top:40px;left:0;right:0;border-bottom:2px solid currentColor}
.ph-split-row .ph-letters{border-bottom-color:transparent}
.ph-split-sound{font-size:12px;line-height:20px;font-weight:500;white-space:nowrap}
.ph-divider{color:#9bb2c7;font-size:21px}
@media(max-width:400px){.ph-container{padding:8px 10px 9px}.ph-units{gap:5px}.ph-letters{font-size:27px}}
.ph-demo-lexeme,.ph-demo-chunk,.ph-demo-split{display:inline-flex;align-items:baseline}
.ph-demo{vertical-align:baseline;line-height:1.35;white-space:normal}
.ph-demo-lexeme{max-width:100%;flex-wrap:wrap;justify-content:center;vertical-align:bottom;row-gap:8px}
.ph-demo-chunk{white-space:nowrap}
.ph-demo-chunk[type=button]{appearance:none;border:0;padding:0;background:transparent;color:inherit;font:inherit;line-height:inherit;cursor:pointer;vertical-align:baseline}
.ph-demo-chunk[type=button]:focus-visible{outline:2px solid #328aca;outline-offset:3px;border-radius:4px}
.ph-demo-unit{display:inline-block}
.ph-demo[data-ph-display=word] .ph-demo-unit{color:inherit}
.ph-demo[data-ph-display=word] .ph-demo-split{color:inherit}
.ph-demo:not([data-ph-display=word]) .ph-demo-lexeme{column-gap:14px}
.ph-demo[data-ph-display=phonics] .ph-demo-chunk,.ph-demo[data-ph-display=phonics] .ph-demo-split{gap:6px}
.ph-demo-split{position:relative}
.ph-demo[data-ph-display=phonics] .ph-demo-split:after{content:"";position:absolute;bottom:-1px;left:0;right:0;border-bottom:2px solid currentColor}
.ph-has-demo .ph-container{background:transparent;border:0;padding:0 5px}
.ph-has-demo .ph-letters{font-size:21px;line-height:30px}
.ph-has-demo .ph-split-row:after{top:30px}
.ph-has-demo .ph-sound,.ph-has-demo .ph-split-sound{font-size:11px;line-height:17px}
.ph-has-demo .ph-units,.ph-has-demo .ph-split-row{gap:5px}
.ph-has-demo .ph-controls{margin-bottom:16px}
.ph-separator{white-space:pre;color:#9bb2c7;font-size:21px}
.ph-controls{flex-wrap:wrap}
.learning-card .word:has(.ph-demo){text-align:center;max-width:calc(100% - 44px)}
@media(max-width:400px){.ph-demo[data-ph-display=phonics] .ph-demo-chunk,.ph-demo[data-ph-display=phonics] .ph-demo-split{gap:4px}.ph-demo:not([data-ph-display=word]) .ph-demo-lexeme{column-gap:10px}}