:root{color-scheme:light;--ink:#173d35;--paper:#faf7ef;--line:#d9d5c9;--blue:#205b91;--orange:#ad4806;font-family:system-ui,-apple-system,sans-serif;font-size:18px;line-height:1.6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}.clock-legacy-header{padding:16px 5%;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid var(--line)}.clock-legacy-header span{font-size:.8rem}main{max-width:1040px;margin:auto;padding:24px}a{color:inherit;text-underline-offset:.2em}h1,h2,h3{line-height:1.18;overflow-wrap:break-word}h1{font-family:Georgia,serif;font-size:clamp(2rem,5vw,3.2rem);max-width:23ch}h2{font-family:Georgia,serif;font-size:1.8rem}.eyebrow{font-size:.8rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}figure{margin:20px 0}img{display:block;width:100%;height:auto;border-radius:22px}figcaption{font-size:.85rem;margin-top:10px;max-width:65ch}main button,main summary,main input{font:inherit}main button{min-height:50px;padding:10px 16px;border-radius:14px;border:2px solid #68867a;background:white;color:var(--ink);cursor:pointer;line-height:1.3;white-space:normal;max-width:100%;overflow-wrap:break-word}main button.primary{background:var(--ink);color:white;border-color:var(--ink);font-weight:700}main button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:4px solid #e5a52f;outline-offset:4px}main details{background:#fff8e6;border:1px solid var(--line);border-radius:18px;padding:18px;margin:24px 0}main summary{cursor:pointer;font-weight:700}#chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:28px 0}#chapters button{font-size:.85rem;text-align:left}#chapters button[aria-current=true]{background:#dcebe1;border-color:var(--ink)}#book,.free{background:white;border:1px solid var(--line);border-radius:24px;padding:28px;margin:24px 0}.steps{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.steps li{padding:9px;background:#f1f3eb;border-radius:10px;font-size:.8rem}.steps li[aria-current=step]{background:#d9eadf;font-weight:750}.prose{max-width:66ch}.prose p{margin:0 0 1.1em}.clocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:22px}.clock-figure{margin:10px 0;background:#fafbf7;padding:14px;border:1px solid #e2e5dc;border-radius:18px}.clock{width:100%;height:auto;max-height:340px;display:block}.clock text{font-family:system-ui,sans-serif}.clock-figure figcaption{text-align:left}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.9rem}.legend span:first-child{color:var(--blue);font-weight:750}.legend span:last-child{color:var(--orange);font-weight:750}.actions{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:12px;margin-top:22px;align-items:stretch}#feedback{min-height:2.8em;padding:12px 0;font-weight:650}#helpText{background:#fff5d8;border-radius:12px;padding:16px}.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}.answers button{display:flex;flex-direction:column;align-items:stretch;justify-content:center;text-align:center}.answers button[aria-pressed=true]{border:4px solid var(--ink);background:#e5f0e7;padding:8px 14px}.answers .clock{max-height:240px}.question{font-weight:750;font-size:1.12rem}.tools{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}#freeClock{max-width:360px;margin:auto}.digital{text-align:center;font-weight:750;font-size:1.5rem}label{display:block;font-weight:650}input[type=range]{width:100%;min-height:48px;accent-color:var(--ink)}.free p{max-width:65ch}footer{padding:20px 0 40px}.success{padding:20px;background:#edf5eb;border-radius:18px}#chapterTitle:focus{outline:none}@media(max-width:650px){main{padding:16px}#book,.free{padding:18px}#chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.actions{grid-template-columns:repeat(2,minmax(0,1fr))}.actions .primary{grid-column:1/-1}.answers{grid-template-columns:1fr}h1{font-size:2rem}h2{font-size:1.5rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@media print{button,.actions,.free,#chapters{display:none}#book{break-inside:avoid}}

.large-examples{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;margin:24px 0}.large-examples .tools button[aria-pressed=true]{background:var(--ink);color:white}#largeClock{max-width:560px;margin:auto}#largeClock .clock{max-height:none}.clocks{grid-template-columns:minmax(0,1fr)}.clock-figure{width:100%;max-width:520px;margin:14px auto}.clock-figure .clock{max-height:none}header>*{min-width:0}.clock-legacy-header span{overflow-wrap:anywhere}main,section,nav,figure,.answers,.actions,.tools{min-width:0}p,li,summary,label,figcaption{overflow-wrap:break-word}#chapters button{hyphens:auto}.intro details{overflow-wrap:anywhere}
button{min-width:0;hyphens:auto;overflow-wrap:anywhere}.answers{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}@media(max-width:650px){.answers{grid-template-columns:minmax(0,1fr)}}
.intro{padding:0;min-height:0;background:transparent;display:block}.large-examples{scroll-margin-top:20px}

#modelClock620,#challengeClock{max-width:560px;margin:auto}#modelClock620 .clock,#challengeClock .clock{max-height:none}#challengeFeedback{min-height:3em;font-weight:650}#challengeHint{background:#fff5d8;padding:16px;border-radius:12px}[hidden]{display:none!important}#challengeRestart{margin-top:20px}

[data-draggable] .clock{touch-action:none;user-select:none;-webkit-user-select:none}[data-drag-hand]{cursor:grab;pointer-events:stroke}[data-drag-hand]:focus-visible{stroke:#e5a52f;stroke-opacity:.4;outline:none}.dragging [data-drag-hand]{cursor:grabbing}

#storyClock{max-width:560px;margin:20px auto}#storyClock .clock{max-height:none;width:100%}#storyClock[data-focus=hour] .minute-hand,#storyClock[data-focus=minute] .hour-hand{opacity:.18}#storyClock[data-focus=hour] .hour-hand,#storyClock[data-focus=minute] .minute-hand{filter:drop-shadow(0 0 4px #e7ae24);stroke-width:11px}.story-learning figure{max-width:360px;margin:12px auto}#storyInstruction,#storyTryFeedback{max-width:55ch}#storyTryFeedback{font-weight:700}

#storyClock[data-focus=ticks] svg>line{stroke:#ad4806;stroke-width:2.5px}
.tools p{flex-basis:100%;min-width:0;overflow-wrap:anywhere}#storyAudioStatus{font-size:.95rem;max-width:100%}

.spoken-answer-number{display:inline-block;padding:.15em .5em;margin:.2em;border-radius:50%;background:#205b91;color:white;font-weight:800}.narration-controls button{min-height:48px}
#chapterTitle{hyphens:auto;-webkit-hyphens:auto}

#storyClock[data-focus=dial-upside] svg{transform:rotate(180deg)}

.spoken-transcript{position:sticky;top:8px;z-index:5;background:#fff5d8;border:2px solid #d3ab58;border-radius:16px;padding:12px 16px;margin:12px 0;max-height:30vh;overflow:auto;box-shadow:0 3px 12px #173d3518}.spoken-transcript h4{font-size:.8rem;margin:0 0 .3em}.spoken-transcript p{margin:0;font-size:1rem;line-height:1.45;overflow-wrap:anywhere}

#pathClock{max-width:560px;margin:auto;touch-action:none}#pathClock .clock{max-height:none}#pathCaption{background:#fff5d8;border-radius:12px;padding:16px;min-height:4em}#pathClock[data-focus=hour] .minute-hand,#pathClock[data-focus=minute] .hour-hand{opacity:.22}#pathClock[data-focus=hour] .hour-hand,#pathClock[data-focus=minute] .minute-hand{filter:drop-shadow(0 0 3px #e9b400)}#pathClock[data-focus=ticks] svg>line{stroke:#ad4806;stroke-width:2}#pathClock[data-draggable] [data-drag-hand]{cursor:grab}.path-pending{border-left:4px solid #ad4806;padding-left:12px;font-size:.9rem}

/* Clock and the currently spoken phrase stay together; controls scroll below. */
.path-panel{position:sticky;top:0;z-index:8;background:#fffef8;border:1px solid var(--line);border-radius:16px;padding:8px;margin:12px 0;box-shadow:0 3px 10px #173d3514}
#pathPanel #pathClock{width:min(100%,30svh,248px);max-width:100%;margin:auto}
#pathPanel #pathCaption{font-size:1rem;line-height:1.3;height:calc(5.2em + 16px);min-height:0;overflow:auto;padding:8px;margin:8px 0 0;overflow-wrap:anywhere}
#pathPanel #pathDigital{margin:4px 0;font-size:1rem}#pathPanel #pathDigital:empty{display:none}
.clock-path .path-progress{font-size:.75rem}.path-full-text{margin:12px 0}.clock-path button{scroll-margin-top:60svh}
@media(max-width:650px){.clock-path{padding:12px}.path-picture figure{display:none}.path-panel{scroll-margin-top:0}.path-progress{line-height:1.3}#pathHeading{font-size:1.1rem}}
@media(min-width:700px){.path-panel{display:grid;grid-template-columns:minmax(180px,340px) 1fr;gap:12px;align-items:center}#pathPanel #pathClock{grid-row:1/3;width:min(100%,38svh,340px)}#pathPanel #pathDigital,#pathPanel #pathCaption{grid-column:2}#pathPanel #pathCaption{margin:0}}

#pathBody{overflow-anchor:none}

#pathTry,#pathCheck,#pathNext{order:-1}.path-full-text summary{font-size:.8rem}

/* Keep site information outside the learning content. */
body>footer{clear:both;margin-top:32px;padding:32px max(20px,calc((100% - 1040px)/2)) 40px;border-top:1px solid var(--line)}

/* Keep the complete spoken explanation readable, without word-by-word replacement. */
#pathPanel #pathCaption{height:auto;min-height:4.4em;max-height:36svh;line-height:1.45}

#pathPanel .path-task{grid-column:1/-1;font-weight:750;line-height:1.4;margin:0 0 8px;padding:8px;background:#e8f0e5;border-radius:10px;font-size:.9rem}#pathPanel .path-dial-note{grid-column:1/-1;margin:0 0 8px;font-size:.75rem;line-height:1.4}#pathPanel #pathClock{grid-row:auto}#pathPanel #pathCaption{grid-row:auto}

@media(min-width:700px){#pathPanel:not(:has(.path-task:not([hidden]))) #pathClock{grid-row:1/3}#pathPanel:has(.path-task:not([hidden])) #pathClock{grid-row:3/5}}
@media(max-width:699px){#pathPanel:has(.path-task:not([hidden])) #pathClock{width:min(100%,22svh,220px)}#pathPanel:has(.path-task:not([hidden])) #pathCaption{max-height:26svh}}
.path-answer-instruction{flex-basis:100%;font-size:.85rem;margin:0 0 8px}