:root{--bg:#faf8f4;--surface:#fff;--border:#e7e2d8;--text:#2b2a28;--muted:#79756c;--accent:#3b5bdb;--accent-ink:#fff;--radius:14px;--shadow:0 1px 2px #2b2a280a, 0 8px 24px #2b2a280f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,Noto Sans Arabic,Noto Nastaliq Urdu,sans-serif;line-height:1.5}#root{min-height:100vh}.page{max-width:860px;margin:0 auto;padding:32px 20px 64px}.page.center{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.muted{color:var(--muted)}.small{font-size:.85rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 36px}.picker-card{text-align:center;width:100%;max-width:420px}.brand{justify-content:center;gap:8px;margin-bottom:18px;display:flex}.brand-dot{border-radius:50%;width:12px;height:12px}.picker-card h1{margin:0 0 10px;font-size:1.6rem}.picker-card p{margin:0 0 28px;font-size:.95rem}.field{text-align:left;flex-direction:column;gap:6px;margin-bottom:18px;display:flex}.field span{color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-size:.8rem;font-weight:600}select{appearance:none;border:1px solid var(--border);background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%2379756c' d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center;width:100%;color:var(--text);cursor:pointer;border-radius:10px;padding:12px 14px;font-size:1rem}select:focus{outline:2px solid var(--accent);outline-offset:1px}.btn{cursor:pointer;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:12px 20px;font-size:.95rem;font-weight:600;text-decoration:none;transition:transform 50ms,opacity .15s;display:inline-flex}.btn:active{transform:scale(.98)}.btn.primary{background:var(--accent);color:var(--accent-ink);width:100%}.btn.primary:disabled{opacity:.5;cursor:not-allowed}.btn.ghost{background:var(--surface);color:var(--accent);border-color:var(--border)}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:28px;display:flex}.topbar-title{margin:4px 0 2px;font-size:1.5rem}.back-link{color:var(--accent);font-size:.85rem;font-weight:600;text-decoration:none}.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;display:grid}.lesson-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);box-shadow:var(--shadow);flex-direction:column;gap:4px;padding:18px 16px 16px;text-decoration:none;transition:transform .12s,box-shadow .12s;display:flex}.lesson-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #2b2a280f,0 14px 28px #2b2a281a}.lesson-accent{border-radius:3px;width:30px;height:5px;margin-bottom:6px}.lesson-eyebrow{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:.72rem;font-weight:700}.lesson-title{font-size:1.05rem;font-weight:700}.reader-controls{flex-direction:column;align-items:flex-end;gap:10px;display:flex}.field-inline{color:var(--muted);align-items:center;gap:6px;font-size:.8rem;display:flex}.field-inline select{background-position:right 8px center;border-radius:8px;width:auto;padding:6px 24px 6px 10px;font-size:.85rem}.reader{flex-direction:column;gap:8px;display:flex}.part{margin-top:20px}.part-label{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--border);margin-bottom:12px;padding-bottom:6px;font-size:.8rem;font-weight:700}.line{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;padding:16px 18px}.line-target{font-size:1.3rem;font-weight:600;line-height:1.45;display:block}.line-phonetic{color:var(--muted);margin-top:3px;font-size:.95rem;font-style:italic;display:block}.line-source{color:var(--muted);border-top:1px dashed var(--border);margin-top:10px;padding-top:10px;font-size:.95rem;display:block}.lesson-nav{justify-content:space-between;align-items:stretch;gap:12px;margin-top:28px;display:flex}.protected{-webkit-user-select:none;user-select:none}.lesson-nav .btn{white-space:normal;text-align:center;flex:1 1 0;max-width:48%;line-height:1.25}@media (width<=520px){.card{padding:28px 22px}.line-target{font-size:1.15rem}}