html,body{width:100%;height:100%;margin:0;padding:0;font-family:Arial,sans-serif}body{touch-action:none;overflow:hidden}#app{width:100%;height:100%}.app-shell{box-sizing:border-box;text-align:center;color:#000;background:#fff;width:100%;height:100%;padding:20px}.app-shell h1{margin:10px 0;font-size:42px}.app-shell input,.app-shell button{padding:8px 12px;font-size:20px}.receiver-shell{box-sizing:border-box;text-align:center;color:#fff;background:#000;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;display:flex}.receiver-shell h1{margin:0 0 12px;font-size:28px}.receiver-shell p{margin:6px 0;font-size:18px}#pairingCode{letter-spacing:8px;margin:10px 0;font-size:42px}#viewer{touch-action:none;background:#000;width:100%;height:100%;position:fixed;inset:0;overflow:hidden}#remoteVideo{object-fit:contain;pointer-events:none;background:#000;width:100%;height:100%;position:absolute;inset:0}#remoteVideo[hidden]{display:none}#handwritingPanel{z-index:3000;box-sizing:border-box;background:#141414f0;border:2px solid #777;border-radius:12px;width:80%;max-width:480px;padding:8px;position:fixed;bottom:8%;left:10%}#handwritingPanel[hidden]{display:none}#handwritingHeader{box-sizing:border-box;justify-content:space-between;align-items:center;height:34px;padding:0 4px 6px 8px;font-size:15px;font-weight:700;display:flex}#handwritingTest{box-sizing:border-box;color:#000;background:#fff;border:2px solid #0000;border-radius:8px;width:100%;height:48px;padding:8px 12px;font-size:20px}#minimizeHandwriting{color:#fff;background:#444;border:2px solid #0000;border-radius:6px;width:34px;height:30px;padding:0;font-size:22px}#handwritingTest.box-selected,#minimizeHandwriting.box-selected{outline-offset:2px;outline:4px solid #fff;box-shadow:0 0 0 2px #000}#handwritingDot{z-index:3000;background:red;border:3px solid #fff;border-radius:50%;width:46px;height:46px;padding:0;position:fixed;bottom:70px;left:30px}#handwritingDot[hidden]{display:none}