@import"https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}html{height:100%;display:flex;font-family:Google Sans Text,Google Sans}body{display:flex;flex-direction:column;flex:1;margin:0;overflow:hidden;--color-bg: #101018;--color-text: #e0e0e0;--toolbar-bg: #1a1a2e;--toolbar-border: #2a2a4a;--button-bg: #2e2e4f;--button-border: #4a4a7f;--button-hover-bg: #3a3a6f;--neon-blue: #00aaff;--neon-red: #ff3366;--neon-white: #ffffff;--neon-green: #39ff14;--neon-orange: #ffaa00;--glow-blue: #4da6ff;--glow-purple: #b366ff;--glow-pink: #ff66b3}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#828282b3;border-radius:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-corner{background:transparent}body{background-color:var(--color-bg);color:var(--color-text)}.playground{border-top:1px solid var(--toolbar-border)}.hidden{display:none!important}#root,.playground{height:100%;overflow:hidden}.playground{display:flex;flex:1}.toolbar{position:relative;height:80px;display:flex;justify-content:center;align-items:center;background-color:var(--toolbar-bg);border-top:1px solid var(--toolbar-border);box-shadow:0 -5px 20px #0000004d;padding:0 20px;z-index:10}.toolbar-center-group{display:flex;gap:25px;align-items:center}.toolbar button{width:55px;height:55px;border-radius:50%;border:1px solid var(--button-border);background-color:var(--button-bg);color:var(--neon-white);display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:transform .2s cubic-bezier(.25,.8,.25,1),background-color .2s ease,box-shadow .3s ease,color .3s ease;box-shadow:inset 0 2px 2px #ffffff1a,0 4px 6px #0006,0 0 5px #fff3}.toolbar button:hover{transform:translateY(-3px);background-color:var(--button-hover-bg);box-shadow:inset 0 2px 2px #ffffff1a,0 6px 12px #00000080,0 0 10px var(--neon-blue),0 0 20px var(--neon-blue);color:var(--neon-blue)}.toolbar button:active{transform:translateY(1px);box-shadow:inset 0 3px 5px #00000080}.toolbar button.disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:inset 0 2px 2px #ffffff1a,0 4px 6px #0006;color:#888}#micButton.listening{transform:translateY(1px);background-color:#4d1a2a;color:var(--neon-red);box-shadow:inset 0 3px 5px #00000080,0 0 12px var(--neon-red),0 0 25px var(--neon-red),0 0 40px var(--neon-red)}#penButton.drawing-active{transform:translateY(1px);background-color:#1a2a4d;color:var(--neon-blue);box-shadow:inset 0 3px 5px #00000080,0 0 12px var(--neon-blue),0 0 25px var(--neon-blue),0 0 40px var(--neon-blue)}#clear:hover,#uploadButton:hover{color:var(--neon-white);box-shadow:inset 0 2px 2px #ffffff1a,0 6px 12px #00000080,0 0 10px var(--neon-white),0 0 20px var(--neon-white)}#exitGameButton{border-color:var(--neon-red);color:var(--neon-red)}#exitGameButton:hover{background-color:#4d1a2a;color:var(--neon-red);box-shadow:inset 0 2px 2px #ffffff1a,0 6px 12px #00000080,0 0 10px var(--neon-red),0 0 20px var(--neon-red)}#fullscreenButton{position:absolute;left:20px;width:28px;height:28px}#fullscreenButton svg{width:15px;height:15px}#settingsButton{position:absolute;right:20px;width:28px;height:28px}#settingsButton svg{width:15px;height:15px}.main-container{display:flex;flex:1;flex-direction:column;position:relative}main{display:flex;align-items:center;justify-content:center;flex:1;position:relative;overflow:hidden}@-webkit-keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 1s linear infinite}.preview-iframe{width:100%;height:100%;border:0;outline:0;box-shadow:none;margin:0;padding:0;background-color:transparent;position:absolute;top:0;left:0;z-index:2;pointer-events:none}#micButton.listening:hover,#penButton.drawing-active:hover{transform:translateY(1px)}.visualizing-overlay{position:absolute;inset:0;background:#0a0a14cc;backdrop-filter:blur(5px);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;gap:1em;font-size:1.2em}.drawing-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.drawing-canvas.drawing-active{pointer-events:auto;cursor:crosshair}.user-info{position:absolute;top:10px;left:50%;background-color:#1a1a2ecc;border:1px solid var(--toolbar-border);color:#fff;padding:8px 20px;text-align:center;font-size:1.1em;z-index:6;pointer-events:none;border-radius:20px;backdrop-filter:blur(5px);opacity:0;transform:translate(-50%) translateY(-20px);transition:opacity .4s ease-out,transform .4s ease-out}.user-info.visible{opacity:1;transform:translate(-50%) translateY(0)}.system-message{position:absolute;bottom:100px;left:50%;background-color:#1a1a2ee6;border:1px solid var(--toolbar-border);color:#fff;padding:10px 25px;font-size:1.2em;z-index:12;pointer-events:none;border-radius:8px;backdrop-filter:blur(8px);opacity:0;transform:translate(-50%) translateY(20px);transition:opacity .4s ease-out,transform .4s ease-out;box-shadow:0 4px 15px #00000080}.system-message.visible{opacity:1;transform:translate(-50%) translateY(0)}.system-message.success{border-color:var(--neon-green);color:var(--neon-green);text-shadow:0 0 5px var(--neon-green)}.system-message.info{border-color:var(--neon-blue);color:var(--neon-blue);text-shadow:0 0 5px var(--neon-blue)}.system-message.error{border-color:var(--neon-red);color:var(--neon-red);text-shadow:0 0 5px var(--neon-red)}.transcription-container{position:absolute;bottom:100px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:8;pointer-events:none;opacity:0;transition:opacity .3s ease-in-out;max-width:80%}.transcription-container.visible{opacity:1}.transcription-box{padding:12px 20px;border-radius:15px;backdrop-filter:blur(10px);font-size:1em;line-height:1.5;box-shadow:0 2px 10px #0000004d}.transcription-box.model-only{background-color:#1a1a2ee6;border:1px solid var(--neon-blue);color:var(--neon-blue);text-align:center;width:100%}.settings-overlay{position:absolute;inset:0;background:#0a0a14b3;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s ease}.settings-overlay.visible{opacity:1;pointer-events:auto}.settings-panel{background-color:var(--toolbar-bg);border:1px solid var(--toolbar-border);border-radius:12px;padding:25px 35px;width:90%;max-width:400px;box-shadow:0 10px 30px #00000080;transform:scale(.95);transition:transform .3s ease}.settings-overlay.visible .settings-panel{transform:scale(1)}.settings-panel h2{color:var(--neon-white);text-align:center;margin-bottom:25px;font-weight:500}.settings-panel .form-group{margin-bottom:20px}.settings-panel label{display:block;margin-bottom:8px;color:var(--color-text);font-size:.9em}.settings-panel select{width:100%;padding:10px;border-radius:6px;background-color:var(--button-bg);border:1px solid var(--button-border);color:var(--color-text);font-size:1em;cursor:pointer}.settings-panel select:focus{outline:none;border-color:var(--neon-blue);box-shadow:0 0 8px var(--neon-blue)}.settings-panel .close-button{position:absolute;top:10px;right:10px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:5px;line-height:1}.uploaded-image-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;z-index:2;pointer-events:none}.uploaded-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 10px 30px #00000080}.welcome-message-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:none;background:transparent;backdrop-filter:none}.welcome-message-content{position:relative;text-align:center;padding:40px 60px;max-width:90%}.glow-layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;filter:blur(40px);opacity:.3;animation:pulse 3s ease-in-out infinite}.glow-blue{width:300px;height:300px;background:radial-gradient(circle,var(--glow-blue) 0%,transparent 70%);animation-delay:0s}.glow-purple{width:350px;height:350px;background:radial-gradient(circle,var(--glow-purple) 0%,transparent 70%);animation-delay:1s}.glow-pink{width:280px;height:280px;background:radial-gradient(circle,var(--glow-pink) 0%,transparent 70%);animation-delay:2s}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.5}}.welcome-title{position:relative;font-family:Google Sans Text,Google Sans,Segoe UI,Tahoma,sans-serif;font-size:48px;font-weight:700;color:#fff;margin:0 0 20px;text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(77,166,255,.6),0 0 30px rgba(179,102,255,.4),0 0 40px rgba(255,102,179,.3),2px 2px 4px rgba(0,0,0,.5);letter-spacing:1px;line-height:1.3}.welcome-subtitle{position:relative;font-family:Google Sans Text,Google Sans,Segoe UI,Tahoma,sans-serif;font-size:24px;font-weight:500;color:#e0e0e0;margin:0 0 15px;text-shadow:0 0 8px rgba(255,255,255,.6),0 0 15px rgba(77,166,255,.4),2px 2px 3px rgba(0,0,0,.4);letter-spacing:.5px}.welcome-instruction{position:relative;font-family:Google Sans Text,Google Sans,Segoe UI,Tahoma,sans-serif;font-size:20px;font-weight:400;color:silver;margin:0;text-shadow:0 0 6px rgba(255,255,255,.4),0 0 12px rgba(179,102,255,.3),2px 2px 3px rgba(0,0,0,.3);letter-spacing:.3px}@media(max-width:600px){.welcome-message-content{padding:30px 40px}.welcome-title{font-size:32px}.welcome-subtitle{font-size:18px}.welcome-instruction{font-size:16px}.glow-blue{width:200px;height:200px}.glow-purple{width:230px;height:230px}.glow-pink{width:180px;height:180px}.toolbar{height:70px;padding:0 15px}.toolbar-center-group{gap:10px}.toolbar button{width:48px;height:48px}#fullscreenButton{left:15px;width:25px;height:25px}#settingsButton{right:15px;width:25px;height:25px}.user-info{font-size:1em;padding:6px 15px}.system-message{bottom:90px;font-size:1em;padding:8px 20px;width:80%;text-align:center}.transcription-container{bottom:80px;left:10px;right:10px}.transcription-box{max-width:75%;font-size:.8em}}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease}.settings-overlay.visible{opacity:1;pointer-events:all}.settings-panel{background:#fff;border-radius:16px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px #0003;position:relative;direction:rtl;text-align:right}.settings-panel h2{margin:0 0 20px;color:#2c3e50;font-size:24px;text-align:center}.close-button{position:absolute;top:12px;left:12px;background:#e74c3c;color:#412020;border:none;border-radius:50%;width:32px;height:32px;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-button:hover{background:#c0392b;transform:scale(1.1)}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#34495e;font-weight:600;font-size:16px}.form-group select{width:100%;padding:12px;border:2px solid #bdc3c7;border-radius:8px;font-size:16px;background:#fff;color:#000;cursor:pointer;transition:border-color .2s ease;direction:rtl}.form-group select option{color:#000;background:#fff}.form-group select:hover{border-color:#3498db}.form-group select:focus{outline:none;border-color:#2980b9;box-shadow:0 0 0 3px #3498db1a}.teacher-profile-card{margin-top:20px;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff;box-shadow:0 4px 16px #667eea4d}.teacher-profile-card h3{margin:0 0 12px;font-size:22px;text-align:center;font-weight:700}.teacher-description{font-size:15px;line-height:1.6;margin-bottom:16px;text-align:center;opacity:.95}.teacher-details{background:#ffffff1a;border-radius:8px;padding:16px;backdrop-filter:blur(10px)}.detail-item{margin-bottom:12px;font-size:14px;line-height:1.5}.detail-item:last-child{margin-bottom:0}.detail-item strong{display:block;margin-bottom:4px;font-weight:700;font-size:15px;color:#fff}.settings-panel::-webkit-scrollbar{width:8px}.settings-panel::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.settings-panel::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.settings-panel::-webkit-scrollbar-thumb:hover{background:#555}@media(max-width:600px){.settings-panel{width:95%;padding:20px}.teacher-profile-card{padding:16px}.teacher-profile-card h3{font-size:20px}.teacher-description{font-size:14px}.detail-item{font-size:13px}}