.clock-exercise{background:linear-gradient(#edf8ff,#fff 420px);padding-bottom:56px}
.clock-exercise-hero{width:min(760px,calc(100% - 40px));margin:0 auto;padding:44px 0 26px;text-align:center}
.clock-exercise-hero h1{font-size:clamp(34px,4.2vw,54px);text-wrap:balance}
.clock-stage{width:min(880px,calc(100% - 32px));margin:0 auto;padding:30px;border:1px solid #cdccff;border-radius:22px;background:#fff;box-shadow:0 12px 36px #203fd914;scroll-margin-top:16px}
.clock-stage-title{font-size:34px;text-align:center;margin-bottom:22px}
.clock-exercise .clock-stage h2[tabindex]:focus,.clock-exercise .clock-stage h2[tabindex]:focus-visible{outline:none}
.clock-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px}
.clock-level{display:flex;flex-direction:column;gap:8px;min-height:132px;padding:20px;border:2px solid #cdccff;border-radius:18px;background:linear-gradient(120deg,#f3f6ff,#fff);color:#101052;font:inherit;text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}
.clock-level strong{font:800 34px 'Barlow Condensed',Inter,sans-serif;color:#034cff}
.clock-level span{font-size:15px;line-height:1.45;color:#323f86}
.clock-level:hover{transform:translateY(-3px);border-color:#034cff;box-shadow:0 8px 20px #203fd91f}
.clock-level--test{background:linear-gradient(120deg,#fff0ce,#fffaf0);border-color:#e4bd73}
.clock-level--test strong{color:#956300}
.clock-note{margin:20px 0 0;text-align:center;font-size:14px;color:#505b99}
.clock-progress{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px;font-size:15px;font-weight:650;color:#12208c}
.clock-progress progress{flex-basis:100%;width:100%;height:10px;border:0;border-radius:999px;overflow:hidden;accent-color:#034cff;background:#e7eeff}
.clock-progress progress::-webkit-progress-bar{background:#e7eeff}
.clock-progress progress::-webkit-progress-value{background:#034cff;border-radius:999px}
.clock-progress progress::-moz-progress-bar{background:#034cff}
.clock-chip{padding:5px 12px;border-radius:999px;background:#fff0ce;color:#7a5200;font-size:13px}
.clock-question{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:30px;align-items:start}
.clock-question--plain{grid-template-columns:minmax(0,1fr)}
.clock-figure .clock-face{max-width:300px;margin:0 auto}
.clock-question-prompt{font-family:Inter,sans-serif!important;font-size:24px!important;letter-spacing:-.02em!important;line-height:1.25!important;margin-bottom:20px!important;color:#101052}
.clock-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px;margin-bottom:20px}
.clock-choice{min-height:56px;padding:12px 16px;border:2px solid #cdccff;border-radius:14px;background:#fff;color:#101052;font:650 18px Inter,sans-serif;cursor:pointer;transition:border-color .15s,background .15s}
.clock-choice:hover:not(:disabled){border-color:#034cff}
.clock-choice[aria-checked="true"]{border-color:#034cff;background:#e7eeff}
.clock-choice:disabled{cursor:default;opacity:.75}
.clock-choice.is-correct{border-color:#16794a;background:#e4f6ec;opacity:1}
.clock-choice.is-wrong{border-color:#b3261e;background:#fdeceb;opacity:1}
.clock-time-entry{display:flex;align-items:center;gap:10px;margin-bottom:20px;font:700 26px Inter,sans-serif;color:#101052}
.clock-time-input{width:86px;min-height:60px;padding:6px;border:2px solid #cdccff;border-radius:14px;font:700 28px Inter,sans-serif;color:#101052;text-align:center;-moz-appearance:textfield}
.clock-time-input::-webkit-outer-spin-button,.clock-time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.clock-time-input:focus{outline:3px solid #0035da;outline-offset:2px}
.clock-time-unit{font-size:18px;color:#505b99}
.clock-time-pad{margin-bottom:20px}
.clock-time-pad .clock-time-entry{margin-bottom:12px}
.clock-time-slot{width:86px;min-height:60px;padding:6px;border:2px solid #cdccff;border-radius:14px;background:#fff;color:#101052;font:700 28px Inter,sans-serif;text-align:center;cursor:pointer}
.clock-time-slot.is-active{border-color:#034cff;background:#e7eeff;box-shadow:0 0 0 3px #034cff33}
.clock-time-slot:disabled{cursor:default;opacity:1}
.clock-keypad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:420px}
.clock-key{min-height:52px;border:2px solid #cdccff;border-radius:12px;background:#fff;color:#101052;font:700 22px Inter,sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.clock-key:active:not(:disabled){background:#e7eeff;border-color:#034cff}
.clock-key--action{background:#fff0ce;border-color:#e4bd73;color:#7a5200}
.clock-key:disabled{opacity:.5;cursor:default}
.clock-level--control{background:linear-gradient(120deg,#e4f6ec,#f7fffa);border-color:#8fd0ab}
.clock-level--control strong{color:#16794a;font-size:28px}
.clock-levels--exercises{margin-bottom:22px}
.clock-levels--exercises .clock-level{min-height:112px}
.clock-levels--exercises .clock-level strong{font-size:25px;line-height:1.1}
.clock-time-entry--row{margin-bottom:8px;font-size:22px}
.clock-time-label{min-width:138px;font:650 18px Inter,sans-serif;color:#22306f}
.clock-time-slot.is-correct{border-color:#16794a;background:#e4f6ec}
.clock-time-slot.is-wrong{border-color:#b3261e;background:#fdeceb}
.clock-letters{margin-bottom:20px}
.clock-letters-display{min-height:58px;margin-bottom:12px;padding:12px 16px;border:2px solid #034cff;border-radius:14px;background:#f3f6ff;color:#101052;font:650 22px Inter,sans-serif;line-height:1.3;overflow-wrap:anywhere}
.clock-letterboard{display:flex;flex-direction:column;gap:6px;max-width:560px}
.clock-letterboard-row{display:flex;justify-content:center;gap:5px}
.clock-key--letter{flex:1 1 0;min-width:0;min-height:48px;padding:0;font-size:19px;text-transform:lowercase}
.clock-key--space{flex:4 1 0;min-height:48px;font-size:15px;font-weight:650;color:#505b99}
.clock-letterboard-row--tools .clock-key--action{flex:1 1 0;min-height:48px}
.clock-hands-entry{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:20px}
.clock-hands-entry .clock-face{width:min(320px,100%)}
.clock-face--interactive{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.clock-grip{stroke:#fff;stroke-width:2.5}.clock-grip--hour{fill:#e58a00}.clock-grip--minute{fill:#034cff}
.clock-face--interactive[data-dragging="minute"] .clock-grip--minute,.clock-face--interactive[data-dragging="hour"] .clock-grip--hour{stroke:#101052;stroke-width:3.5}
.clock-face--interactive.is-locked .clock-grip{display:none}
.clock-face--interactive.is-dragging{cursor:grabbing}
.clock-hand-guide{stroke:#034cff;stroke-width:1.6;stroke-dasharray:2 3;stroke-linecap:round}
.clock-face--interactive .clock-tick.is-pointed{stroke:#034cff;stroke-width:4}
.clock-hands-entry .clock-face{width:min(380px,100%)}
.clock-controls{width:min(380px,100%)}
.clock-face--interactive .clock-hand{stroke-width:9}
.clock-face--interactive .clock-hand--minute{stroke-width:7}
.clock-face--interactive.is-locked{pointer-events:none;cursor:default}
.clock-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(320px,100%)}
.clock-control{min-height:44px;border:1px solid #4f61ff;border-radius:999px;background:#fff;color:#12208c;font:650 14px Inter,sans-serif;cursor:pointer}
.clock-control:hover:not(:disabled){background:#e7eeff}
.clock-control:disabled{opacity:.5;cursor:default}
.clock-live{margin:0;font-size:14px;color:#505b99;min-height:1em}
.clock-hint{margin:0;font-size:14px;color:#505b99;text-align:center}
.clock-validate:disabled{background:#aab4e6;cursor:not-allowed;transform:none;box-shadow:none}
.clock-exercise button.lesson-primary-button{border:0;font-family:Inter,sans-serif;cursor:pointer}
.clock-feedback:empty{display:none}
.clock-feedback{margin-top:4px;padding:18px 20px;border-radius:16px;border:1px solid #cdccff}
.clock-feedback.is-correct{background:#e4f6ec;border-color:#8fd0ab}
.clock-feedback.is-wrong{background:#fff5e2;border-color:#e4bd73}
.clock-feedback p{margin:0 0 12px;font-size:16px;line-height:1.55;color:#22306f}
.clock-feedback-title{font-weight:750;font-size:18px!important;color:#101052!important}
.clock-feedback-figure .clock-face{max-width:170px}
.clock-score{margin:0;text-align:center;font:800 76px 'Barlow Condensed',Inter,sans-serif;color:#034cff;line-height:1}
.clock-result-message{margin:14px auto 22px;max-width:560px;text-align:center;font-size:17px;line-height:1.5;color:#323f86}
.clock-result-skills{list-style:none;margin:0 auto 26px;padding:0;max-width:520px;border:1px solid #dedcff;border-radius:14px;overflow:hidden}
.clock-result-skills li{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;font-size:16px;border-bottom:1px solid #dedcff}
.clock-result-skills li:last-child{border-bottom:0}
.clock-result-skills .is-strong strong{color:#16794a}
.clock-result-skills .is-weak strong{color:#b3261e}
.clock-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.clock-result-actions a.lesson-print-button{text-decoration:none}
.clock-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;width:min(880px,calc(100% - 32px));margin:26px auto 0}
.clock-extra{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid #e0ddff;border-radius:16px;background:#fbfbff;color:#101052;text-decoration:none;transition:transform .18s,border-color .18s}
.clock-extra:hover{transform:translateY(-2px);border-color:#034cff}
.clock-extra strong{display:flex;align-items:center;gap:8px;font-size:17px;color:#12208c}
.clock-extra span{font-size:14px;line-height:1.45;color:#505b99}
@media(max-width:700px){
 .clock-stage{padding:20px 16px;border-radius:18px}
 .clock-stage-title{font-size:29px}
 .clock-question{grid-template-columns:minmax(0,1fr);gap:16px}
 .clock-figure .clock-face{max-width:230px}
 .clock-question-prompt{font-size:21px!important}
 .clock-score{font-size:62px}
}
/* Phones: the dial, the question and the whole answer area stay on one screen, nothing to scroll. */
@media(max-width:700px){
 [data-clock-exercise] .clock-stage{padding:12px 12px 14px}
 [data-clock-exercise] .clock-progress{margin-bottom:10px;gap:6px;font-size:13px}
 [data-clock-exercise] .clock-progress progress{height:6px}
 [data-clock-exercise] .clock-chip{padding:3px 9px;font-size:12px}
 [data-clock-exercise] .clock-question{gap:8px}
 [data-clock-exercise] .clock-figure .clock-face{max-width:190px}
 [data-clock-exercise] .clock-answer .clock-question-prompt{font-size:18px!important;margin-bottom:10px!important}
 [data-clock-exercise] .clock-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
 [data-clock-exercise] .clock-choice{min-height:50px;padding:8px 6px;font-size:16px;line-height:1.2}
 [data-clock-exercise] .clock-time-pad{margin-bottom:12px}
 [data-clock-exercise] .clock-time-pad .clock-time-entry{margin-bottom:8px;font-size:22px}
 [data-clock-exercise] .clock-time-slot{width:72px;min-height:48px;font-size:24px}
 [data-clock-exercise] .clock-keypad{gap:6px;max-width:none}
 [data-clock-exercise] .clock-key{min-height:46px;font-size:20px}
 [data-clock-exercise] .clock-time-entry--row{margin-bottom:6px;font-size:20px;gap:8px}
 [data-clock-exercise] .clock-time-label{min-width:104px;font-size:15px}
 [data-clock-exercise] .clock-time-pad--rows .clock-time-slot{width:60px;min-height:42px;font-size:22px}
 [data-clock-exercise] .clock-question--compact .clock-figure .clock-face{max-width:170px}
 [data-clock-exercise] .clock-letters{margin-bottom:12px}
 [data-clock-exercise] .clock-letters-display{min-height:48px;margin-bottom:8px;padding:8px 12px;font-size:19px}
 [data-clock-exercise] .clock-letterboard-row{gap:3px}
 [data-clock-exercise] .clock-key--letter,[data-clock-exercise] .clock-key--space,[data-clock-exercise] .clock-letterboard-row--tools .clock-key--action{min-height:42px;font-size:17px;border-width:1.5px;border-radius:9px}
 [data-clock-exercise] .clock-hands-entry{gap:8px;margin-bottom:12px}
 [data-clock-exercise] .clock-hands-entry .clock-face{width:min(250px,100%)}
 [data-clock-exercise] .clock-controls{gap:6px;width:100%}
 [data-clock-exercise] .clock-control{min-height:40px}
 [data-clock-exercise] .clock-validate{width:100%;min-height:46px;padding:10px 16px}
}
@media(max-width:700px) and (max-height:700px){
 [data-clock-exercise] .clock-figure .clock-face{max-width:168px}
 [data-clock-exercise] .clock-hands-entry .clock-face{width:min(214px,100%)}
 [data-clock-exercise] .clock-hint{display:none}
 [data-clock-exercise] .clock-question--compact .clock-figure .clock-face{max-width:156px}
}
@media(prefers-reduced-motion:reduce){.clock-level,.clock-extra,.clock-choice{transition:none}}