[hidden]{display:none!important}.class-time-page .lesson-heading{flex-wrap:wrap;margin-bottom:24px}.class-time-page .lesson-heading p{font-size:20px;margin:10px 0}.class-time-page .mode-tabs{min-width:320px}.class-scene{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;border-radius:20px}.class-time-page .guide-portrait{object-fit:contain;height:260px}.guide-bubble{background:white;border:1px solid #8ebcff;border-radius:20px;text-align:center;padding:16px;font-size:19px;font-weight:850;margin:0;width:100%}.view-switch [aria-pressed=true]{background:var(--blue);color:white}.time-panel{display:flex;justify-content:center;gap:32px;text-align:center;margin:18px 0}.time-card{flex:1;max-width:320px}.time-card h2{font-size:20px;margin:0 0 6px}.clock-face{max-width:185px;margin:auto}.clock-face svg{display:block;width:100%;height:auto}.time-number{font-size:30px;font-weight:950;margin:6px 0}.learning-panel{background:white;border:1px solid var(--line);border-radius:20px;padding:22px;text-align:center}.learning-panel h2{font-size:25px;margin:0 0 16px}.minutes-total{font-size:22px;margin:8px 0 20px}.minutes-total strong{font-size:40px}.minute-blocks{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}.minute-blocks li{border:1px solid #9dcce9;background:#eaf6ff;min-height:44px;display:grid;place-items:center;border-radius:8px;font-weight:850}.minute-blocks .counted{background:#188da0;color:white;border-color:#188da0}.step-controls{display:flex;justify-content:center;gap:12px}.step-controls button{padding:12px 25px;font-size:21px;font-weight:850;background:var(--pale)}#equation{font-size:21px}.class-answers{display:flex;gap:15px}.class-answers button{flex:1;padding:16px 12px;background:var(--pale);font-size:25px;font-weight:900}.class-answers [aria-pressed=true]{border:2px solid var(--blue);background:#d9edff}.class-answers .correct{border:2px solid #18875b;background:#e6f8ee}.class-time-page .feedback{font-size:20px}.class-time-page button:disabled{cursor:default;opacity:.7}@media(max-width:900px){.class-time-page .mode-tabs{min-width:0}.class-time-page .action-rail{gap:0}.class-time-page .action-rail button{padding-inline:8px;gap:6px}.class-time-page .time-panel{gap:12px}.minute-blocks{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:640px){.class-time-page .guide{flex-wrap:wrap;align-items:center}.class-time-page .guide-bubble{width:calc(100% - 75px);font-size:16px}.class-time-page .guide-portrait{height:85px;width:60px}.class-time-page .view-switch{grid-template-columns:1fr 1fr}.class-time-page .lesson-heading{display:block}.class-time-page .lesson-heading p{font-size:17px}.class-scene{aspect-ratio:2/1;object-position:40% center}.clock-face{max-width:140px}.time-card h2{font-size:17px}.time-number{font-size:24px}.learning-panel{padding:16px 12px}.learning-panel h2{font-size:21px}.class-answers{gap:8px}.class-answers button{font-size:18px;padding:14px 5px}.class-time-page .action-rail button{flex-direction:column;font-size:15px;gap:4px}.class-time-page .lesson-layout{padding-bottom:100px}.step-controls button{padding:10px 16px;font-size:18px}}

@media(max-width:640px){.class-time-page .guide-bubble{flex:0 1 calc(100% - 75px)}.class-time-page .guide-portrait{flex:0 0 60px;margin:0}}

@media(min-width:641px){.class-time-page .guide-portrait{width:100%;height:auto;max-width:230px}}

/* Times are edited where they are read; the scene's sign follows the same state. */
.class-stage{position:relative;border-radius:20px;overflow:hidden}
.scene-time{position:absolute;left:49%;top:30%;transform:translate(-50%,-50%);width:14%;margin:0;text-align:center;line-height:1.25;color:#103363;font-size:clamp(12px,1.3vw,22px);font-weight:850}
.scene-time span,.scene-time strong{display:block}.scene-time strong{margin-top:6px;font-size:clamp(13px,1.5vw,25px)}
.time-panel{align-items:center;gap:22px}.time-arrow{width:42px;height:42px;flex:0 0 42px}
input.time-number{display:block;width:100%;min-width:0;text-align:center;padding:8px 3px;border:1px dashed var(--line);border-radius:12px;background:#f8fcff;color:var(--navy);font:inherit;font-size:30px;font-weight:950;line-height:1.2;margin:8px 0}
input.time-number[aria-invalid=true]{border:2px solid #b33b23}#time-error{color:#873624;text-align:center;margin:0 0 12px}#time-error:empty{display:none}
.minute-blocks{display:flex;justify-content:center;flex-wrap:wrap}.minute-blocks li{flex:0 0 62px}.minutes-total{min-height:48px}
@media(max-width:640px){.class-stage .class-scene{aspect-ratio:3/1;object-fit:contain}.scene-time{width:24%;font-size:11px;background:#fff4dfdc;border-radius:5px;padding:3px}.scene-time strong{font-size:12px;margin-top:2px}.time-panel{gap:8px}.time-arrow{width:26px;height:26px;flex-basis:26px}input.time-number{font-size:21px}.minute-blocks li{flex-basis:48px}}

.view-switch{display:grid;width:100%;gap:12px}.view-switch button{padding:8px;font-weight:800}

.time-control{display:flex;align-items:center;border:1px dashed var(--line);border-radius:12px;background:#f8fcff;margin:8px 0;min-width:0}
.time-control input.time-number{flex:1;width:0;border:0;background:transparent;margin:0;padding:8px 0}
.time-control button{flex:0 0 44px;min-height:48px;padding:0;background:transparent;border:0;font-size:32px;font-weight:800;color:var(--blue)}
.time-control:focus-within{border-color:var(--blue)}.time-relationship{font-size:23px;font-weight:850;line-height:1.6;margin:22px 0;overflow-wrap:anywhere}
@media(max-width:640px){.time-control button{flex-basis:28px;font-size:27px}.time-control input.time-number{font-size:18px}.time-relationship{font-size:19px}}

.minute-blocks{list-style:none;padding:0;margin:18px 0;gap:8px}
@media(max-width:640px){.time-control input.time-number{font-size:clamp(15px,4.4vw,18px)}}
.time-relationship{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;font-size:20px}.relationship-box{display:grid;place-items:center;min-height:82px;padding:12px 8px;border:1px solid var(--line);border-radius:12px;background:var(--pale)}.relationship-now{border:2px solid var(--blue);background:#d9edff;color:var(--navy)}@media(max-width:640px){.time-relationship{gap:5px;font-size:15px}.relationship-box{padding:8px 4px;min-height:100px}}