:root{--ink: #000000;--paper: #ffffff;--haraka: #007684;--alert: #c62828;--soft: #f4f8f8;--line: #e2eaea;--muted: #5a6a6c;--ok: #1b7a3d;--warn: #9a6b00}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Cairo,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}#app{min-height:100%;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line)}.wordmark{font-family:Almarai,sans-serif;font-weight:800;font-size:22px}.counter{font-size:14px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.counter b{color:var(--haraka);font-weight:700}.progress{height:3px;background:var(--line)}.progress>div{height:100%;background:var(--haraka);transition:width .4s ease-out}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px 48px;gap:28px;width:100%;max-width:760px;margin:0 auto}.screen-title{font-family:Almarai,sans-serif;font-weight:800;font-size:26px;text-align:center;text-wrap:balance}.screen-body{font-size:16px;color:var(--muted);text-align:center;max-width:34em;line-height:1.9}.screen-body.lead{font-size:clamp(16px,4.2vw,19px);max-width:40em}.screen-body.lead span{display:block;text-wrap:balance}.sentence-card{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:34px 30px;text-align:center}.sentence{font-family:Almarai,sans-serif;font-weight:800;font-size:30px;line-height:2.3}.lw{position:relative;display:inline-block}.lw .under{color:var(--haraka)}.lw .over{position:absolute;top:0;right:0;bottom:0;left:0;color:var(--ink);pointer-events:none;-webkit-user-select:none;user-select:none}.lw3{position:relative;display:inline-block}.lw3 .red{color:var(--alert)}.lw3 .mid,.lw3 .top{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-user-select:none;user-select:none}.lw3 .mid{color:var(--haraka)}.lw3 .top{color:var(--ink)}.stopmark{display:inline-block;font-family:Cairo,sans-serif;font-size:12px;font-weight:700;color:var(--alert);background:#fbeaea;border:1px solid var(--alert);border-radius:999px;padding:0 9px;line-height:1.7;vertical-align:4px;letter-spacing:0}.hint{font-size:14px;color:var(--muted);margin-top:14px}.record-zone{display:flex;flex-direction:column;align-items:center;gap:12px}.record-btn{width:86px;height:86px;border-radius:50%;border:none;background:var(--haraka);color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s ease-out,background .2s}.record-btn:hover{transform:scale(1.05)}.record-btn:focus-visible{outline:3px solid var(--haraka);outline-offset:3px}.record-btn.recording{background:var(--alert);animation:pulse 1.6s ease-out infinite}@keyframes pulse{0%{box-shadow:0 0 #c6282859}70%{box-shadow:0 0 0 22px #c6282800}to{box-shadow:0 0 #c6282800}}@media(prefers-reduced-motion:reduce){.record-btn.recording{animation:none}.progress>div{transition:none}}.record-btn svg{width:34px;height:34px;fill:currentColor}.record-label{font-size:14px;font-weight:600;color:var(--muted)}.timer{font-size:15px;font-weight:700;color:var(--alert);font-variant-numeric:tabular-nums;min-height:22px}.level{width:180px;height:5px;border-radius:999px;background:var(--line);overflow:hidden}.level>div{height:100%;width:0;background:var(--haraka);border-radius:999px}.wave{width:min(420px,82vw);height:64px;display:block}.legend{display:flex;flex-direction:column;gap:14px;width:100%;max-width:520px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:22px 24px}.legend-row{display:flex;align-items:center;gap:16px;font-size:15px;color:var(--muted)}.legend-sample{font-family:Almarai,sans-serif;font-weight:800;font-size:22px;line-height:2;min-width:92px;text-align:center;color:var(--ink);flex:none}.rules{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px;padding-right:22px;font-size:15.5px;line-height:1.9}.rules li::marker{color:var(--haraka)}.verdicts{display:flex;flex-direction:column;gap:8px;align-items:center}.verdict{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;border-radius:999px;padding:6px 18px;border:1px solid}.verdict.pass{color:var(--ok);border-color:var(--ok);background:#eef7f1}.verdict.warn{color:var(--warn);border-color:var(--warn);background:#fdf6e7}.verdict.fail{color:var(--alert);border-color:var(--alert);background:#fbeaea}.player{display:flex;align-items:center;gap:14px;width:100%;max-width:420px}.play-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}.play-btn svg{width:18px;height:18px;fill:currentColor}.play-track{flex:1;height:5px;border-radius:999px;background:var(--line);overflow:hidden}.play-track>div{height:100%;width:0;background:var(--ink)}.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.btn{font-family:Cairo,sans-serif;font-size:16px;font-weight:700;border-radius:999px;padding:12px 34px;cursor:pointer;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);transition:transform .15s ease-out}.btn:hover{transform:translateY(-1px)}.btn:focus-visible{outline:3px solid var(--haraka);outline-offset:2px}.btn.primary{background:var(--haraka);border-color:var(--haraka);color:var(--paper)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.toast{position:fixed;bottom:28px;right:50%;transform:translate(50%);background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;border-radius:999px;padding:10px 26px;opacity:0;transition:opacity .3s;pointer-events:none}.toast.show{opacity:1}.takes-list{width:100%;max-width:480px;display:flex;flex-direction:column;gap:6px;font-size:14px}.takes-list a{color:var(--haraka);text-decoration:none;font-weight:600}.takes-list li{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid var(--line);list-style:none;font-variant-numeric:tabular-nums}@media(max-width:520px){.sentence{font-size:24px}.sentence-card{padding:24px 18px}}.meter-title{font-size:12px;color:var(--muted);letter-spacing:.02em}.picker{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.picker select{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 14px;max-width:min(360px,84vw)}.diag{font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--muted);text-align:center;margin-top:6px;letter-spacing:.02em;font-variant-numeric:tabular-nums}.meter{display:flex;flex-direction:column;align-items:center;gap:7px;width:min(420px,82%)}.meter-track{position:relative;width:100%;height:12px;border-radius:999px;background:linear-gradient(to right,#f0c3ba,#f0c3ba 36.7%,#f2dca6 36.7%,#f2dca6 53.3%,#93d1a8 53.3%,#93d1a8 80%,#f0c3ba 80%,#f0c3ba)}.meter-needle{position:absolute;top:-4px;bottom:-4px;left:0;width:4px;border-radius:3px;background:var(--ink);transition:left .12s linear}.meter-text{font-size:14px;font-weight:700;transition:color .2s}.meter-text.idle{color:var(--muted)}.meter-text.good{color:var(--ok)}.meter-text.low{color:var(--warn)}.meter-text.hot{color:var(--alert)}