.virtual-classroom{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.board-line-content{transition:all .3s ease-in-out}@keyframes typeText{0%{width:0}to{width:100%}}.typing-animation{overflow:hidden;white-space:nowrap;animation:typeText 1s steps(40)}@keyframes highlightFlash{0%{background-color:transparent}50%{background-color:#ff0}to{background-color:rgba(255,255,0,.3)}}.highlight-animation{animation:highlightFlash .8s ease-in-out}@keyframes circleGrow{0%{transform:scale(0);border-width:0}50%{transform:scale(1.1);border-width:3px}to{transform:scale(1);border-width:2px}}.circle-animation{animation:circleGrow .6s ease-out}@keyframes arrowDraw{0%{stroke-dasharray:0,100}to{stroke-dasharray:100,0}}.arrow-animation{animation:arrowDraw 1s ease-in-out}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;border-radius:4px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.2)}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;border:none;box-shadow:0 2px 4px rgba(0,0,0,.2)}@media (max-width:768px){.virtual-classroom .bg-gray-100{padding:1rem}.virtual-classroom .space-y-8{gap:1.5rem}.virtual-classroom .text-lg{font-size:1rem}.virtual-classroom .w-8.h-8{width:1.5rem;height:1.5rem;font-size:.75rem}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.fade-in-animation{animation:fadeInDown .3s ease-out}.loading-spinner{border:2px solid #f3f3f3;border-top-color:#3b82f6;border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.image-panel-slide{transition:width .3s ease-in-out,opacity .3s ease-in-out}.virtual-classroom button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.2)}.virtual-classroom button:active:not(:disabled){transform:translateY(0)}.virtual-classroom button:focus,.virtual-classroom input:focus,.virtual-classroom select:focus{outline:2px solid #3b82f6;outline-offset:2px}@keyframes drawLine{0%{width:0}to{width:100%}}.separator-animation{animation:drawLine .8s ease-out}@keyframes textReveal{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.reveal-animation{animation:textReveal .6s ease-out}