*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden;background:#ead2c0}
#teacher{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
#mic{position:fixed;left:50%;bottom:clamp(42px,11vh,110px);transform:translateX(-50%);width:112px;height:112px;padding:0;border:8px solid #fff;border-radius:50%;background:#18c94b;box-shadow:0 8px 26px rgba(0,0,0,.25);z-index:20;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
.micIcon{position:relative;width:32px;height:48px;border:6px solid #fff;border-radius:18px}
.micIcon:before{content:"";position:absolute;left:50%;top:35px;transform:translateX(-50%);width:50px;height:25px;border:5px solid #fff;border-top:0;border-radius:0 0 26px 26px}
.micIcon:after{content:"";position:absolute;left:50%;top:54px;transform:translateX(-50%);width:6px;height:15px;background:#fff;border-radius:4px;box-shadow:-11px 15px 0 -1px #fff,11px 15px 0 -1px #fff}
#mic[hidden]{display:none}
@media(max-width:600px){#mic{width:104px;height:104px;border-width:7px;bottom:12vh}}