:root{font:16px system-ui,sans-serif;color:#152843;background:#edf2f8}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{background:#102847;color:white;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}header strong{font-size:20px}header span{font-weight:400}button,.button{font:inherit;font-size:14px;background:white;color:#152843;border:1px solid #c3d0df;border-radius:8px;padding:10px 13px;cursor:pointer;display:inline-block;min-height:42px}button:hover,.button:hover{background:#e8f0fc}button.active{background:#184fc4;color:white;border-color:#184fc4}button:disabled{opacity:.4;cursor:default}nav,footer{display:flex;align-items:center;gap:8px;padding:10px 14px;flex-wrap:wrap;background:#f7f9fc;border-bottom:1px solid #c3d0df}label{font-size:14px;display:flex;align-items:center;gap:8px}input[type=range]{width:90px}input[type=color]{width:36px;height:36px;border:0;background:none}main{position:relative;flex:1;min-height:0;overflow:hidden;background:white}canvas{width:100%;height:100%;display:block;touch-action:none}#empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:min(90%,500px);color:#64748b}h1{font-size:26px;color:#193a63}p{line-height:1.5}aside{position:absolute;right:16px;top:16px;width:240px;background:#f6f9ff;border:1px solid #c3d0df;border-radius:12px;padding:16px;box-shadow:0 5px 24px #10284718;max-height:calc(100% - 32px);overflow:auto}aside button,aside label{width:100%;margin-top:10px}#mathpanel{width:min(360px,calc(100% - 32px));z-index:3}#mathpanel label{display:block}input[type=text],#problem,textarea{display:block;width:100%;padding:10px;font:inherit;border:1px solid #b5c5d8;border-radius:6px;margin-top:8px}h2{margin:0;font-size:20px}#mathpanel p{font-size:14px}#matherror{color:#a32424}#revealed{padding-left:22px;line-height:1.7}.spacer{flex:1}footer{border-top:1px solid #c3d0df;border-bottom:0}#toast{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#102847;color:white;border-radius:8px;padding:10px 18px;display:none;pointer-events:none}dialog{border:0;border-radius:12px;max-width:620px;max-height:85dvh;padding:25px}dialog::backdrop{background:#10284780}.present header,.present nav,.present footer,.present #objects,.present #empty{display:none!important}#exit{position:absolute;bottom:10px;left:10px;opacity:.45}.present #mathpanel{background:#ffffffed}.present #mathpanel>p,.present #mathpanel>label,.present #solve,.present #review,.present #closemath{display:none!important}[hidden]{display:none!important}@media(max-width:700px){header{padding:8px 12px}header strong{font-size:16px}nav,footer{gap:5px;padding:6px}button,.button{padding:9px;font-size:14px}nav input[type=range]{width:60px}#objects{width:200px}footer .spacer{display:none}h1{font-size:22px}}
#projectbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 14px;background:#e3ebf7;border-bottom:1px solid #c3d0df}#projectbar input{font:inherit;padding:7px;border:1px solid #c3d0df;border-radius:6px;width:240px}#savestatus{font-size:14px;flex:1}.present #projectbar{display:none!important}#projectdialog{width:min(820px,95vw);max-width:820px}.dialoghead{display:flex;justify-content:space-between;align-items:center;gap:15px}.projectactions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}#driveerror{color:#a32424;white-space:pre-wrap}#breadcrumbs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0}#filelist,#versionlist{display:grid;gap:8px}.filerow{display:flex;align-items:center;gap:8px;background:#f3f6fb;border:1px solid #c3d0df;border-radius:8px;padding:8px;flex-wrap:wrap}.filerow .fileopen{flex:1;text-align:left;min-width:140px;overflow-wrap:anywhere}.filerow small{display:block;font-size:12px;color:#586a80;margin-top:4px}.emptyfiles{padding:25px;text-align:center;color:#586a80}#folderhint{font-size:14px}#versions{margin-top:20px;border-top:1px solid #c3d0df;padding-top:15px}@media(max-width:700px){#projectbar{gap:6px;padding:6px}#projectbar input{width:180px}#savestatus{min-width:90px}header>div{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}}

/* Growing explanations scroll independently of the teacher's step controls. */
.math-step-buttons{position:sticky;top:-16px;z-index:5;background:#f6f9ff;display:flex;gap:6px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid #c3d0df}
.math-step-buttons button{width:auto;flex:1 1 90px;margin-top:0}
#revealed{max-height:220px;max-height:min(28dvh,220px);overflow-y:auto;overscroll-behavior:contain;margin:12px 0;padding-right:8px;scrollbar-gutter:stable}
#revealed:empty{display:none}
.present .math-step-buttons{background:#ffffffed}

/* Object controls are outside the canvas, so math tools cannot cover resize. */
#objects{position:static;display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;padding:7px 14px;border:0;border-bottom:1px solid #c3d0df;border-radius:0;box-shadow:none;background:#e9f0fb;max-height:none;overflow:visible}
#objects label,#objects button{width:auto;margin:0}#objects label{display:flex}#objects input[type=range]{width:125px}#objects strong{font-size:14px}.present #objects{display:none!important}
#scanbanner{position:absolute;top:10px;left:10px;right:10px;z-index:8;background:#102847;color:white;border-radius:8px;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none}#scanbanner button{pointer-events:auto}#scanreview{width:min(620px,95vw)}#scanpreview{display:block;max-width:100%;max-height:220px;object-fit:contain;margin:15px auto;background:white;border:1px solid #c3d0df}#scanexpression{font:inherit;width:100%;padding:10px;border:1px solid #c3d0df;border-radius:6px}#scanerror{color:#a32424}#scanraw{white-space:pre-wrap;max-height:150px;overflow:auto}.scanning canvas{cursor:crosshair}
@media(max-width:700px){#objects{padding:6px;gap:5px}#objects input[type=range]{width:100px}#scanbanner{font-size:14px}}

#aiddialog{width:min(540px,90vw)}#aidform>label{display:block;margin:14px 0}#aidform textarea{display:block;width:100%;box-sizing:border-box}#aidform select{max-width:100%;min-height:44px}#aidform [hidden]{display:none!important}

#livedialog{width:min(740px,94vw)}#liveerror{color:#a32424}.live-person{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 0;border-top:1px solid #d0dae8}.live-person span{flex:1;min-width:220px}#liveinvite{width:100%;font:inherit;padding:10px}#templatedialog label{margin:16px 0}#timerview{position:absolute;top:10px;left:10px;background:#102847;color:white;font-size:30px;padding:8px 15px;border-radius:10px;pointer-events:none}

#livebar{display:flex;gap:12px;align-items:center;background:#e7f3e9;padding:6px 14px}#livebar span{flex:1}

#handdialog{width:min(650px,94vw)}#handpreview{display:block;max-width:100%;max-height:210px;object-fit:contain;margin:12px auto}#handerror{color:#a32424}#handdialog label,#workdialog label{display:block;margin:14px 0}#handdialog textarea{width:100%}

#classroombar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 14px;background:#f3f6fb;border-bottom:1px solid #c3d0df;font-size:14px}#classroomidentity{overflow-wrap:anywhere}#classroomstatus{font-size:12px;color:#52647c;flex:1}#classroomgrade{font:inherit;padding:8px;border:1px solid #c3d0df;border-radius:7px}.present #classroombar{display:none!important}

@media(max-width:700px){#classroomstatus{display:none}#classroombar{padding:6px;gap:6px}#classroomidentity{font-size:12px}}