:root{--green:#087865;--deep:#07594d;--gold:#f2bb3f;--cream:#fffaf0;--ink:#263632;--coral:#ee765d;--line:#dcebe6}
.gate{position:fixed;z-index:10;inset:0;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#d9f8ef,#fff4c9)}.gate-card{width:min(100%,390px);background:white;border-radius:28px;padding:28px 22px;text-align:center;box-shadow:0 20px 55px #07594d30}.gate-card .logo{margin:0 auto 16px}.gate-card h1{color:var(--deep);font-size:2rem;margin:6px}.gate-card p{color:#617a73}.gate-card input{width:100%;border:2px solid #cfe7df;border-radius:14px;padding:14px;text-align:center;font:inherit;font-size:1.05rem;margin:8px 0 13px;text-transform:uppercase}.gate-card input:focus{outline:3px solid #f2bb3f55;border-color:var(--green)}.gate-error{color:#bf4938!important;font-weight:800;font-size:.85rem}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0,#d8f5ec 0,transparent 31%),radial-gradient(circle at 95% 15%,#fff0bc 0,transparent 30%),#f7fffc;color:var(--ink);font-family:"Trebuchet MS",Arial,sans-serif}.app{width:min(100%,680px);margin:auto;padding:18px 16px 38px}.brand{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--deep);text-align:left}.brand strong{display:block;font-size:.92rem;letter-spacing:.08em}.brand small{display:block;font-size:.68rem;color:#65827a}.logo{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--green),#0aa98b);border:3px solid white;box-shadow:0 5px 16px #08786538;color:white;font-weight:900}.intro{text-align:center;position:relative;padding:22px 10px 17px}.sparkle{position:absolute;color:var(--gold);font-size:2rem;right:9%;top:4px}.eyebrow{color:var(--green);font-size:.76rem;font-weight:900;letter-spacing:.17em;margin:0 0 5px}.intro h1{font-size:clamp(1.7rem,7vw,2.55rem);line-height:1.05;margin:0;color:var(--deep)}.intro>p:last-child{margin:10px auto 0;max-width:480px;font-size:.96rem;color:#557169}.steps{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}.step{border:2px solid var(--line);border-radius:15px;background:white;padding:11px 8px;font:inherit;font-weight:800;color:#668079;cursor:pointer}.step span{display:inline-grid;place-items:center;margin-right:6px;width:25px;height:25px;border-radius:50%;background:#e4f3ee}.step.active{border-color:var(--green);color:var(--deep);box-shadow:0 4px 0 #abd9cc}.step.active span{background:var(--green);color:white}.lesson-card{background:white;border:1px solid #d6ece5;border-radius:27px;padding:22px 18px 20px;box-shadow:0 18px 45px #096c5517;text-align:center}.shield{font-size:2.2rem;margin-bottom:3px}.lesson-label{color:var(--green);font-weight:800;font-size:.82rem;margin:4px 0 11px}.arabic{font-family:"Noto Naskh Arabic","Traditional Arabic",serif;font-size:clamp(1.75rem,7vw,2.7rem);line-height:1.8;color:#193d35;margin:2px 0}.translit{margin:2px 0 19px;color:#738b84;font-size:.87rem}.listen-block{background:var(--cream);border:1px solid #f5e8bd;border-radius:19px;padding:12px}.primary,.record,.secondary,.next{border:0;font:inherit;cursor:pointer}.primary{width:100%;padding:14px;border-radius:14px;background:var(--gold);color:#463304;font-weight:900;font-size:1rem;box-shadow:0 4px 0 #ce9420}.primary.playing{background:#ffd971}.player-row{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:.72rem;color:#6e786e}.player-row input{flex:1;accent-color:var(--green)}.loop-btn{border:0;background:transparent;color:var(--deep);font-weight:800;padding:5px}.loop-btn.on{background:#dff4ed;border-radius:9px}.divider{display:flex;align-items:center;gap:12px;margin:21px 0 14px;color:var(--coral);font-size:.75rem;font-weight:900;letter-spacing:.13em}.divider:before,.divider:after{content:"";height:1px;background:#f0d8d2;flex:1}.record{width:100%;min-height:91px;border-radius:20px;background:linear-gradient(135deg,var(--green),#09a287);color:white;box-shadow:0 6px 0 #075e50,0 11px 20px #08786538;display:grid;grid-template-columns:61px 1fr;text-align:left;align-items:center;padding:12px 21px}.record .mic{grid-row:1/3;font-size:2.25rem}.record b{font-size:1.25rem;align-self:end}.record small{align-self:start;opacity:.9}.record.listening{background:linear-gradient(135deg,#df5c49,#f18a6c);box-shadow:0 6px 0 #a93f31,0 0 0 8px #f18a6c30;animation:pulse 1.2s infinite}.status{min-height:20px;margin:15px 0 4px;font-size:.83rem;color:#6d817c}.heard{background:#f3faf7;border-radius:13px;padding:9px;margin-top:10px}.heard small{color:#71847f}.heard p{margin:4px;font-size:1.2rem;direction:rtl}.result{margin-top:17px;border-radius:18px;padding:15px;background:#ecfbf5}.stars{font-size:1.7rem;letter-spacing:.12em;color:var(--gold);text-shadow:0 2px #c48d1a}.result p{font-weight:900;color:var(--deep);font-size:1.04rem}.secondary,.next{padding:11px 16px;border-radius:12px;font-weight:900;margin:4px}.secondary{background:white;color:var(--green);border:2px solid var(--green)}.next{background:var(--green);color:white}.privacy{text-align:center;color:#769088;font-size:.72rem;margin:14px}.hidden{display:none!important}@keyframes pulse{50%{transform:scale(1.015)}}@media(max-width:380px){.app{padding-left:10px;padding-right:10px}.lesson-card{padding-left:12px;padding-right:12px}.record{padding:11px 13px}.arabic{font-size:1.65rem}}