@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#253e3b;background:#f6f5ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}header{max-width:1320px;margin:auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedfd5}.brand{font-weight:700;font-size:20px;color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px}.brand-icon{background:#285e50;color:#fff;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:30px}.tag,.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:#6c8376}main{max-width:1320px;margin:auto;padding:36px 40px 24px}.intro h1{font-family:Manrope,sans-serif;font-size:clamp(30px,4vw,44px);letter-spacing:-1.7px;margin:8px 0}.intro p{margin:0;color:#74817b;font-size:16px}.workspace{display:grid;grid-template-columns:1.08fr 1fr;gap:26px;margin-top:30px;align-items:start}.clock-card,.day-card,.tools-card{background:#fff;border:1px solid #e2e6dc;border-radius:24px;padding:24px;box-shadow:0 8px 28px #29443905}.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-family:Manrope,sans-serif;font-size:16px;margin:0;font-weight:800}.live-dot{font-size:11px;background:#edf5ec;color:#5d8565;border-radius:20px;padding:7px 10px;white-space:nowrap}.live-dot:before{content:'';display:inline-block;width:6px;height:6px;background:#72956c;border-radius:50%;margin-right:6px}#clock{display:block;width:100%;max-width:530px;margin:12px auto 0;touch-action:none;user-select:none}.hand{cursor:grab;outline:none}.hand:active{cursor:grabbing}.hand:focus-visible{filter:drop-shadow(0 0 6px #e8a629)}.hit{stroke:transparent;stroke-width:32;pointer-events:stroke}.hand path,.hand line:not(.hit),.hand circle{pointer-events:none}.legend{display:flex;gap:23px;justify-content:center;font-size:12px;color:#73817d;margin:10px 0 23px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:50%}.hour-color{background:#273d50}.minute-color{background:#287f7b}.second-color{background:#e85645}.digital-row{border-top:1px solid #eef0e8;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:15px}.digital-box{background:#222b2b;border-radius:12px;padding:12px 19px;min-width:198px}.display-label{display:block;font-size:8px;letter-spacing:1.6px;color:#afbab3;margin-bottom:5px}#digital{font-family:'Courier New',monospace;font-weight:bold;font-size:32px;letter-spacing:1px;color:#ff645f;text-shadow:0 0 9px #ff645f55;font-variant-numeric:tabular-nums;display:block}button{border:1px solid #dce4d9;border-radius:10px;padding:11px 13px;background:#fff;color:#3d5a50;font-size:12px;font-weight:600;transition:background .15s,transform .15s}button:hover{background:#edf4eb}button:active{transform:scale(.97)}button:focus-visible{outline:3px solid #e7bd64;outline-offset:3px}aside{display:grid;gap:20px}.period{background:#f8f2df;color:#8b773e;padding:7px 9px;border-radius:8px;font-size:10px;white-space:nowrap}.landscape{position:relative;border-radius:16px;overflow:hidden;margin-top:20px;isolation:isolate}#scene{display:block;width:100%}.scene-caption{position:absolute;bottom:19px;left:22px;color:white;display:grid;gap:5px;text-shadow:0 2px 8px #163e35aa}.scene-caption span{font-family:Manrope,sans-serif;font-size:26px;font-weight:800}.scene-caption small{font-size:11px}.cloud-one{animation:float 12s ease-in-out infinite alternate}.cloud-two{animation:float 16s ease-in-out infinite alternate-reverse}@keyframes float{to{transform:translateX(30px)}}.star{animation:twinkle 3s ease-in-out infinite alternate}@keyframes twinkle{to{opacity:.35}}.day-progress{padding-top:23px}.progress-line{height:5px;border-radius:5px;background:linear-gradient(90deg,#253454,#f1bb91 25%,#eed987 50%,#ecb091 75%,#253454);position:relative;margin:0 6px}#progressMarker{position:absolute;top:-4px;left:42%;width:13px;height:13px;border:3px solid #fff;background:#2b6251;border-radius:50%;box-shadow:0 0 0 1px #2b6251;transform:translateX(-50%)}.progress-labels{display:flex;justify-content:space-between;margin-top:11px;font-size:10px;color:#859188}.scene-note{font-size:11px;color:#8a958b;text-align:center;margin:16px 0 0}.tools-card p{font-size:12px;color:#7b877f;margin:9px 0 17px}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.presets button{padding:11px 6px;font-size:11px;background:#f7f8f2}.play-row{display:flex;gap:10px;margin-top:13px}.play-row #play{background:#2d6654;color:white;border-color:#2d6654;flex:1}.play-row #reset{border:0;color:#89948b}.tip{display:flex;gap:13px;align-items:center;background:#eeeee1;border-radius:14px;padding:14px 20px;margin-top:23px;color:#738171}.tip>span{font-size:25px;color:#829372}.tip p{font-size:12px;margin:0;line-height:1.6}.tip strong{color:#455f4e}footer{display:flex;gap:12px;margin-top:22px;color:#80907d;font-size:10px}footer span{color:#a2aca0}@media(min-width:1300px){#clock{max-width:500px}}@media(max-width:900px){header{padding:20px 24px}main{padding:28px 24px}.workspace{gap:16px}.clock-card,.day-card,.tools-card{padding:18px}.digital-row{flex-direction:column;align-items:stretch}.digital-box{text-align:center}.card-top{flex-wrap:wrap}.presets{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){header{padding:17px 20px}.tag{display:none}.brand{font-size:17px}main{padding:25px 16px}.workspace{grid-template-columns:1fr;margin-top:24px}.intro p{font-size:14px}.digital-row{flex-direction:row}.digital-box{min-width:174px;padding:11px 13px}#digital{font-size:28px}#hide{font-size:11px;padding:12px 9px}.presets{grid-template-columns:repeat(4,1fr)}.card-top{flex-wrap:nowrap}.tip{align-items:start}.scene-caption span{font-size:24px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Compact workspace: size the illustrations to the available screen height. */
header{padding:12px 28px}.brand{font-size:18px}.brand-icon{width:32px;height:32px;font-size:26px}main{padding:16px 28px}.workspace{margin-top:0;gap:18px}.clock-card,.day-card,.tools-card{padding:16px;border-radius:19px}#clock{max-width:420px;margin-top:7px}.legend{margin:5px 0 12px;gap:20px}.digital-row{padding-top:12px;gap:10px}.digital-box{padding:9px 14px;min-width:184px}#digital{font-size:29px}aside{gap:12px}.landscape{margin:12px auto 0;max-width:460px}.day-progress{padding-top:15px}.progress-labels{margin-top:9px}.scene-note{display:none}.tools-card p{margin:7px 0 11px}.presets button{padding:9px 6px}.play-row{margin-top:9px}.scene-caption{bottom:14px;left:18px}.scene-caption span{font-size:23px}
@media(min-width:901px){#clock{max-width:min(420px,calc(100dvh - 285px))}.landscape{width:min(100%,calc((100dvh - 405px)*1.42857))}.digital-row{flex-direction:row}.card-top{flex-wrap:nowrap}}
@media(min-width:651px) and (max-width:900px){header{padding:10px 20px}main{padding:12px 20px}.workspace{gap:12px}.clock-card,.day-card,.tools-card{padding:12px}#clock{max-width:min(380px,calc(100dvh - 295px))}.landscape{width:min(100%,calc((100dvh - 430px)*1.42857))}.digital-row{gap:8px}.digital-box{padding:8px 12px}.presets{grid-template-columns:repeat(2,1fr)}.play-row{flex-wrap:wrap}.play-row #reset{padding:7px}.period{padding:5px 7px}}
@media(max-width:650px){header{padding:12px 16px}main{padding:12px}.workspace{margin-top:0;gap:12px}.clock-card,.day-card,.tools-card{padding:14px}#clock{max-width:320px}.digital-box{min-width:166px;padding:8px 10px}#digital{font-size:26px}.legend{margin-bottom:10px}.landscape{margin-top:10px}.scene-caption small{font-size:10px}.presets button{font-size:10px}.brand{font-size:16px}}


.digital-box{background:#000}#digital{position:relative;line-height:0;text-shadow:none}.segment-display{display:block;width:156px;height:44px;max-width:100%;overflow:visible}.digital-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.display-label{color:#9e9e9e}@media(max-width:650px){.segment-display{width:146px;height:41px}}

.sultan-name{font-family:"Dancing Script","Segoe Script",cursive;font-size:40px;font-weight:700;fill:#7950a2}

.day-title{display:flex;align-items:center;gap:9px;min-width:0}.sultan-badge{display:block;width:36px;height:36px;flex-shrink:0;border-radius:9px;object-fit:contain;background:#f1dffa;border:1px solid #e9d4f2}@media(max-width:650px){.day-title{font-size:14px;gap:7px}.sultan-badge{width:32px;height:32px}}
@font-face{font-family:DSEG7;src:url('fonts/DSEG7Classic-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
#digital{font-family:DSEG7,monospace!important;font-size:25px!important;line-height:1.5!important;letter-spacing:0;color:#ff0000;text-shadow:none;white-space:nowrap}.digital-box{min-width:205px}
[hidden]{display:none!important}.module-nav{display:flex;gap:6px}.module-nav a{font-size:12px;font-weight:700;padding:8px 12px;color:#597268;text-decoration:none;border-radius:9px}.module-nav a[aria-current]{background:#2d6654;color:white}
.practice-counter{border-top:1px solid #eef0e8;padding-top:10px}.timer-settings{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;margin-bottom:10px}.timer-settings input[type=text]{width:45px;font:inherit;text-align:center;border:1px solid #d8dfd6;border-radius:7px;padding:6px}.seconds-option{display:flex;align-items:center;gap:5px}.timerrow{display:flex;justify-content:space-between;font-size:12px}.timerrow strong{font-size:17px}.barbox{height:14px;background:#eee4f5;border-radius:999px;overflow:hidden;margin-top:6px}.bar{height:100%;background:linear-gradient(90deg,#9f4fea,#ef65b5);width:100%;transition:width .1s linear}.urgent .bar{background:#e65852}.urgent #timer{color:#c4413e}
.question-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.score{font-size:11px;color:#58786b;white-space:nowrap}.score strong{font-size:16px}.score button{padding:3px 6px;border:0;font-size:16px}.answer-fields{display:flex;align-items:end;gap:9px;margin-top:12px}.answer-fields label{display:grid;gap:5px;font-size:10px;color:#77847b}.answer-fields input{width:68px;text-align:center;font-family:Manrope,sans-serif;font-size:25px;font-weight:700;padding:7px;border:1px solid #cfdccf;border-radius:9px;color:#294e40;background:#fafcf8}.answer-fields>span{font-size:26px;padding-bottom:7px}input:focus-visible{outline:3px solid #e7bd64;outline-offset:2px}input:disabled{opacity:.6}.practice-card #answerHint{font-size:10px;margin:7px 0}.practice-card #feedback{font-size:12px;font-weight:700;line-height:1.4;margin:6px 0}.solution{display:flex;align-items:center;gap:12px;margin:8px 0}.solution>span{font-size:11px}.solution .digital-box{padding:6px 10px;min-width:0}.solution #digital{font-size:22px!important}.exercise-actions{display:flex;gap:8px;margin-top:9px}.exercise-actions button{padding:8px 11px}.exercise-actions #nextRound{background:#2d6654;color:white}.exercise-actions #stopExercise{margin-left:auto;background:#fff4f2;color:#b85b4e;border-color:#f1d5cf}button:disabled{opacity:.45;cursor:default}
body[data-mode=practice] .hand{cursor:default}body[data-result=correct]{background:#e6f4e6}body[data-result=correct] .practice-card{background:#eaf8eb;border-color:#93c494}body[data-result=wrong] .practice-card{background:#fff4ef;border-color:#e7b7a5}
@media(min-width:901px){body[data-mode=practice] .landscape{width:min(100%,calc((100dvh - 500px)*1.42857))}body[data-mode=practice] #clock{max-width:min(420px,calc(100dvh - 305px))}}
@media(max-width:900px){.question-top{flex-wrap:wrap}body[data-mode=practice] .landscape{width:min(100%,max(120px,calc((100dvh - 530px)*1.42857)))}}
@media(max-width:650px){header{flex-wrap:wrap;gap:8px}.module-nav a{padding:6px 9px;font-size:11px}.module-nav{margin-left:auto}.digital-box{min-width:180px}#digital{font-size:21px!important}.question-top{flex-wrap:nowrap}.timer-settings{font-size:11px}body[data-mode=practice] .landscape{width:100%}.answer-fields input{width:63px}.solution{gap:8px}.solution #digital{font-size:19px!important}}

body[data-mode=practice] .scene-caption span{font-size:18px}body[data-mode=practice] .scene-caption{left:10px;bottom:10px}body[data-mode=practice] .scene-caption small{font-size:9px}.practice-card .solution .digital-box{padding:4px 10px}.practice-card .solution #digital{font-size:19px!important}.practice-card .solution{margin:5px 0}.practice-card .exercise-actions{margin-top:6px}@media(min-width:651px) and (max-height:650px){body[data-mode=practice] .scene-caption small{display:none}}

.period{font-weight:800}

.landscape .scene-caption{left:auto;right:14px;bottom:12px;text-align:right;max-width:52%;padding:7px 10px;border-radius:10px;background:#16334655;backdrop-filter:blur(2px)}.landscape .scene-caption span{font-size:22px}.landscape .scene-caption small{line-height:1.3}body[data-mode=practice] .landscape .scene-caption{left:auto;right:9px;bottom:8px;padding:4px 7px}body[data-mode=practice] .landscape .scene-caption span{font-size:16px}

.landscape,body[data-mode=practice] .landscape{width:100%!important;max-width:none}#scene{width:100%;height:min(322px,max(140px,calc(100dvh - 405px)))}body[data-mode=practice] #scene{height:min(300px,max(90px,calc(100dvh - 500px)))}@media(max-width:650px){#scene,body[data-mode=practice] #scene{height:220px}}

.learning-controls{display:grid;grid-template-columns:minmax(0,1fr) 38px 205px;gap:12px;align-items:center}.learning-controls .digital-box{width:205px;min-width:0;justify-self:end}.speed-control{display:grid;gap:6px;min-width:0;font-size:12px;color:#6a7e6e}.speed-control>span{display:flex;justify-content:space-between;align-items:center;gap:5px}.speed-control output{font-weight:700;color:#315f4c}.speed-control input{width:100%;margin:0;accent-color:#2d6654;cursor:pointer}.speed-control small{display:flex;justify-content:space-between;font-size:9px;color:#91a08e}.eye-toggle{width:38px;height:38px;padding:8px;display:grid;place-items:center}.eye-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}@media(max-width:650px){.learning-controls{grid-template-columns:minmax(0,1fr) 32px 168px;gap:6px}.learning-controls .digital-box{width:168px;padding:9px 8px}.learning-controls #digital{font-size:20px!important}.eye-toggle{width:32px;height:34px;padding:6px}.speed-control{font-size:10px;gap:5px}}

.learning-controls{grid-template-columns:minmax(0,1fr) 38px 38px 205px}.learning-controls #showMinutes img{width:24px;height:24px;display:block;border-radius:50%}#showMinutes[aria-pressed=true]{background:#e4f0de;border-color:#6b9970}@media(max-width:650px){.learning-controls{grid-template-columns:minmax(0,1fr) 32px 32px 154px}.learning-controls .digital-box{width:154px}.learning-controls #digital{font-size:18px!important}.learning-controls #showMinutes img{width:22px;height:22px}}

.cloud-toggle{position:absolute;top:9px;right:9px;width:30px;height:30px;display:grid;place-items:center;padding:5px;background:#254f6166;color:white;border:1px solid #ffffff66;border-radius:9px;backdrop-filter:blur(3px);z-index:2}.cloud-toggle:hover{background:#254f61aa}.cloud-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}.cloud-off-mark{position:absolute;font-size:28px;line-height:1;text-shadow:0 0 2px #284957}.cloud-toggle[aria-pressed=false]{opacity:.7}

/* Matching module pictograms. */
.module-nav a{display:inline-flex;align-items:center;justify-content:center;gap:6px}.module-icon{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.module-nav{flex-wrap:wrap}header{flex-wrap:wrap;gap:10px}@media(max-width:650px){.module-nav a{gap:4px;padding:6px 7px}.module-icon{width:15px;height:15px}}