.start-page{width:min(980px,94%);margin:25px auto 50px;padding:30px;border-radius:30px;background:linear-gradient(145deg,#fff,#f5fbff);box-shadow:0 15px 45px #18364e20}.start-title{text-align:center}.start-title>span{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#405697;color:#ffe35e;font:700 30px sans-serif}.start-title h1{margin:5px;color:#e12e45}.start-title p{color:#617580}.start-section{margin-top:22px;padding:18px;border-radius:22px;background:#fff}.start-section h2{text-align:center;margin:0 0 14px;color:#d52a45}.line-grid{display:grid;gap:13px}.sound-line{position:relative;border:3px solid currentColor;border-radius:18px;padding:14px 45px;font:700 30px/1.5 "Noto Naskh Arabic";background:#fffdf8;color:#19314a;cursor:pointer;transition:.18s}.sound-line small{position:absolute;left:14px;top:14px;font:12px sans-serif;color:#678}.sound-line:hover,.sound-line.speaking{transform:translateY(-2px);box-shadow:0 8px 20px #1233}.sound-line.c-0{border-color:#ef8d75;background:#fff1eb}.sound-line.c-1{border-color:#d969a6;background:#fff0f8}.sound-line.c-2{border-color:#d8b85c;background:#fffbea}.sound-line.c-3{border-color:#69b779;background:#f0fff1}.sound-line.c-4{border-color:#54a9d7;background:#edfaff}.page-2 .line-grid{grid-template-columns:1fr 1fr}.page-2 .sound-line{font-size:25px}
.start-class-controls{position:sticky;top:8px;z-index:5;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px 0;padding:13px;border:1px solid #b9ddeb;border-radius:18px;background:#fffffff2;box-shadow:0 8px 24px #17344b1c}.start-class-controls>div{display:flex;gap:10px}.start-class-controls label{font-family:"Noto Nastaliq Urdu";color:#29465c}.start-class-controls select{margin-right:6px;padding:7px;border:1px solid #9acbdc;border-radius:9px;background:white}.start-class-controls button{border:0;border-radius:11px;padding:10px 16px;cursor:pointer;font-family:"Noto Nastaliq Urdu"}.start-class-controls .start-play{background:linear-gradient(90deg,#1689bd,#16a78f);color:white;font-weight:700}.start-class-controls #pauseClass{background:#e9f6fb;color:#176c91}.start-class-controls #stopClass{background:#fff0f0;color:#b62b3b}.start-class-controls #startStatus{width:100%;min-height:22px;text-align:center;color:#405697}.sound-line.has-recording small{color:#0b896d;font-weight:700}.sound-line.no-recording small{color:#9b6c22}
@media(max-width:650px){.start-page{padding:15px}.page-2 .line-grid{grid-template-columns:1fr}.sound-line{font-size:23px;padding:12px 36px 12px 8px}.start-class-controls{position:static}.start-class-controls>div{flex-direction:column}}