@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap";:root{color:#143653;font-synthesis:none;background:#eaf4fc;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}header{justify-content:space-between;align-items:center;gap:20px;max-width:1120px;margin:auto;padding:28px 32px;display:flex}.brand{color:inherit;align-items:center;gap:10px;font-family:Outfit,sans-serif;font-size:22px;font-weight:600;text-decoration:none;display:flex}.brand-icon{color:#fff;background:#0868ad;border-radius:12px;padding:8px 10px;font-size:21px}.tag,.hint,.local-note{color:#536b82;font-size:14px;line-height:1.6}main{max-width:640px;margin:35px auto 0;padding:0 20px}.card{background:#fff;border:1px solid #cbdfee;border-radius:26px;padding:38px;box-shadow:0 12px 50px #1436530a}.eyebrow{letter-spacing:2px;color:#476580;margin:0 0 16px;font-size:11px;font-weight:700}h1{letter-spacing:-1px;margin:8px 0 12px;font-family:Outfit,sans-serif;font-size:clamp(28px,5vw,38px);font-weight:600;line-height:1.15}.intro{color:#536b82;margin:0 0 28px;line-height:1.7}label{margin-bottom:8px;font-size:15px;font-weight:600;display:block}.hint{margin:5px 0 12px}textarea,input{width:100%;font:inherit;color:#143653;background:#fff;border:1px solid #afcce2;border-radius:12px;padding:15px 18px;display:block}textarea{resize:vertical;min-height:160px;line-height:1.65}input{margin:0 0 16px;font-size:24px}button{cursor:pointer;color:#fff;font:inherit;background:#0868ad;border:0;border-radius:12px;min-height:48px;padding:15px 22px;font-weight:600}button:hover{background:#07538a}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline-offset:4px;outline:3px solid #6548c7}.secondary{color:#0868ad;background:#e1f1fc}.secondary:hover{background:#cbe7fa}.text-button{color:#355b7b;text-underline-offset:4px;background:0 0;padding:10px 0;font-size:14px;text-decoration:underline}.text-button:hover{color:#143653;background:0 0}.actions{flex-wrap:wrap;gap:12px;display:flex}.local-note{margin:22px 0 0;font-size:12px}.welcome{text-align:center;padding-top:44px;padding-bottom:40px}.welcome .text-button{margin:10px auto 0;display:block}.big-icon{color:#143653;background:#ffad4f;border-radius:24px;place-items:center;width:86px;height:86px;margin:26px auto;font:500 38px Outfit,sans-serif;display:grid}.practice-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.practice-heading .eyebrow{margin:0}progress{appearance:none;background:#dcebf6;border:none;border-radius:6px;width:100%;height:6px;margin:12px 0 28px;overflow:hidden}progress::-webkit-progress-bar{background:#dcebf6}progress::-webkit-progress-value{background:#ff9638}progress::-moz-progress-bar{background:#ff9638}.listen{color:#0868ad;background:#e1f1fc;border:1px solid #9bc9e9;width:100%;padding:22px;font-size:20px}.listen:hover{background:#cbe7fa}.listen span{margin-right:10px;font-size:26px}#speech-status{text-align:center;min-height:23px;margin:8px 0 22px}.feedback{color:#536b82;overflow-wrap:anywhere;background:#edf4fa;border-radius:12px;margin:20px 0;padding:16px;font-size:15px;line-height:1.6}.retry{color:#814207;background:#fff0d9}.success{color:#125a83;background:#def3ff;font-weight:600}.shown{color:#443778;background:#f0ecff}.warning{color:#814207;line-height:1.6}footer{text-align:center;color:#536b82;padding:30px 20px;font-size:13px}[hidden]{display:none!important}@media (width<=580px){header{padding:20px}.tag{display:none}main{margin-top:12px;padding:0 14px}.card{border-radius:20px;padding:25px}}.family-bar{justify-content:space-between;align-items:center;gap:14px;padding:0 12px 20px;font-size:14px;display:flex}.family-bar span,.person span{color:#536b82;margin-top:4px;font-size:12px;display:block}.family-bar strong{font-weight:600}select{width:100%;font:inherit;color:inherit;background:#fff;border:1px solid #afcce2;border-radius:12px;margin-bottom:16px;padding:14px;display:block}details{border-top:1px solid #cbdfee;margin:24px 0;padding-top:18px}summary{cursor:pointer;margin-bottom:18px;font-weight:600}.person{border-bottom:1px solid #cbdfee;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;display:flex}.person-actions{flex-wrap:wrap;gap:14px;display:flex}#invitation-output{margin:20px 0}body.answer-focused{padding-bottom:var(--keyboard-inset,0px)}#answer{scroll-margin-block:20px}.result-label{font-size:18px;font-weight:600;display:block}.result-word{letter-spacing:.025em;overflow-wrap:anywhere;margin-top:12px;font-size:clamp(42px,10vw,76px);font-weight:700;line-height:1.18;display:block}.feedback.success,.feedback.shown{text-align:center;padding:28px 20px}.practice-card .actions:has(#next:not([hidden])) #next{width:100%}@media (width<=580px){body:has(.practice-card) header{padding:12px 20px}body:has(.practice-card) .family-bar{padding-bottom:8px}.practice-card{padding:20px}.practice-card progress{margin:6px 0 14px}.practice-card h1{font-size:28px}.practice-card .intro{margin-bottom:14px;font-size:14px}.practice-card .listen{padding:12px}.practice-card #speech-status{min-height:0;margin:6px 0 12px;font-size:12px}.practice-card #answer{margin-bottom:10px;padding:12px 14px}.practice-card #check{width:100%}.practice-card .feedback{margin:12px 0}body.answer-focused header,body.answer-focused .family-bar,body.answer-focused .practice-card h1,body.answer-focused .practice-card .intro,body.answer-focused footer{display:none}body.answer-focused main{margin-top:8px}}.review-word{overflow-wrap:anywhere;margin:20px 0 8px;font-size:clamp(36px,8vw,60px);font-weight:700}#audio-review hr{border:0;border-top:1px solid #cbdfee;margin:24px 0}#recording-preview{width:100%;margin:16px 0}#audio-review .actions{margin-bottom:12px}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.practice-main{max-width:620px;margin:24px auto}.practice-card{padding:28px}.practice-card .word-count{color:#355b7b;margin:0;font-size:18px;font-weight:600}.practice-card #finish{min-width:60px;font-size:18px}.practice-card progress{margin:4px 0 24px}.practice-card .listen{border-radius:18px;justify-content:center;align-items:center;gap:14px;min-height:88px;padding:20px;font-size:28px;display:flex}.practice-card #speech-status{min-height:0;margin:10px 0}.practice-card #speech-status:empty{margin:0}.practice-card #answer-form{margin-top:24px}.practice-card #answer{text-align:center;border:2px solid #89b5d6;border-radius:16px;min-height:80px;margin-bottom:16px;padding:16px;font-size:36px}.practice-card #answer::placeholder{color:#5b738b;font-size:28px}.practice-card #check,.practice-card #next,.practice-card #reveal{border-radius:16px;width:100%;min-height:68px;font-size:26px}.practice-card .feedback{text-align:center;margin:16px 0;padding:16px;font-size:24px;line-height:1.3}.practice-card .feedback:empty{display:none}.practice-card .feedback.success,.practice-card .feedback.shown{padding:36px 12px}.practice-card .result-label{font-size:24px}.practice-card .result-word{letter-spacing:0;font-size:clamp(48px,12vw,88px)}.welcome #start{width:100%;min-height:72px;font-size:26px}@media (width<=580px){.practice-main{margin:8px auto;padding:0 12px}.practice-card{padding:18px}.practice-card progress{margin-bottom:16px}.practice-card .listen{min-height:72px;padding:14px;font-size:26px}.practice-card #answer-form{margin-top:18px}.practice-card #answer{min-height:72px;font-size:32px}}.brand-icon{color:#143653;background:#ff9638}.practice-card .listen{color:#fff;background:#0868ad;border-color:#0868ad}.practice-card .listen:hover{background:#07538a;border-color:#07538a}.practice-card #check,.practice-card #next,.welcome #start{color:#143653;background:#ff9638}.practice-card #check:hover,.practice-card #next:hover,.welcome #start:hover{background:#ffad4f}.practice-card #answer:focus{border-color:#0868ad}.practice-card #check{color:#fff;background:#b94700}.practice-card #check:hover{background:#a53f00}