@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#243b30;background:#f5f5ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #557f42;outline-offset:5px}button:disabled{cursor:not-allowed;opacity:.55}.header,main,footer{max-width:1160px;margin:auto}.header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedfd5}.brand{text-decoration:none;color:inherit;font-size:24px;font-weight:700;letter-spacing:-1px;display:flex;gap:10px;align-items:center}.brand-icon{display:grid;place-items:center;background:#294535;color:#e2f09b;width:35px;height:35px;border-radius:10px;font-size:27px}.brand-dot{align-self:flex-start;font-size:11px;margin-left:-6px}.header-note{font-size:12px;color:#647165;display:flex;align-items:center;gap:8px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#85937d}.intro{padding:64px 0 36px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.6px}.intro>.eyebrow{margin:0 0 19px;color:#6c795e}h1{font-family:Manrope,sans-serif;font-size:clamp(40px,5vw,62px);line-height:1.15;letter-spacing:-2.7px;margin:0;font-weight:650}h1 span{color:#819075}.lede{font-size:15px;line-height:1.8;color:#6e786d;margin:22px 0 0}.workspace{display:grid;grid-template-columns:1fr 1.16fr;border:1px solid #d9dece;border-radius:20px;overflow:hidden;background:#fbfcf6}.controls{padding:26px 30px}.panel-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-top .eyebrow{color:#72816c;font-size:9px}.language{font-size:10px;font-weight:700;display:flex;align-items:center;gap:7px}.language span{font-weight:400;color:#758070}.mic-area{text-align:center;padding:37px 0 25px}.mic-orbit{width:106px;height:106px;margin:0 auto 23px;border:1px solid #dee6cd;border-radius:50%;display:grid;place-items:center;background:#eef2e4;box-shadow:0 0 0 10px #f5f7ee}.mic{width:42px;color:#4f6940}h2{font-size:19px;letter-spacing:-.5px;font-weight:550;margin:0 0 10px}.mic-area p{font-size:13px;line-height:1.8;color:#7a8275;margin:0;min-height:47px}.primary{display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:9px;background:#d5eb91;width:100%;padding:17px;color:#29402d;font-weight:650;font-size:14px;transition:background .2s}.primary:hover{background:#c9e37b}.primary>span:last-child{margin-left:auto;font-size:19px}.primary>span:first-child{font-size:10px}#button-label{margin-right:auto}.mic-note{text-align:center;font-size:10px;color:#929887;margin:14px 0 0}.result-panel{background:#eaf0dc;padding:26px 30px;display:flex;flex-direction:column;border-left:1px solid #d9dece}.status{font-size:10px;color:#72816a;display:flex;align-items:center;gap:6px}.letter-stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:249px}.letter{font-family:Manrope,sans-serif;font-size:148px;line-height:1.1;font-weight:500;letter-spacing:-7px;color:#304e33}.letter.empty{color:#becbad;font-size:126px}#result-caption{font-size:11px;color:#819174;margin-top:8px}.transcript{border-top:1px solid #d6dfc8;padding-top:17px}.transcript>span{font-size:8px;letter-spacing:1.6px;color:#7d8d70}.transcript p{font-size:12px;color:#69795e;margin:9px 0 0;overflow-wrap:anywhere;min-height:17px}.alphabet-section{padding:30px 0 32px}.alphabet-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.alphabet-title h2{font-size:13px;margin:0;letter-spacing:0}.alphabet-title button{border:0;background:none;color:#7a8572;font-size:11px;padding:8px}.alphabet-title button span{padding-left:7px}.alphabet{display:grid;grid-template-columns:repeat(26,1fr);gap:5px}.alphabet span{display:grid;place-items:center;aspect-ratio:1;border:1px solid #dddfd3;border-radius:5px;font-size:11px;color:#819078;transition:background .2s}.alphabet span.active{background:#d5eb91;color:#29402d;border-color:#adc66c;font-weight:700}.tip{font-size:11px;color:#89917f;margin:15px 0 0}.how{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dedfd5;padding:29px 0 36px;gap:30px}.step{color:#8c9b7b;font-size:10px}.how h3{font-size:13px;font-weight:550;margin:11px 0 7px}.how p{font-size:11px;color:#818a79;line-height:1.6;margin:0}footer{border-top:1px solid #dedfd5;display:flex;justify-content:space-between;gap:20px;padding:23px 0 28px;font-size:10px}footer>span{font-weight:650}.footer-muted{font-weight:400;color:#8b9383;margin-left:8px}footer p{margin:0;text-align:right;color:#919887;line-height:1.7}.notice{margin-top:15px;padding:14px 18px;border:1px solid #d7c799;background:#faf2da;border-radius:8px;font-size:13px;line-height:1.6}.listening .mic-orbit{animation:pulse 1.5s infinite}.listening .status .dot{background:#567944}.listening .primary{background:#294535;color:#f3f7e9}@keyframes pulse{50%{box-shadow:0 0 0 18px #e8efdb}}@media(min-width:1500px){.header,main,footer{max-width:1200px}.intro{padding-top:76px}}@media(max-width:1240px){.header,main,footer{margin-left:40px;margin-right:40px}}@media(max-width:700px){.header,main,footer{margin-left:22px;margin-right:22px}.header{height:78px}.header-note{font-size:0;gap:0}.brand{font-size:21px}.intro{padding-top:40px;padding-bottom:28px}h1{letter-spacing:-1.8px}.lede{font-size:13px}.workspace{grid-template-columns:1fr;border-radius:15px}.controls,.result-panel{padding:23px}.result-panel{border-left:0;border-top:1px solid #d9dece}.mic-area{padding-top:28px}.mic-orbit{width:82px;height:82px}.mic{width:34px}.letter-stage{min-height:220px}.letter{font-size:128px}.letter.empty{font-size:110px}.alphabet{grid-template-columns:repeat(13,1fr);gap:5px}.alphabet span{font-size:10px}.how{gap:18px}.how h3{font-size:12px}.how p{font-size:10px}footer{flex-direction:column;gap:14px}footer p{text-align:left}.tip{line-height:1.6}.language{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.diagnostics{margin-top:16px;font-size:12px;color:#69795e}.diagnostics summary{cursor:pointer}.diagnostics p{line-height:1.8;overflow-wrap:anywhere}

.alphabet{grid-template-columns:repeat(13,minmax(0,1fr));gap:8px}.association{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:78px;padding:12px 3px;border:1px solid #dddfd3;border-radius:8px;color:#65765a;background:#fafbf5}.association strong{font-size:20px;font-weight:600}.association small{font-size:10px}.association.active{background:#d5eb91;color:#29402d;border-color:#adc66c}@media(max-width:1000px){.alphabet{grid-template-columns:repeat(7,minmax(0,1fr))}}@media(max-width:700px){.alphabet{grid-template-columns:repeat(4,minmax(0,1fr))}.association small{font-size:11px}.intro .lede{max-width:340px}}