.learning-card .word:has(.ph-integrated){max-width:100%;text-align:center;overflow-wrap:normal}
.learning-card .word-line:has(.ph-integrated){align-items:center;flex-wrap:wrap;gap:8px}
.ph-integrated{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.42em;max-width:100%;vertical-align:middle;color:#24506d;font-size:30px;font-weight:700;letter-spacing:0}
.pi-syllable{display:inline-flex;flex-direction:column;align-items:stretch;position:relative;max-width:100%;border:1px solid #cfdee6;border-radius:10px;background:#fafcfd;padding:3px 5px 0;box-sizing:border-box;box-shadow:none}
.pi-syllable-letters{display:inline-flex;align-items:center;justify-content:center;gap:2px;max-width:100%;white-space:nowrap}
.pi-letter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:44px;min-width:22px;padding:0 2px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;line-height:1.25;white-space:pre;box-sizing:border-box;box-shadow:none;text-decoration:none}
button.pi-letter{appearance:none;-webkit-appearance:none;cursor:pointer}
button.pi-letter:disabled{opacity:1;cursor:default}
.pi-syllable-play{display:flex;align-items:center;justify-content:center;align-self:center;width:44px;height:28px;min-height:28px;padding:2px;border:0;border-radius:4px;background:transparent;color:#7293a3;font-size:12px;line-height:1}
.pi-syllable-play svg{display:block;width:12px;height:12px}
.pi-syllable-play:disabled{opacity:.4}
.pi-letter:not(:disabled):hover,.pi-syllable-play:not(:disabled):hover{background:#edf4f6}
.pi-letter:focus-visible,.pi-syllable-play:focus-visible{outline:0;background:#edf4f6}
.pi-controls button:focus-visible{outline:2px solid #7293a3;outline-offset:-4px}
.pi-plain{display:inline;overflow-wrap:normal}
.learning-card .ipa:has(.pi-ipa){font-size:17px;margin-top:10px;line-height:1.8;color:#546c7e}
.pi-ipa{white-space:normal;overflow-wrap:normal;word-break:normal;letter-spacing:0}
.pi-ipa [data-pi-keys]{padding:0;margin:0;border:0;border-radius:3px}
.pi-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;margin:2px auto 4px;max-width:100%;font-size:12px}
.pi-controls button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:0;background:transparent;color:#557082;font-size:12px;font-weight:500;line-height:1.3;box-shadow:none;text-decoration:none;transform:none}
.pi-controls button::before{content:"";position:absolute;inset:8px 3px;border:0;border-radius:7px;background:#f2f5f7;box-shadow:none;z-index:-1;pointer-events:none}
.pi-controls button:not(:disabled):hover{background:transparent;box-shadow:none;transform:none}
.pi-controls button:not(:disabled):not([aria-pressed=true]):hover::before{background:#eaf0f3}
.pi-controls button:disabled{opacity:.7}
.pi-controls button>span{font-size:9px;opacity:.65}
.pi-status{flex-basis:100%;min-width:0;font-size:11px;color:#708494;line-height:1.5}
.pi-status:empty{display:none}
@media(max-width:400px){.ph-integrated{gap:5px;font-size:28px}.pi-syllable{padding:4px 5px 0;border-radius:11px}.pi-syllable-letters{gap:2px}.pi-letter{padding-inline:2px;min-width:18px}.learning-card .ipa:has(.pi-ipa){font-size:16px}}
@media(prefers-reduced-motion:reduce){.ph-integrated *,.pi-ipa *{transition:none;animation:none}}
.pi-consonant{color:#355e70}.pi-vowel{color:#ad6933}.pi-vowel.pi-weak{color:#a17d58}.pi-irregular{color:#806c91}.pi-silent{color:#9ca6ac}
.ph-integrated .pi-letter.pi-active,.pi-ipa .pi-active,.pi-ipa.pi-active{background:#f7e7b9;color:#654b24;border:0;box-shadow:none}
.pi-syllable.pi-active{background:#f7e7b9;border:1px solid #cfba7f;box-shadow:none}
.pi-syllable.pi-active .pi-letter,.pi-syllable.pi-active .pi-syllable-play{background:transparent;box-shadow:none}
.pi-ipa.pi-active .pi-active{background:transparent}
.pi-letter.pi-active:hover,.pi-letter.pi-active:focus-visible{background:#f7e7b9}
.pi-ipa{display:inline-block;white-space:nowrap;max-width:100%}
.pi-controls button[aria-pressed=true]{background:transparent;color:#385f72;font-weight:600;border:0;box-shadow:none}
.pi-controls button[aria-pressed=true]::before{background:#e5eef2}
@media(max-width:599px){
 body[data-page="cards"] .shell,body[data-page="session"] .shell{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
 body[data-page="cards"] .view,body[data-page="session"] .view{padding:8px 12px}
 body[data-page="cards"] .learning-header,body[data-page="session"] .learning-header{margin-bottom:4px}
 body[data-page="cards"] .learning-progress,body[data-page="session"] .learning-progress{margin:4px 0 8px}
 body[data-page="cards"] .learning-progress-status,body[data-page="session"] .learning-progress-status{margin-bottom:4px;font-size:11px;line-height:16px}
 body[data-page="cards"] .learning-step>span,body[data-page="session"] .learning-step>span{width:24px;height:24px;font-size:11px}
 .learning-card.learner-simple{padding:8px 12px;margin:6px 0}
 .learning-card.learner-simple .learning-tools{margin-bottom:0}
 .learning-card.learner-simple .learning-image{height:clamp(52px,calc(100dvh - 532px),160px);width:min(100%,200px)}
 .learning-card.learner-simple .learning-word{margin-top:6px}
 .learning-card.learner-simple .ph-integrated{gap:4px;font-size:26px}
 .learning-card.learner-simple .pi-syllable{padding:4px 4px 0;border-radius:10px}
 .learning-card.learner-simple .pi-letter{min-height:32px;padding-inline:2px}
 .learning-card.learner-simple .pi-syllable-play{width:36px;height:26px;min-height:26px;padding:2px}
 .learning-card.learner-simple .ipa:has(.pi-ipa){font-size:16px;margin-top:3px;line-height:1.5}
 .learning-card.learner-simple .pi-controls{margin:0 auto 2px;gap:4px}
 .learning-card.learner-simple .learning-definition{font-size:15px;line-height:1.4;margin:6px auto 8px}
 .learning-card.learner-simple .learning-sentence{padding-top:7px}
 .learning-card.learner-simple .sentence{font-size:16px;line-height:1.5}
 .learning-card.learner-simple .word-translation,.learning-card.learner-simple .sentence-translation{margin-top:3px;font-size:12px;line-height:1.4}
}
@media(max-width:360px){
 body[data-page="cards"] .view,body[data-page="session"] .view{padding-top:4px;padding-bottom:4px}
 body[data-page="cards"] .learning-header,body[data-page="session"] .learning-header{margin-bottom:0}
 body[data-page="cards"] .learning-progress,body[data-page="session"] .learning-progress{margin:2px 0 4px}
 .learning-card.learner-simple{margin:3px 0}
}