/* HAT V1.2.1 Online teaching tools */
#hat121Teaching{white-space:nowrap}
#hat121Menu{position:fixed;right:12px;bottom:52px;z-index:110;width:min(380px,calc(100vw - 24px));background:#edf4fa;color:#17344b;border:1px solid #99b7ce;border-radius:12px;box-shadow:0 8px 34px #0008;padding:12px;font:13px 'Segoe UI',Arial,sans-serif}
#hat121Menu[hidden]{display:none!important}
#hat121Menu button{cursor:pointer;border:1px solid #b6c9d8;border-radius:7px;padding:7px;background:#fff;color:#15384e;font:inherit}
#hat121Menu .hat121-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#hat121Menu .hat121-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
#hat121Menu .hat121-tools .hat121-active{background:#b5e7f5;color:#053851;border-color:#458bb3}
#hat121Menu .hat121-clock-label{display:flex;align-items:center;gap:10px;margin-bottom:6px}
#hat121Minutes{width:65px;padding:6px;border:1px solid #b6c9d8;border-radius:7px}
#hat121Menu .hat121-timer{display:flex;align-items:center;gap:8px}
#hat121Clock{font-size:24px;font-variant-numeric:tabular-nums;margin-right:auto}
#hat121Clock.hat121-finished{color:#d31828}
#hat121Menu .hat121-help{color:#597187;font-size:11px;margin-top:10px;line-height:1.5}
#hat121Overlay{position:absolute;inset:0;z-index:35;pointer-events:none;overflow:hidden}
#hat121Laser{position:absolute;display:none;opacity:0;width:24px;height:24px;border-radius:50%;background:#ff3838;box-shadow:0 0 0 6px #ff404044,0 0 24px 5px #ff2525aa;transform:translate(-50%,-50%);transition:opacity .08s;pointer-events:none}
#hat121Overlay[data-mode=laser] #hat121Laser{display:block}
#hat121Focus{position:absolute;display:none;left:35%;top:35%;width:250px;height:180px;border:3px solid #ffe782;border-radius:20px;box-shadow:0 0 0 250vmax #00152992,0 0 22px #ffe78266;cursor:move;touch-action:none;pointer-events:auto}
#hat121Overlay[data-mode=focus] #hat121Focus{display:block}
#hat121Shade{position:absolute;display:none;left:25%;top:28%;width:380px;height:155px;max-width:90%;background:#eef4fb;color:#25405a;border:2px solid #62a3c5;border-radius:10px;box-shadow:0 5px 24px #0007;touch-action:none;cursor:move;align-items:center;justify-content:center;text-align:center;gap:8px;flex-direction:column;font:700 13px 'Segoe UI',sans-serif}
#hat121Overlay[data-mode=shade] #hat121Shade{display:flex;pointer-events:auto}
#hat121Shade #hat121Reveal{cursor:pointer;border:1px solid #72acc7;border-radius:7px;background:#fff;padding:7px 10px;color:#20465c}
#hat121Resize{position:absolute;right:0;bottom:0;border:8px solid transparent;border-right-color:#3a7fa3;border-bottom-color:#3a7fa3;cursor:nwse-resize;width:0;height:0}
#hat121Ruler{position:absolute;display:none;left:25%;top:42%;width:420px;height:60px;max-width:90%;border:2px solid #e4ab50;background:#fff9dbeb;color:#523c16;border-radius:4px;cursor:move;touch-action:none;pointer-events:auto;box-shadow:0 4px 14px #0005;padding:30px 8px 4px;font:11px 'Segoe UI',sans-serif}
#hat121Overlay[data-mode=ruler] #hat121Ruler{display:block}
#hat121Ruler .hat121-ticks{position:absolute;inset:0 0 auto;height:28px;background:repeating-linear-gradient(90deg,#926120 0 1px,transparent 1px 10px);background-size:100% 11px;background-repeat:repeat-x;border-bottom:1px solid #926120}
#hat121Overlay[data-mode=shade],#hat121Overlay[data-mode=focus],#hat121Overlay[data-mode=ruler]{pointer-events:none}
@media(max-width:720px){#hat121Teaching{font-size:12px;padding:5px}#hat121Menu{bottom:45px}#hat121Shade{width:240px}}
@media print{#hat121Teaching,#hat121Menu,#hat121Overlay{display:none!important}}