.pron-page{min-height:100vh;background:#f4f6f9;color:#0f172a}.pron-inner{max-width:1240px;margin:0 auto;padding:20px 16px 40px}@media (min-width:768px){.pron-inner{padding:24px 24px 48px}}.pron-header{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}@media (min-width:900px){.pron-header{flex-direction:row;align-items:flex-end;justify-content:space-between}}.pron-header__eyebrow{margin:0 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2563eb}.pron-header__title{margin:0 0 6px;font-family:var(--font-heading),Oswald,sans-serif;font-size:clamp(1.5rem,4vw,2rem);font-weight:700;color:#0f172a}.pron-header__desc{margin:0;font-size:.92rem;color:#64748b;line-height:1.45;max-width:520px}.pron-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:8px;gap:8px;width:100%}@media (min-width:900px){.pron-metrics{width:auto;min-width:380px}}.pron-metric{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 1px 4px rgba(15,23,42,.04)}.pron-metric--accent{border-color:#bfdbfe;background:linear-gradient(135deg,#eff6ff,#fff)}.pron-metric__icon{font-size:1.1rem;line-height:1}.pron-metric__label{display:block;font-size:.62rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.pron-metric__value{display:block;font-size:.95rem;font-weight:800;color:#0f172a}.pron-actions{display:grid;grid-template-columns:1fr;grid-gap:10px;gap:10px;margin-bottom:16px}@media (min-width:720px){.pron-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}.pron-actionCard{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;border:1px solid #e0e0e0;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.04)}.pron-actionCard--blue{background:linear-gradient(135deg,#eff6ff,#fff 60%);border-color:#bfdbfe}.pron-actionCard--amber{background:linear-gradient(135deg,#fff7ed,#fff 60%);border-color:#fed7aa}.pron-actionCard--green{background:linear-gradient(135deg,#ecfdf5,#fff 60%);border-color:#bbf7d0}.pron-actionCard__head{display:flex;align-items:center;gap:8px;font-size:.88rem;color:#0f172a}.pron-actionCard__icon{font-size:1.1rem}.pron-actionCard__sub{margin:0;font-size:.8rem;color:#64748b}.pron-actionCard__sub span{font-weight:800;color:#2563eb}.pron-actionCard__progress{display:flex;align-items:center;gap:8px}.pron-actionCard__bar{flex:1 1;height:6px;border-radius:999px;background:#e2e8f0;overflow:hidden}.pron-actionCard__bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#3b82f6)}.pron-actionCard__pct{font-size:.72rem;font-weight:700;color:#475569;white-space:nowrap}.pron-actionCard__tags{display:flex;flex-wrap:wrap;gap:6px}.pron-actionCard__tag{padding:4px 8px;border-radius:8px;background:#fff;border:1px solid #fdba74;color:#c2410c;font-size:.75rem;font-weight:700}.pron-actionCard__btn{align-self:flex-start;margin-top:auto;padding:8px 14px;border:none;border-radius:10px;background:#2563eb;color:#fff;font-size:.78rem;font-weight:800;font-family:inherit;cursor:pointer}.pron-actionCard__btn--ghost{background:transparent;border:1px solid;color:#0f172a}.pron-actionCard--amber .pron-actionCard__btn--ghost{color:#c2410c;border-color:#fdba74}.pron-actionCard--green .pron-actionCard__btn--ghost{color:#15803d;border-color:#86efac}.pron-filterBar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}@media (min-width:768px){.pron-filterBar{flex-direction:row;align-items:center;justify-content:space-between}}.pron-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.pron-filters::-webkit-scrollbar{display:none}.pron-filter{flex-shrink:0;padding:8px 14px;border:1px solid #e0e0e0;border-radius:999px;background:#fff;color:#475569;font-size:.78rem;font-weight:700;font-family:inherit;cursor:pointer}.pron-filter--active{background:#2563eb;border-color:#2563eb;color:#fff}.pron-filter:disabled{opacity:.6;cursor:wait}.pron-levelSelect{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:#475569;white-space:nowrap}.pron-levelSelect select{padding:7px 10px;border:1px solid #e0e0e0;border-radius:10px;background:#fff;font-family:inherit;font-size:.78rem;font-weight:600;color:#0f172a}.pron-layout{display:grid;grid-template-columns:1fr;grid-gap:14px;gap:14px;align-items:start}@media (min-width:1024px){.pron-layout{grid-template-columns:300px minmax(0,1fr)}}.pron-lessonList{background:#fff;border:1px solid #e0e0e0;border-radius:16px;padding:12px;box-shadow:0 2px 8px rgba(15,23,42,.04)}.pron-lessonList__title{margin:0 0 10px;font-size:.82rem;font-weight:800;color:#334155}.pron-lessonList__items{display:flex;flex-direction:column;gap:8px}.pron-lessonList__more{margin-top:8px;padding:8px;border:1px dashed #cbd5e1;border-radius:10px;background:#f8fafc;color:#475569;font-size:.75rem;font-weight:700}.pron-lessonCard,.pron-lessonList__more{width:100%;font-family:inherit;cursor:pointer}.pron-lessonCard{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid #e0e0e0;border-radius:12px;background:#fff;text-align:left;transition:border-color .15s ease,box-shadow .15s ease}.pron-lessonCard:hover{border-color:#93c5fd}.pron-lessonCard--selected{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.12);background:#f8fbff}.pron-lessonCard__ipaBox{flex-shrink:0;min-width:44px;padding:8px 6px;border-radius:10px;background:#eff6ff;color:#2563eb;font-size:.82rem;font-weight:800;text-align:center}.pron-lessonCard__body{display:flex;flex-direction:column;gap:3px;min-width:0}.pron-lessonCard__title{font-size:.82rem;font-weight:800;color:#0f172a;line-height:1.25}.pron-lessonCard__words{font-size:.7rem;color:#64748b;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pron-lessonCard__meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}.pron-lessonCard__level{padding:2px 6px;border-radius:6px;background:#f1f5f9;font-size:.62rem;font-weight:800;color:#64748b}.pron-lessonCard__score{font-size:.68rem;font-weight:800}.pron-lessonCard__score--ok{color:#16a34a}.pron-lessonCard__score--warn{color:#ea580c}.pron-lessonCard__score--new{color:#94a3b8}.pron-room{background:#fff;border:1px solid #e0e0e0;border-radius:16px;box-shadow:0 4px 16px rgba(15,23,42,.06);overflow:hidden}.pron-room--empty{text-align:center;padding:40px 20px}.pron-room__emptyIcon{font-size:2rem;display:block;margin-bottom:8px}.pron-room__emptyTitle{margin:0 0 6px;font-size:1.05rem;font-weight:800}.pron-room__emptyDesc{margin:0;font-size:.82rem;color:#64748b}.pron-room__shell{display:grid;grid-template-columns:1fr}@media (min-width:900px){.pron-room__shell{grid-template-columns:minmax(0,1fr) 260px}}.pron-room__practice{padding:16px;border-bottom:1px solid #e0e0e0}@media (min-width:900px){.pron-room__practice{border-bottom:none;border-right:1px solid #e0e0e0}}.pron-room__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}.pron-room__title{margin:0;font-size:.88rem;font-weight:700;color:#334155}.pron-room__title span{color:#2563eb}.pron-room__progress{padding:4px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:.72rem;font-weight:800}.pron-room__focus{text-align:center;padding:16px 12px;margin-bottom:14px;border-radius:14px;background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid #e0e0e0}.pron-room__ipaRow,.pron-room__wordRow{display:flex;align-items:center;justify-content:center;gap:8px}.pron-room__ipaBig{font-size:2rem;font-weight:800;color:#2563eb;line-height:1.1}.pron-room__word{font-family:var(--font-heading),Oswald,sans-serif;font-size:2rem;font-weight:700;color:#1e40af}.pron-room__phonetic{margin:6px 0 10px;font-size:1rem;font-weight:700;color:#3b82f6}.pron-room__sentence p{margin:0 0 4px;font-size:.88rem;font-weight:600;color:#334155}.pron-room__sentence span{display:block;font-size:.78rem;color:#64748b}.pron-room__speakBtn{width:32px;height:32px;border:1px solid #bfdbfe;border-radius:50%;background:#eff6ff;font-size:.85rem;cursor:pointer;flex-shrink:0}.pron-room__speakBtn--inline{width:28px;height:28px;margin-left:6px;vertical-align:middle}.pron-room__warn{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:.75rem;line-height:1.4}.pron-room__hint{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 10px;font-size:.75rem;font-weight:600;color:#b45309}.pron-room__recDot{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:pron-pulse 1s ease infinite}.pron-room__controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:8px}.pron-room__sideBtn{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;padding:8px 4px;border:1px solid #e0e0e0;border-radius:12px;background:#f8fafc;color:#475569;font-size:.65rem;font-weight:700;font-family:inherit;cursor:pointer}.pron-room__sideBtn:disabled{opacity:.45;cursor:not-allowed}.pron-room__sideBtn span{font-size:1.2rem}.pron-room__mic{width:88px;height:88px;border:none;border-radius:50%;background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;font-size:2rem;cursor:pointer;box-shadow:0 8px 24px rgba(37,99,235,.35);flex-shrink:0}.pron-room__mic--active{background:linear-gradient(180deg,#dc2626,#b91c1c);animation:pron-pulse 1.2s ease infinite}.pron-room__mic--busy{opacity:.75;cursor:wait;animation:none}.pron-room__mic:disabled{opacity:.55;cursor:not-allowed}.pron-room__micHint{margin:0 0 10px;text-align:center;font-size:.72rem;color:#64748b;line-height:1.4}.pron-room__nav{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px}.pron-room__nextBtn{min-width:160px;padding:10px 18px;border:1px solid #2563eb;border-radius:10px;background:#eff6ff;color:#1d4ed8;font-size:.82rem;font-weight:800;font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease}.pron-room__nextBtn:hover:not(:disabled){background:#2563eb;color:#fff}.pron-room__nextBtn:disabled{opacity:.45;cursor:not-allowed;border-color:#cbd5e1;background:#f1f5f9;color:#94a3b8}.pron-room__navHint{font-size:.68rem;color:#94a3b8;text-align:center}.pron-room__tip{display:flex;gap:10px;padding:12px;border-radius:12px;background:#eff6ff;border:1px solid #bfdbfe}.pron-room__tipIcon{font-size:1.2rem;flex-shrink:0}.pron-room__tip strong{display:block;margin-bottom:4px;font-size:.78rem;color:#1d4ed8}.pron-room__tip p{margin:0;font-size:.75rem;color:#334155;line-height:1.45}.pron-result{padding:16px;background:#fafbfc}.pron-result--empty{display:flex;flex-direction:column;justify-content:center;min-height:200px}.pron-result__title{margin:0 0 12px;font-size:.82rem;font-weight:800;color:#334155}.pron-result__placeholder{margin:0;font-size:.78rem;color:#94a3b8;line-height:1.45}.pron-result__gaugeWrap{display:flex;justify-content:center;margin-bottom:8px}.pron-result__gauge{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;position:relative}.pron-result__gaugeInner{width:88px;height:88px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #e2e8f0}.pron-result__gaugeInner strong{font-family:var(--font-heading),Oswald,sans-serif;font-size:1.6rem;line-height:1;color:#2563eb}.pron-result__gaugeInner small{font-size:.65rem;color:#94a3b8;font-weight:700}.pron-result__status{margin:0 0 4px;text-align:center;font-size:.88rem;font-weight:800}.pron-result__status--ok{color:#16a34a}.pron-result__status--warn{color:#ea580c}.pron-result__mode{margin:0 0 12px;text-align:center;font-size:.68rem;color:#94a3b8;font-weight:600}.pron-result__transcriptBox{padding:10px;margin-bottom:10px;border-radius:10px;background:#fff;border:1px solid #e0e0e0}.pron-result__transcriptLabel{display:block;margin-bottom:4px;font-size:.62rem;font-weight:800;text-transform:uppercase;color:#94a3b8}.pron-result__transcriptBox p{margin:0;font-size:.82rem;font-weight:700;color:#334155}.pron-result__player{width:100%;margin-bottom:10px;padding:8px 10px;border:1px solid #e0e0e0;border-radius:10px;background:#fff;font-size:.75rem;font-weight:700;font-family:inherit;color:#475569;cursor:pointer;text-align:left}.pron-result__feedback{margin:0 0 12px;font-size:.72rem;color:#64748b;line-height:1.45}.pron-result__feedback strong{color:#334155}.pron-result__actions{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}.pron-result__next,.pron-result__retry{width:100%;padding:10px 8px;border-radius:10px;font-size:.75rem;font-weight:800;font-family:inherit;cursor:pointer}.pron-result__retry{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8}.pron-result__next{border:1px solid #2563eb;background:#2563eb;color:#fff}.pron-result__next:disabled{opacity:.45;cursor:not-allowed;border-color:#cbd5e1;background:#f1f5f9;color:#94a3b8}.pron-empty{padding:24px 12px;text-align:center}.pron-empty span{font-size:1.6rem;display:block;margin-bottom:6px}.pron-empty h3{margin:0 0 6px;font-size:.95rem}.pron-empty p{margin:0 0 12px;font-size:.78rem;color:#64748b}.pron-empty__btn{padding:8px 14px;border:1px solid #2563eb;border-radius:8px;background:#eff6ff;color:#1d4ed8;font-weight:700;font-family:inherit;cursor:pointer}.pron-loading{display:grid;grid-gap:14px;gap:14px}@media (min-width:1024px){.pron-loading{grid-template-columns:300px 1fr}}.pron-loading__list{display:flex;flex-direction:column;gap:8px}.pron-skeleton{border-radius:12px;background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);background-size:200% 100%;animation:pron-shimmer 1.2s ease infinite}.pron-skeleton--lesson{height:72px}.pron-skeleton--room{height:480px}@keyframes pron-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.03);opacity:.92}}@keyframes pron-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width:1023px){.pron-room{order:-1}}.pron-mainTabs{display:flex;gap:8px;margin-bottom:16px;padding:4px;border-radius:12px;background:#fff;border:1px solid #e0e0e0;width:-moz-fit-content;width:fit-content;max-width:100%}.pron-mainTab{flex:1 1 auto;min-width:120px;padding:10px 16px;border:none;border-radius:10px;background:transparent;color:#475569;font-size:.82rem;font-weight:800;font-family:inherit;cursor:pointer;white-space:nowrap}.pron-mainTab--active{background:#2563eb;color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.25)}.pron-page--chart .pron-inner{max-width:1100px}.ipaChart{background:#fff;border:1px solid #e0e0e0;border-radius:16px;box-shadow:0 4px 16px rgba(15,23,42,.06);overflow:hidden}.ipaChart__layout{display:grid;grid-template-columns:1fr}@media (min-width:900px){.ipaChart__layout{grid-template-columns:52px minmax(0,1fr)}}.ipaChart__spine{display:none;background:linear-gradient(180deg,#5d4037,#4e342e);writing-mode:vertical-rl;-webkit-text-orientation:mixed;text-orientation:mixed;transform:rotate(180deg);align-items:center;justify-content:center;padding:16px 8px}@media (min-width:900px){.ipaChart__spine{display:flex}}.ipaChart__spineText{color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.ipaChart__body{padding:14px}@media (min-width:768px){.ipaChart__body{padding:18px 20px 22px}}.ipaChart__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}.ipaChart__title{margin:0 0 4px;font-family:var(--font-heading),Oswald,sans-serif;font-size:1.1rem;font-weight:700;color:#1e293b}.ipaChart__hint{margin:0;font-size:.78rem;color:#64748b}.ipaChart__legend{display:flex;flex-wrap:wrap;gap:10px;font-size:.68rem;font-weight:700;color:#64748b}.ipaChart__legendDot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}.ipaChart__legendDot--off{background:#ef9a9a;border:1px solid #c62828}.ipaChart__legendDot--on{background:#ffcdd2;border:1px solid #b71c1c}.ipaChart__section{display:grid;grid-template-columns:1fr;grid-gap:8px;gap:8px;margin-bottom:12px}@media (min-width:720px){.ipaChart__section{grid-template-columns:28px minmax(0,1fr);align-items:stretch}}.ipaChart__sectionLabel{writing-mode:vertical-rl;-webkit-text-orientation:mixed;text-orientation:mixed;transform:rotate(180deg);font-size:.62rem;font-weight:800;letter-spacing:.08em;color:#fff;background:#37474f;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:8px 4px;min-height:48px}@media (max-width:719px){.ipaChart__sectionLabel{writing-mode:horizontal-tb;transform:none;padding:6px 10px;min-height:0}}.ipaChart__section--vowels .ipaChart__sectionLabel{background:#e65100}.ipaChart__section--consonants .ipaChart__sectionLabel{background:#b71c1c}.ipaChart__block{margin-bottom:10px}.ipaChart__block:last-child{margin-bottom:0}.ipaChart__blockLabel{margin:0 0 6px;font-size:.68rem;font-weight:800;text-transform:lowercase;color:#64748b;letter-spacing:.04em}.ipaChart__grid{display:grid;grid-gap:6px;gap:6px}.ipaChart__grid--4,.ipaChart__grid--8{grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:560px){.ipaChart__grid--4,.ipaChart__grid--8{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:900px){.ipaChart__grid--8{grid-template-columns:repeat(8,minmax(0,1fr))}}.ipaChart__cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:72px;padding:8px 6px;border:1px solid rgba(0,0,0,.08);border-radius:8px;cursor:pointer;font-family:inherit;text-align:center;transition:transform .12s ease,box-shadow .12s ease}.ipaChart__cell--empty{visibility:hidden;pointer-events:none;min-height:0;padding:0;border:none}.ipaChart__cell--mono{background:linear-gradient(180deg,#fff8e1,#ffecb3);color:#e65100}.ipaChart__cell--diph{background:linear-gradient(180deg,#e8f5e9,#c8e6c9);color:#2e7d32}.ipaChart__cell--consonant{background:linear-gradient(180deg,#ffebee,#ffcdd2);color:#b71c1c}.ipaChart__cell:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.1)}.ipaChart__cell--active{box-shadow:0 0 0 2px #2563eb;transform:translateY(-1px)}.ipaChart__symbol{font-size:clamp(1rem,2.5vw,1.35rem);font-weight:800;line-height:1.1}.ipaChart__word{font-size:.68rem;font-weight:600;color:inherit;opacity:.85;line-height:1.2}.ipaChart__voice{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%}.ipaChart__voice--off{background:#ef5350}.ipaChart__voice--on{background:#fff;border:1px solid #c62828}