:root{--section-gap: 8px;font-family:system-ui,sans-serif;color:#064678;background:#fecc00;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px}button,select{font:inherit}button{cursor:pointer}button:disabled,select:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #006aa7;outline-offset:3px}.app-shell{position:relative;min-height:100vh;overflow:hidden;background:#fecc00}.confetti-burst{position:fixed;inset:0;z-index:10;overflow:hidden;pointer-events:none;contain:strict}.confetti-particle{position:absolute;top:var(--y);left:var(--x);border:.75px solid rgb(6 70 120 / 40%);border-radius:2px;background-image:linear-gradient(135deg,rgb(255 255 255 / 45%),transparent 65%);box-shadow:0 1px 1px #0037552e;opacity:0;will-change:transform,opacity}.confetti-particle.is-round{border-radius:50%}.ambient-waves{position:absolute;inset:0;overflow:hidden;pointer-events:none}.ambient-waves span{position:absolute;left:-7vw;bottom:-36vw;width:115vw;height:44vw;min-height:250px;border-radius:48% 52% 0 0;background:#f7bf00;opacity:.32;animation:drift 15s ease-in-out infinite}.ambient-waves span:nth-child(2){bottom:-40vw;background:#ffdc53;animation-delay:-5s}.ambient-waves span:nth-child(3){bottom:-44vw;background:#f5bb00;animation-delay:-10s}@keyframes drift{50%{transform:translate(2vw,-20px) rotate(2deg)}}.site-header,main{position:relative;z-index:1}.site-header{display:flex;justify-content:center;max-width:860px;margin:0 auto;padding:var(--section-gap) 22px var(--section-gap)}.brand{display:inline-flex;align-items:center;text-decoration:none}.brand-logo{display:block;width:280px;max-width:100%;height:auto;filter:drop-shadow(0 4px 2px rgb(0 55 85 / 80%))}main{display:flex;flex-direction:column;gap:var(--section-gap);max-width:860px;margin:0 auto;padding:0 22px 40px}.practice-card{background:#fffdf6;border:2px solid #006aa7;border-radius:18px;box-shadow:6px 7px #006aa7;padding:32px}.practice-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.field-label{display:block;color:#064678;font-size:14px;font-weight:750}.word-display{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:112px;padding:8px 6px;overflow:hidden;border-radius:10px;background:#eff7f8}.word-content{min-width:0;text-align:center}.word-display strong{display:block;max-width:100%;overflow-wrap:anywhere;text-align:center;color:#006aa7;font-size:clamp(30px,4vw,48px);font-weight:750}.word-arrow{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:44px;min-height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:#07568b;font-size:25px;font-weight:700}.word-arrow:hover:not(:disabled){background:#d8edf3}.word-position{display:block;margin-top:8px;text-align:center;color:#558493;font-size:12px;white-space:nowrap}.voice-buttons{display:flex;gap:10px;margin-top:12px}.voice-button{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:7px;min-height:51px;padding:5px 8px;border:1.5px solid #9ec5d2;border-radius:9px;background:#eaf4f7;color:#07568b;font-size:24px;font-weight:700;transition:background .2s}.voice-button:hover:not(:disabled),.voice-button.is-playing{background:#d8edf3}.voice-avatar,.voice-chat{display:block;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 2px 2px rgb(0 55 85 / 40%))}.voice-avatar{width:38px;height:38px}.voice-chat{width:26px;height:26px;transform:translateY(-5px);margin-left:-10px}.record-button{display:flex;position:relative;align-items:center;justify-content:center;gap:10px;width:100%;min-height:51px;margin-top:12px;border:2px solid #006aa7;border-radius:9px;background:#006aa7;box-shadow:0 3px #03446f;color:#fff;font-size:15px;font-weight:750}.record-button:hover:not(:disabled):not(.is-recording){background:#005b90}.record-button.is-recording{background:#fff0bf;color:#064678}.record-button.is-analysing{opacity:1;cursor:wait}.analysing-dots span{display:inline-block;animation:analysing-dot 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * .2s)}@keyframes analysing-dot{0%,to{opacity:.25}50%{opacity:1}}.record-tip{min-height:18px;margin:10px 0 0;color:#597f90;font-size:11px;text-align:center}.result-zone:not(:empty){margin-top:20px}.error-message{margin:0;padding:12px;border-radius:8px;background:#fff1e9;color:#963b24;font-size:13px}.sound-waves{display:flex;align-items:center;justify-content:center;gap:3px;height:38px}.sound-waves span{width:3px;height:var(--h);border-radius:8px;background:#006aa7}.sound-waves.active span{animation:bar-wave .8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -45ms)}@keyframes bar-wave{to{transform:scaleY(.27)}}.result-card{padding:6px 0;text-align:center}.accuracy-summary{margin:0;font-size:18px;font-weight:700}.accuracy-value{color:#117b36;font-size:26px;font-weight:800}.phone-row{margin-top:18px;text-align:left}.phone-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.phone-chip{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:7px 10px;border:1px solid #a4cbd7;border-radius:8px;color:#064678;background:#fff;font-size:17px;line-height:1.4}.phone-unsupported{border-style:dashed;color:#715800;background:#fff8db}.phone-chip.phone-reference{background:#006aa7;border-color:#006aa7;color:#fffdf6}.phone-chip.phone-matched{background:#117b36;border-color:#117b36;color:#fffdf6}.phone-chip.phone-changed,.phone-chip.phone-missing,.phone-chip.phone-extra{background:#b42323;border-color:#b42323;color:#fffdf6}.letter-matched,.letter-reference{color:#117b36}.letter-silent{color:#7f8b82;text-decoration:none}.letter-missing,.letter-changed,.letter-extra{color:#b42323}.letter-missing,.letter-changed{text-decoration:none}.letter-unmapped{color:#006aa7;text-decoration:none}.letter-warning{margin:10px 0 0;color:#715800;font-size:12px;line-height:1.5}.no-sounds-message{text-align:center}.confetti-option{display:flex;align-items:center;justify-content:center;gap:8px;width:fit-content;min-height:36px;margin:0 auto;color:#07568b;font-size:12px;cursor:pointer}.confetti-option input{width:18px;height:18px;margin:0;accent-color:#006aa7;cursor:pointer}.confetti-option input:focus-visible{outline:2px solid #006aa7;outline-offset:3px}.privacy-note{margin:0;color:#07568b;font-size:11px;text-align:center}@media(max-width:680px){.site-header{padding-inline:18px}.brand-logo{width:240px}main{padding:0 16px 32px}.practice-card{padding:23px 20px;border-radius:13px;box-shadow:4px 5px #006aa7}.practice-layout{grid-template-columns:1fr;gap:28px}.word-display{min-height:84px}}@media(prefers-reduced-motion:reduce){.confetti-burst{display:none}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.analysing-dots span,.sound-waves.active span{animation:none!important}}