.classroom{box-sizing:border-box;color:#294437;background:#f4efdd;border:0;border-radius:24px;width:min(860px,100vw - 20px);max-width:none;max-height:calc(100dvh - 20px);padding:16px;font-family:Pond Nunito,system-ui,sans-serif;box-shadow:0 24px 90px #102d2966}.classroom::backdrop{background:#16392e}.classroom-shell{gap:10px;display:grid}.classroom-header{z-index:1;background:#f4efdd;align-items:center;gap:14px;display:flex;position:sticky;top:-16px}.classroom-teacher{-o-object-fit:contain;object-fit:contain;width:72px;height:82px}.classroom-header h2{margin:0 0 5px;font-size:clamp(17px,2.6vw,25px)}.classroom-header p{color:#617461;margin:0;font-size:14px}.classroom button{font:inherit;color:#315342;cursor:pointer;touch-action:manipulation;background:#fffdf2;border:1px solid #c5cdb6;border-radius:12px;min-height:46px;padding:10px 16px;font-weight:800}.classroom button:hover:not(:disabled){background:#e5edcf}.classroom button:focus-visible{outline-offset:3px;outline:3px solid #338779}.classroom button:disabled{opacity:.38;cursor:default}.classroom .classroom-close{color:#fff9df;background:#315b45;border-color:#315b45;flex-shrink:0;margin-left:auto}.classroom .classroom-close:hover{background:#214633}.classroom-board{color:#fffbea;background:radial-gradient(at 40% 20%,#305b4d,#193e34);border:8px solid #ac8153;border-bottom-width:14px;border-radius:12px;box-shadow:inset 0 0 28px #102c2766,0 3px #755333}.classroom-board-top{color:#d5e2ce;justify-content:space-between;gap:12px;padding:15px 18px 0;font-size:13px;display:flex}.classroom-board-top span:last-child{white-space:nowrap;color:#acccbb}.classroom-board svg{width:100%;max-height:350px;display:block;overflow:visible}.classroom-caption{text-align:center;max-width:640px;min-height:3em;margin:0 auto;padding:8px 20px 18px;font-size:16px;line-height:1.55}.classroom-footnote,.classroom-legend{text-align:center;color:#68785f;margin:0;font-size:12px}.classroom-controls{grid-template-columns:1fr 1.2fr 1fr;gap:10px;margin-top:6px;display:grid}@media (width<=540px){.classroom{border-radius:18px;padding:12px}.classroom-header{flex-wrap:wrap;gap:8px}.classroom-header>div{flex:1}.classroom-teacher{width:47px;height:57px}.classroom-header p{font-size:12px}.classroom .classroom-close{width:100%;min-height:42px}.classroom-board{border-width:5px 5px 10px}.classroom-board-top{padding:12px 10px 0;font-size:11px}.classroom-caption{min-height:4.5em;padding:6px 12px 14px;font-size:14px}.classroom-controls{gap:6px}.classroom button{padding:8px 5px;font-size:12px}.classroom-footnote,.classroom-legend{font-size:10px}}@media (height<=540px) and (width>=541px){.classroom{padding:10px 16px}.classroom-shell{gap:5px}.classroom-teacher{width:42px;height:42px}.classroom-header h2{font-size:18px}.classroom-footnote,.classroom-header p,.classroom-legend{display:none}.classroom-board svg{max-height:155px}.classroom-board-top{padding-top:7px}.classroom-caption{min-height:2em;padding:0 12px 7px;font-size:12px}.classroom button{min-height:40px;padding:6px 12px}}