:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#294653;background:#f4f7fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{border:1px solid #c8d6dd;border-radius:14px;background:#fff;color:#294653;min-height:48px;padding:12px 22px;cursor:pointer;font-weight:550}button:hover{background:#eaf1f5}button:focus-visible,input:focus-visible{outline:3px solid #477892;outline-offset:4px}button:disabled{cursor:default;opacity:.6}main{max-width:1060px;margin:auto;padding:24px 32px 18px}header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:24px}.brand{font-size:21px;font-weight:650;white-space:nowrap}.brand span{font-size:32px;vertical-align:-3px;margin-right:7px}.secondary{background:transparent;font-size:14px}.setup{display:flex;gap:32px;align-items:end}.title-field{flex:1;font-size:14px;font-weight:600}.title-field span{font-weight:400;color:#627987}input[type=text],input:not([type]){width:100%;margin-top:8px;padding:13px 15px;border:1px solid #c8d6dd;background:#fff;border-radius:12px;color:#294653;min-height:48px}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-size:14px;font-weight:600;margin-bottom:8px}.presets{display:flex;gap:6px}.presets button{padding:10px;min-width:44px;border-radius:11px}.presets button[aria-pressed=true]{background:#2b5363;border-color:#2b5363;color:white}.stage{text-align:center;margin-top:24px}h1{font-size:clamp(22px,3vw,38px);margin:0 0 8px;overflow-wrap:anywhere;font-weight:550}#state{font-size:14px;color:#597280;min-height:20px}#digits{font-size:clamp(80px,12vw,146px);font-weight:500;letter-spacing:-5px;font-variant-numeric:tabular-nums;line-height:1.13}#message{font-size:clamp(18px,2.2vw,24px);margin:8px 0 24px;min-height:1.5em;line-height:1.5}.timeline{height:10px;background:#dce6eb;border-radius:20px;overflow:hidden;max-width:760px;margin:0 auto 20px}#bar{width:100%;height:100%;background:#759b9a;transform-origin:left;border-radius:20px}.landscape{height:146px;position:relative;border-radius:22px;overflow:hidden;background:#deedf4 url('landscape.png') center 60%/cover no-repeat;max-width:760px;margin:0 auto}#sun{position:absolute;width:36px;height:36px;border-radius:50%;background:#f4cf7b;box-shadow:0 0 22px 7px #f5d49166;left:8%;top:62%;transform:translate(-50%,-50%)}.controls{display:flex;justify-content:center;gap:12px;margin:22px 0 16px}.controls button{min-width:145px;font-size:18px}.primary{background:#2b5363;color:#fff;border-color:#2b5363}.primary:hover{background:#376576}.sound{justify-content:center;font-size:14px;align-items:center}.sound label{display:flex;gap:10px;align-items:center;min-height:44px;cursor:pointer}.sound input{appearance:none;width:38px;height:24px;border-radius:20px;background:#bac8d1;position:relative;cursor:pointer;margin:0}.sound input:before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;background:white;border-radius:50%}.sound input:checked{background:#2b5363}.sound input:checked:before{left:17px}.sound strong{font-size:12px;letter-spacing:1px}footer{text-align:center;font-size:14px;color:#506b79;line-height:1.5;margin-top:12px;padding-bottom:env(safe-area-inset-bottom)}#fullscreen-note{background:#e4eef4;border-radius:12px;padding:10px 16px;font-size:14px;margin-bottom:16px}.lim .setup{display:none}.lim{max-width:none;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:20px 5vw}.lim header{margin-bottom:8px}.lim .stage{margin:0}.lim #digits{font-size:clamp(100px,19vh,230px)}.lim #message{font-size:clamp(20px,3.4vh,36px);margin:8px 0 18px}.lim .landscape{max-width:1000px;height:clamp(80px,20vh,260px)}.lim .timeline{max-width:1000px}.lim .controls{margin:18px 0 10px}.lim footer{font-size:clamp(14px,1.8vh,20px);margin-top:8px}html:fullscreen{background:#f4f7fa}@media(max-width:800px){main{padding:18px 20px}.setup{flex-direction:column;align-items:stretch;gap:18px}.presets{justify-content:space-between}.presets button{flex:1}.stage{margin-top:20px}.landscape{height:130px}.sound{flex-direction:row;justify-content:center}.controls button{min-width:0;flex:1;padding:12px 8px}.controls{gap:8px}header{align-items:center}.secondary{max-width:170px;padding:10px}.lim{padding:16px 20px}.lim #digits{font-size:clamp(84px,22vw,180px)}}@media(max-width:390px){main{padding:16px 12px}.brand{font-size:18px}.brand span{margin-right:2px}.secondary{font-size:12px;max-width:140px}.presets{gap:4px}.presets button{min-width:30px;padding:10px 4px}.controls button{font-size:16px}footer{font-size:13px}#digits{letter-spacing:-3px}}
/* Keep the teacher's keyboard reference on screen in every mode. */
main,.lim{padding-bottom:76px}footer,.lim footer{position:fixed;bottom:0;left:0;right:0;z-index:2;background:#f4f7faf5;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));font-size:14px}
@media(max-height:650px) and (min-width:801px){.lim{padding-top:12px;padding-bottom:52px}.lim header{margin-bottom:0}.lim #digits{font-size:18vh}.lim .landscape{height:16vh}.lim #message{margin:4px 0 10px}.lim .timeline{margin-bottom:10px}.lim .controls{margin:10px 0}.lim h1{font-size:26px}}
.landscape{background-size:100% 100%}
@media (max-height:850px) and (min-width:801px){main:not(.lim){padding-top:16px;padding-bottom:60px}main:not(.lim) header{margin-bottom:16px}main:not(.lim) .stage{margin-top:12px}main:not(.lim) #digits{font-size:116px}main:not(.lim) #message{margin:4px 0 16px}main:not(.lim) .landscape{height:110px}main:not(.lim) .controls{margin:16px 0 8px}main:not(.lim) .sound label{min-height:32px}}