:root{font-family:'Noto Sans JP','Yu Gothic',Meiryo,sans-serif;color:#5a3b28;background:#fff9ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid #efd7b0;background:white;color:#6a4327;border-radius:12px;padding:12px 20px;font-weight:700;font-size:16px}button:hover{background:#fff0d6}button:focus-visible,input:focus-visible{outline:3px solid #ff963c;outline-offset:3px}header{height:100px;padding:20px 3.5vw;display:flex;align-items:center;justify-content:space-between}h1{font-size:24px;margin:0;display:flex;align-items:center;gap:12px}.logo{color:#ff963c;font-size:38px}nav{display:flex;gap:10px}main{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 3.5vw;height:calc(100dvh - 140px);min-height:520px}section{border-radius:26px;background:#fff;border:1px solid #f0d9ad}.tasks{padding:24px;overflow:visible;border-top:0;display:flex;flex-direction:column;min-height:0}h2{font-size:24px;margin:0 0 24px}.tasks h2{color:#9b5a21;margin-bottom:16px;flex-shrink:0}ol{list-style:none;padding:0;margin:0;counter-reset:task;display:flex;flex-direction:column;gap:12px;flex:1}li{counter-increment:task;display:flex;align-items:center;gap:16px;padding:14px 18px;border:2px solid #f1d7aa;border-radius:20px;background:#fffdf8;flex:1;min-height:80px;font-size:clamp(24px,2.35vw,44px);line-height:1.5;font-weight:700;overflow-wrap:anywhere}li:before{content:counter(task);flex:0 0 44px;height:44px;background:white;color:#ff963c;border:2px solid #ffb35c;border-radius:50%;display:grid;place-items:center;font-size:24px;margin-top:0}.timer{padding:26px 24px;display:flex;align-items:center;flex-direction:column;position:relative}#status{font-size:24px;font-weight:700;color:#816a55}.display{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}#digits{font-size:clamp(72px,10.7vw,220px);font-weight:750;letter-spacing:-.055em;font-variant-numeric:tabular-nums;line-height:1.2}#dial{height:100%;max-height:65vh;max-width:100%;width:auto}#dial text{font-family:inherit;font-size:24px;font-weight:700;fill:#6a4327}.controls{display:flex;gap:12px;justify-content:center;width:100%;margin-top:16px}.controls button{font-size:20px;padding:16px 24px}.primary{background:#ff963c;color:white;border-color:#ff963c}.primary:hover{background:#e78322}#finished{position:absolute;top:44%;background:white;color:#c85b2b;font-size:clamp(56px,7vw,120px);font-weight:800;border-radius:16px;padding:0 20px}[hidden]{display:none!important}#notice{margin:8px 4vw;font-size:14px}dialog{border:0;border-radius:24px;width:min(600px,94vw);padding:28px;max-height:92dvh;box-shadow:0 24px 90px #6b452733}dialog::backdrop{background:#6b452766}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.dialog-head h2{margin:0}.dialog-head button{padding:4px 12px;font-size:24px}fieldset{border:0;padding:0;margin:20px 0}legend,.duration{font-size:18px;font-weight:700}.choices{display:flex;gap:12px;margin-top:12px}.choices label{flex:1;border:1px solid #e5c48f;border-radius:12px;padding:14px;cursor:pointer}.choices label:has(input:checked){background:#fff0d6;border-color:#ff963c}small{display:block;margin:8px 0 0 24px;color:#816a55;font-size:14px}.duration{display:flex;align-items:center;justify-content:space-between}input[type=number]{width:90px;padding:8px;border:1px solid #e5c48f;border-radius:8px}input[type=checkbox],input[type=radio]{accent-color:#ff963c;width:18px;height:18px;vertical-align:middle}.hint{color:#816a55;font-size:14px;margin:8px 0}#editTasks label{display:flex;gap:12px;align-items:center;margin:10px 0}#editTasks input{width:100%;border:1px solid #e5c48f;border-radius:8px;padding:10px;font-size:16px}.dialog-foot{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}@media(min-width:1700px){header{height:120px}main{height:calc(100dvh - 160px)}.tasks{padding:28px}ol{gap:14px}li:before{width:56px;height:56px;flex-basis:56px;font-size:30px}h2,#status{font-size:32px}}@media(max-width:760px){header{height:auto;padding:18px;gap:12px;flex-wrap:wrap}h1{font-size:20px}nav button{padding:10px}main{grid-template-columns:1fr;height:auto;min-height:0;margin:0 16px 24px}.tasks{padding:20px}li{font-size:24px;padding:14px;min-height:84px}ol{gap:12px}.timer{min-height:420px}.display{min-height:250px}#digits{font-size:22vw}#dial{height:340px}#finished{font-size:72px}.controls button{font-size:18px;padding:14px 18px}.choices{flex-direction:column}}

/* Keep the five frames independent of the amount of text inside. */
#list{display:grid;grid-template-rows:repeat(var(--task-count,5),minmax(0,1fr));min-height:0;flex:1}
#list li{min-height:0;min-width:0;padding:8px 14px}
.task-text{display:block;flex:1;min-width:0;line-height:1.25;overflow-wrap:anywhere;overflow:visible}
@media(max-width:760px){#list{flex:auto;grid-auto-rows:112px;grid-template-rows:repeat(var(--task-count,5),112px)}}

.lesson-picker{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-size:16px}
.lesson-picker select,input[type=time]{font:inherit;color:#5a3b28;background:white;padding:9px 12px;border:1px solid #e5c48f;border-radius:10px;min-height:42px}
#customEnd{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%}
#customEnd button{padding:10px 14px}
#endSummary{font-size:18px;font-weight:700;color:#9b5a21;text-align:center;margin-bottom:8px}
.schedule-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.schedule-grid label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.timer{min-height:0}.timer #dial{height:100%;width:100%;max-height:100%;object-fit:contain}
@media(max-width:760px){.schedule-grid{grid-template-columns:1fr}.timer #dial{height:300px}#endSummary{font-size:16px}}

.schedule-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #efd7b0;border-radius:12px;padding:10px}
.schedule-row:has(input[type=radio]:checked){background:#fff0d6;border-color:#ff963c}
.schedule-row label{cursor:pointer;white-space:nowrap;justify-content:flex-start}
.schedule-row input[type=time]{min-width:0;width:116px}
.schedule-grid{gap:10px}
#settingsError{color:#a82235;font-weight:700}
#endSummary{font-size:16px;font-weight:500;color:#816a55;margin:8px 0 0}
.timer #status{flex-shrink:0}.timer .display{position:relative}
.timer #dial{position:absolute;inset:0;width:100%;height:100%;max-height:100%}

.early-finish{margin-top:20px;gap:10px;flex-wrap:wrap}.early-finish input{width:76px}

.timer-illustration{display:block;width:min(210px,42%);height:auto;object-fit:contain;margin:0 auto 4px;flex-shrink:0}.timer .display{flex:1;min-height:0}.timer #digits{color:#8f4f1b}@media(max-width:760px){.timer-illustration{width:150px}}

header .timer-illustration{width:150px;margin:0 auto 0 20px}header{gap:18px}header h1{flex-shrink:0}@media(max-width:760px){header .timer-illustration{width:105px;margin-left:auto;margin-right:auto}}

#finished{display:flex;flex-direction:column;align-items:center;gap:18px}#finished button{font-size:18px;padding:10px 16px;background:#fff9ed;border-color:#ffb35c;color:#9b5a21}@media(max-width:760px){#finished button{font-size:16px}}

/* Give the timer display the available space on large classroom screens. */
.timer{padding:26px 24px;overflow:hidden}
.timer #status{position:absolute;top:7%;left:0;right:0;text-align:center}
.timer .display{flex:1;width:100%;min-height:0;padding:72px 0 64px}
#digits{font-size:clamp(110px,13.5vw,280px);line-height:1;font-weight:800}
.timer #dial{inset:72px 0 64px;width:100%;height:calc(100% - 136px)}
#endSummary{position:absolute;bottom:4%;left:0;right:0;margin:0;text-align:center}
@media(max-width:760px){.timer #status{top:5%}.timer .display{padding:62px 0 52px}#digits{font-size:24vw}.timer #dial{inset:62px 0 52px;height:calc(100% - 114px)}#endSummary{bottom:3%}}