:root{--bg: #faf7f2;--surface: #ffffff;--ink: #1c1917;--muted: #9a8f84;--faint: #cabfb2;--line: #ece6dd;--ember: #d3602c;--ember-soft: #f6e6dc;--ring-track: #ece6dd;--shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 12px 40px rgba(28, 25, 23, .06);--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--arabic: "Amiri", "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", serif}@media (prefers-color-scheme: dark){:root{--bg: #14110e;--surface: #1d1916;--ink: #f4ede2;--muted: #8c8175;--faint: #5a5148;--line: #2a241e;--ember: #e0713b;--ember-soft: #33231a;--ring-track: #2a241e;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 48px rgba(0, 0, 0, .36)}}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;display:flex;justify-content:center}.app{width:100%;max-width:460px;min-height:100dvh;padding:18px 24px 30px;display:flex;flex-direction:column;gap:14px;position:relative}.caption{position:absolute;top:66px;left:0;right:0;text-align:center;font-family:var(--arabic);font-size:30px;color:var(--ember);opacity:0;pointer-events:none;direction:rtl;z-index:5}.caption.show{animation:caption-flash 1.7s ease forwards}@keyframes caption-flash{0%{opacity:0;transform:translateY(8px) scale(.98)}14%{opacity:1;transform:translateY(0) scale(1)}62%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(1)}}.brand{display:flex;align-items:baseline;justify-content:center;gap:9px}.brand-mark{font-family:var(--arabic);font-size:22px;color:var(--ember)}.brand-name{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}.phrase{text-align:center}.phrase-arabic{font-family:var(--arabic);font-size:47px;line-height:1.35;direction:rtl;color:var(--ink)}.phrase-translit{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}.phrase-meaning{margin-top:4px;font-size:14px;color:var(--muted)}.counter{position:relative;width:260px;height:260px}.ring{width:100%;height:100%;transform:rotate(-90deg)}.ring-track,.ring-fg{fill:none;stroke-width:8}.ring-track{stroke:var(--ring-track)}.ring-fg{stroke:var(--ember);stroke-linecap:round;transition:stroke-dashoffset .45s cubic-bezier(.22,1,.36,1)}.counter-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.count{font-size:76px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}.count.bump{animation:count-bump .26s cubic-bezier(.22,1,.36,1)}@keyframes count-bump{0%{transform:scale(1)}30%{transform:scale(1.05)}to{transform:scale(1)}}.target{margin-top:6px;font-size:13px;letter-spacing:.08em;color:var(--muted);text-transform:lowercase}.stage.verifying .target:after{content:" ·";color:var(--ember);animation:blink .9s ease-in-out infinite}.counter.heard{animation:heard-tick .35s ease}@keyframes heard-tick{0%{transform:scale(1)}35%{transform:scale(1.015)}to{transform:scale(1)}}.today{margin-top:-12px;font-size:12px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}.stage.complete .count{color:var(--ember)}.stage.complete .counter{animation:pulse .6s ease}.stage.complete .target{color:var(--ember);letter-spacing:.14em}@keyframes pulse{0%,to{transform:scale(1)}40%{transform:scale(1.04)}}.picker{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px}.pill{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .1s ease}.pill:hover{color:var(--ink);border-color:var(--faint);box-shadow:0 1px 4px #1c19170f}.pill:active{transform:scale(.97)}.pill.active{color:var(--ember);background:var(--ember-soft);border-color:color-mix(in srgb,var(--ember) 26%,transparent)}.targets .pill{min-width:46px;text-align:center;font-variant-numeric:tabular-nums}.pill-input{direction:ltr;width:82px;text-align:center;color:var(--ink);outline:none;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.pill-input::-webkit-outer-spin-button,.pill-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pill-input::placeholder{color:var(--faint)}.pill-input:focus{border-color:var(--ember);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 16%,transparent)}.pill.custom{display:inline-flex;align-items:center;gap:7px;direction:rtl;max-width:200px;padding:6px 12px}.pill.custom .custom-label{font-family:var(--arabic);font-size:15px;line-height:1.4;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pill.custom .custom-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:-4px 0;border-radius:50%;font-size:13px;line-height:1;color:var(--faint);transition:color .15s ease,background .15s ease}.pill.custom:hover .custom-x{color:var(--muted)}.pill.custom .custom-x:hover{color:var(--ink);background:var(--line)}.pill.custom.active .custom-x{color:color-mix(in srgb,var(--ember) 55%,transparent)}.pill.custom.active .custom-x:hover{color:var(--ember);background:color-mix(in srgb,var(--ember) 16%,transparent)}.controls{display:flex;flex-direction:column;align-items:center;gap:14px}.listen{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:16px;font-weight:600;color:#fff;background:var(--ember);border:none;border-radius:999px;padding:15px 40px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s ease,filter .15s ease}.listen:hover{filter:brightness(1.05)}.listen:active{transform:scale(.98)}.listen-dot{width:9px;height:9px;border-radius:50%;background:#ffffff8c}.listen.on{background:var(--surface);color:var(--ember);box-shadow:inset 0 0 0 1.5px var(--ember),var(--shadow)}.listen.on .listen-dot{background:var(--ember);animation:blink 1.1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}.secondary{display:flex;gap:6px}.ghost{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:12px;min-width:44px;height:38px;padding:0 14px;cursor:pointer;transition:color .15s ease,background .15s ease}.ghost:hover{color:var(--ink);background:color-mix(in srgb,var(--line) 55%,transparent)}.ghost.tap{min-width:72px}.dev-row{display:flex;gap:16px;align-items:center}.link{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);background:none;border:none;cursor:pointer;padding:4px}.link:hover,.link.on{color:var(--ember)}.teach-trigger{align-self:center;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);background:transparent;border:1px dashed var(--line);border-radius:999px;padding:7px 16px;cursor:pointer;transition:color .15s ease,border-color .15s ease}.teach-trigger:hover{color:var(--ember);border-color:var(--ember)}.teach{position:fixed;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--ink) 55%,transparent);display:flex;align-items:center;justify-content:center;padding:24px;z-index:20}.teach[hidden]{display:none}.teach-card{position:relative;width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px 26px;box-shadow:var(--shadow);text-align:center}.teach-close{position:absolute;top:14px;right:16px;font-size:15px;color:var(--muted);background:none;border:none;cursor:pointer}.teach-title{font-size:19px;font-weight:600;color:var(--ink)}.teach-hint{margin:10px 0 22px;font-size:14px;line-height:1.5;color:var(--muted)}.teach-rec,.teach-use{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:600;color:#fff;background:var(--ember);border:none;border-radius:999px;padding:13px 30px;cursor:pointer}.teach-rec.recording{background:var(--surface);color:var(--ember);box-shadow:inset 0 0 0 1.5px var(--ember)}.teach-rec.recording .listen-dot{background:var(--ember);animation:blink 1.1s ease-in-out infinite}.teach-status{font-size:13px;color:var(--muted);min-height:18px}.teach-heard{font-family:var(--arabic);font-size:30px;line-height:1.5;color:var(--ember);margin:14px 0 22px;min-height:40px}.teach-actions{display:flex;gap:10px;justify-content:center}.teach-card .ghost{border-color:var(--line);height:42px;font-size:14px}.teach-card .ghost:hover{border-color:var(--faint);background:transparent}.micstate{font-size:12.5px;color:var(--muted);min-height:16px;text-align:center}.micstate.warn{color:var(--ember)}.note{font-size:11px;line-height:1.5;color:var(--faint);text-align:center;max-width:300px}