.connect-btn{border:none;cursor:pointer;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;font-family:Inter,Roboto,sans-serif;font-weight:500;font-size:1rem;z-index:1000;border-radius:12px;box-shadow:0 4px 8px #0000001a}.connect-btn:active{transform:scale(.98)}.connect-btn:disabled{opacity:.4;cursor:not-allowed}.connect-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.connect-btn.disconnected{position:fixed;bottom:6rem;transform:translate(-50%);background-color:#ff4b4b;color:#fff;padding:.75rem 1.5rem;min-height:44px;min-width:140px}.connect-btn.disconnected:hover:not(:disabled){background-color:#db3f3f;transform:translate(-50%) translateY(-2px)}.connect-btn.disconnected:active:not(:disabled){transform:translate(-50%) scale(.98)}.connect-btn.connected{position:fixed;top:1rem;right:1rem;width:56px;height:56px;border-radius:50%;background-color:var(--secondary-mint-green);padding:.5rem}.connect-btn.connected:hover:not(:disabled){background-color:#00b86e;box-shadow:0 0 20px #00e08a4d;transform:scale(1.05)}.connect-btn.connected:active:not(:disabled){transform:scale(.95)}.connect-btn.connecting{background-color:#5f6368;cursor:not-allowed}.connect-btn-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem}.connect-icon{width:24px;height:24px;filter:brightness(0) invert(1)}.loading-spinner{width:16px;height:16px;border:2px solid transparent;border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@media (prefers-reduced-motion: reduce){.connect-btn{transition-duration:.01ms}.loading-spinner{animation:none}.connect-btn:hover:not(:disabled){transform:none}.connect-btn.connected:hover:not(:disabled){transform:none}}.face{background-color:var(--face-color);margin:auto;height:var(--face-height);width:var(--face-width);position:relative}.face div{position:absolute}.eye{background-color:var(--eye-color);border-radius:100%;height:var(--eye-size);width:var(--eye-size);bottom:calc(var(--eye-size) / 3);z-index:1;transform:rotateX(0)}.eye.left{left:var(--eye-size)}.eye.right{right:var(--eye-size)}.eyelid{background-color:var(--eyelid-color);height:var(--eye-size);width:calc(var(--eye-size) * 1.75);z-index:2;transform:rotate(0)}.eyelid.upper{bottom:calc(var(--eye-size) * 1);left:calc(var(--eye-size) * -.375)}.eyelid.lower{border-radius:100%;bottom:calc(var(--eye-size) * -1);left:calc(var(--eye-size) * -.375)}.mouth--container{display:flex;justify-content:center;left:50%;top:90%;transform:translate(-50%);width:100px;height:100px}.mouth{width:50px;height:15px;z-index:1;background-color:#000;border-radius:10px 10px 20px 20px;transition:all 1s ease-in-out}.mouth.talk{animation:talk .4s linear forwards;animation-iteration-count:infinite}@keyframes talk{0%{height:15px;width:50px}50%{height:40px;width:30px}to{height:15px;width:50px}}#applauncher-container{display:flex;flex-direction:column;align-items:center;padding:var(--space-xlarge);overflow-y:auto;background-color:var(--background-soft-white)}.app-grid{display:flex;flex-wrap:wrap;gap:var(--space-medium);width:100%;max-width:600px}.app-icon{width:100px;display:flex;flex-direction:column;align-items:center;gap:var(--space-medium);padding:var(--space-medium);background:var(--surface-card-white);border:none;border-radius:var(--radius-medium);cursor:pointer;transition:all var(--transition-normal);text-decoration:none;color:inherit;box-shadow:var(--shadow-subtle);position:relative;overflow:hidden}.app-icon:hover{transform:translateY(-4px);box-shadow:var(--shadow-medium);border-color:transparent}.app-icon:active{transform:translateY(-2px) scale(.98)}.app-icon:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-sky-blue),var(--secondary-mint-green));opacity:0;transition:opacity var(--transition-normal)}.app-icon:hover:before{opacity:1}.app-emoji{font-size:1.5rem;transition:transform var(--transition-spring);filter:grayscale(.1)}.app-icon:hover .app-emoji{transform:scale(1.15) rotate(5deg)}.app-label{font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--text-primary-charcoal);text-align:center;line-height:var(--line-height-regular)}.app-icon:focus{outline:none;box-shadow:0 0 0 3px #4da8ff4d}.app-icon:focus:before{opacity:1}@media (prefers-reduced-motion: reduce){.app-icon{transition:none}.app-icon:hover,.app-icon:active,.app-icon:hover .app-emoji{transform:none}}.back-button{position:absolute;top:.5rem;left:.5rem;width:44px;height:44px;background-color:#4da8ff;color:#fff;border:none;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #4da8ff4d;transition:all .2s ease-in-out;z-index:1000}.back-button:hover{background-color:#1e6fc7;transform:scale(.95);box-shadow:0 4px 12px #4da8ff66}.back-button:active{transform:scale(.9)}.back-button:focus{outline:none;box-shadow:0 0 0 3px #4da8ff4d}@media (prefers-reduced-motion: reduce){.back-button{transition:none}.back-button:hover{transform:none}}#controlpad-container{display:flex;flex-direction:column;padding:var(--space-medium);background-color:var(--background-soft-white)}.controlpad-content{max-width:500px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center}.control-grid{display:grid;grid-template-areas:". up ." "left stop right" ". down .";gap:var(--space-large);padding:var(--space-medium)}.control-btn{width:60px;height:60px;border:none;border-radius:var(--radius-medium);background:var(--surface-card-white);color:var(--text-primary-charcoal);font-size:1.5rem;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-subtle);border:2px solid var(--neutral-light-gray);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.control-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-medium);border-color:var(--primary-sky-blue)}.control-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn:focus{outline:none;box-shadow:0 0 0 3px #4da8ff4d;border-color:var(--primary-sky-blue)}.btn-up{grid-area:up}.btn-down{grid-area:down}.btn-left{grid-area:left}.btn-right{grid-area:right}.btn-stop{grid-area:stop}.btn-stop{background:var(--accent-coral-red);border-color:var(--accent-coral-red);position:relative}.btn-stop:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffff1a;opacity:0;transition:opacity var(--transition-fast)}.btn-stop:hover:before{opacity:1}#square{background:#fff;width:50%;height:50%;border-radius:6px}.control-btn.active{background:var(--primary-sky-blue);color:#fff;border-color:var(--primary-sky-blue);box-shadow:0 0 0 3px #4da8ff33,var(--shadow-medium);animation:gentle-pulse 2s infinite}.btn-stop.active{background:var(--accent-coral-red);border-color:var(--accent-coral-red);box-shadow:0 0 0 3px #ff4b4b33,var(--shadow-medium);animation:gentle-pulse 2s infinite}@keyframes gentle-pulse{0%,to{box-shadow:0 0 0 3px #4da8ff33,var(--shadow-medium)}50%{box-shadow:0 0 0 6px #4da8ff1a,var(--shadow-medium)}}.btn-stop.active{animation-name:gentle-pulse-stop}@keyframes gentle-pulse-stop{0%,to{box-shadow:0 0 0 3px #ff4b4b33,var(--shadow-medium)}50%{box-shadow:0 0 0 6px #ff4b4b1a,var(--shadow-medium)}}@media (prefers-reduced-motion: reduce){.control-btn{transition:none}.control-btn:hover:not(:disabled){transform:none}.control-btn:active:not(:disabled){transform:none}.control-btn.active{animation:none;box-shadow:var(--shadow-medium)}}.ui-btn{border:none;cursor:pointer;transition:all .2s ease-in-out;display:inline-flex;align-items:center;justify-content:center;font-family:Inter,Roboto,sans-serif;font-weight:500;text-decoration:none;position:relative;overflow:hidden;border-radius:12px;box-shadow:0 2px 4px #0000000d;outline:none}.ui-btn:focus-visible{box-shadow:0 0 0 3px #4da8ff33}.ui-btn.small{font-size:.875rem;padding:.5rem 1rem;min-height:36px}.ui-btn.medium{font-size:1rem;padding:.75rem 1.5rem;min-height:44px}.ui-btn.large{font-size:1.125rem;padding:1rem 2rem;min-height:52px}.ui-btn.primary{background-color:#4da8ff;color:#fff}.ui-btn.primary:hover:not(.disabled){background-color:#1e6fc7;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.ui-btn.secondary{background-color:transparent;color:#202124;border:1px solid #E0E0E0}.ui-btn.secondary:hover:not(.disabled){background-color:#e0e0e0;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.ui-btn.accent{background-color:#ff4b4b;color:#fff}.ui-btn.accent:hover:not(.disabled){background-color:#e04343;transform:translateY(-2px);box-shadow:0 4px 8px #ff4b4b33}.ui-btn.success{background-color:#00e08a;color:#fff}.ui-btn.success:hover:not(.disabled){background-color:#00b86e;transform:translateY(-2px);box-shadow:0 4px 8px #00e08a33}.ui-btn.active{position:relative}.ui-btn.primary.active{background-color:#1e6fc7;box-shadow:0 0 0 2px #4da8ff4d}.ui-btn.secondary.active{background-color:#e0e0e0;border-color:#4da8ff;box-shadow:0 0 0 2px #4da8ff1a}.ui-btn.accent.active{background-color:#e04343;box-shadow:0 0 0 2px #ff4b4b4d}.ui-btn.success.active{background-color:#00b86e;box-shadow:0 0 0 2px #00e08a4d}.ui-btn:active:not(.disabled){transform:scale(.98);box-shadow:0 1px 2px #0000000d}.ui-btn.disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}.ui-btn.disabled:hover{transform:none!important;box-shadow:0 2px 4px #0000000d!important}.btn-label{font-weight:500;text-align:center;line-height:1.5;white-space:nowrap}.ui-btn.active{animation:friendlyPop .3s ease-in-out}@keyframes friendlyPop{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.ui-btn:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .3s,height .3s}.ui-btn:active:not(.disabled):after{width:100px;height:100px}@media (prefers-reduced-motion: reduce){.ui-btn{transition-duration:.01ms}.ui-btn:hover:not(.disabled){transform:none}.ui-btn:active:not(.disabled){transform:none}.ui-btn.active{animation:none}.ui-btn:after{display:none}}#expressions-container{flex-direction:column;align-items:center;padding:1rem}.movement-toggle{position:absolute;top:2%;right:2%}.toggle-label{display:flex;flex-direction:column;align-items:center}.toggle-input{display:none}.toggle-slider{width:3rem;height:1.3rem;background:#ccc;border-radius:2.5rem;position:relative;transition:all .3s ease}.toggle-slider:before{content:"";position:absolute;width:1.8rem;height:1.8rem;border-radius:50%;background:#fff;top:1px;left:2px;transition:all .3s ease}.toggle-input:checked+.toggle-slider{background:var(--secondary-mint-green)}.toggle-input:checked+.toggle-slider:before{transform:translate(25px)}.toggle-text{position:relative;top:20px;color:#2c3e50;font-size:var(--text-caption)}.expressions-grid{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:1rem;margin-top:1rem}.expression-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.expression-button{width:100%;padding:1rem .5rem;font-size:2rem;font-weight:600}.expression-button:hover{background-color:var(--primary-sky-blue)!important;color:var(--surface-card-white)}#actions-container{flex-direction:column;align-items:center;padding:1rem}.actions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem;max-width:1200px;margin-top:1rem;width:100%}button:hover{background-color:var(--primary-sky-blue)!important;color:var(--surface-card-white)!important}#parrot-container{flex-direction:column;align-items:center;overflow:scroll}#parrot-container textarea{width:95%;min-height:70px;padding:10px;border:none;border-radius:10px}.parrot-header{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%}.voice-selector-wrapper{position:absolute;top:0;right:0}.mode-toggle-container{display:flex;justify-content:center;align-items:center;gap:1rem;padding:10px 0}.mode-label{color:#666;font-weight:600;font-size:.9rem;transition:color .3s ease}.mode-label.active{color:var(--primary-sky-blue)}.toggle-switch{position:relative;display:inline-block;width:60px;height:30px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:30px;box-shadow:inset 0 2px 4px #0000001a}.toggle-slider:before{position:absolute;content:"";height:19px;width:19px;left:2px;bottom:0;background-color:#fff;transition:.4s;border-radius:50%;box-shadow:0 2px 4px #0003}.toggle-switch input:checked+.toggle-slider{background-color:var(--primary-sky-blue)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(25px)}.parrot-textarea{width:80%;height:10rem;padding:15px;border:2px solid #e0e0e0;border-radius:12px;font-size:1rem;font-family:inherit;resize:vertical;transition:border-color .3s ease;margin-bottom:1.5rem}.parrot-textarea:focus{border-color:#4a90e2;outline:none}.parrot-button{width:200px;height:50px;font-size:1.1rem;background-color:#4a90e2;border:none;border-radius:25px;box-shadow:0 4px 8px #4a90e24d;color:#fff;cursor:pointer}.parrot-button:hover{background-color:#3a80d2}.transcript-box{width:80%;padding:15px;border:2px solid #e0e0e0;border-radius:12px;background-color:#fafafa;margin-bottom:1.5rem;white-space:pre-wrap;font-size:1rem;line-height:1.5;transition:all .3s ease}.transcript-box.listening{border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e21a}.final-transcript{color:#333}.interim-transcript,.placeholder-text{color:#999;font-style:italic}.stt-controls{display:flex;gap:1rem;justify-content:center;align-items:center;margin-bottom:1rem}.listen-button{width:50px;height:50px;font-size:1rem;background-color:#4a90e2;border:none;border-radius:25px;box-shadow:0 4px 8px #4a90e24d;color:#fff;cursor:pointer}.listen-button.listening{background-color:#ff6b6b;box-shadow:0 4px 8px #ff6b6b4d}.listen-button:hover:not(:disabled){opacity:.9}.listen-button:disabled{opacity:.6;cursor:not-allowed}.play-button{width:140px;height:50px;font-size:1rem;background-color:#34c759;border:none;border-radius:25px;box-shadow:0 4px 8px #34c7594d;color:#fff;cursor:pointer}.play-button:hover:not(:disabled){background-color:#28a745}.play-button:disabled{opacity:.6;cursor:not-allowed}.notice-box{border-radius:8px;padding:6px;max-width:80%;text-align:center;font-size:.9rem}.notice-box.warning{background:#fff3cd;border:1px solid #ffeaa7;color:#856404}.notice-box.error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.commands-section{margin-top:2rem}.commands-details{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:10px}.commands-summary{cursor:pointer;font-weight:600;outline:none}.commands-list{margin-top:10px;padding-left:20px;columns:2;column-gap:2rem}.commands-list li{margin-bottom:.5rem;break-inside:avoid}.commands-list code{background:#e9ecef;padding:2px 4px;border-radius:3px;font-family:monospace}p{padding:10px 0}#thankyou-container{flex-direction:column;overflow:scroll;padding-top:5rem}.hearts-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.thankyou-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:100%;padding:2rem}.play-button{background:#4a86e8;border:2px solid rgba(255,255,255,.3);border-radius:12px;padding:1rem 2rem;font-size:1.1rem;font-weight:500;color:#fff;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:200px}.play-button:hover:not(:disabled){background:#32d900;border-color:#33d900db;transform:translateY(-1px);color:#fff}.play-button.playing{background:#4ade8033;border-color:#4ade8080;color:#4ade80}.play-button.played{background:#f8717133;border-color:#f8717180;color:#f87171}.play-button:disabled{opacity:.7;cursor:not-allowed;transform:none}@media (max-width: 768px){.thankyou-content{padding:1rem}.play-button{padding:.9rem 1.8rem;font-size:1rem;min-width:180px}}#mathgame-container{flex-direction:column;padding:.5rem;background-color:#f8f9fa;height:50vh;overflow:hidden}.mathgame-content{max-width:100%;margin:0 auto;padding:.5rem;text-align:center;height:100%;display:flex;flex-direction:column}.start-screen{display:flex;flex-direction:column;justify-content:center;height:100%;padding:.5rem}.start-screen h2{color:#202124;font-family:Poppins,Nunito Sans,sans-serif;font-size:1.5rem;font-weight:600;margin-bottom:.5rem;line-height:1.2}.start-screen p{color:#5f6368;font-family:Inter,Roboto,sans-serif;font-size:.875rem;margin-bottom:.75rem;line-height:1.3}.start-button{background-color:#4da8ff;color:#fff;border:none;border-radius:12px;padding:.75rem 1.5rem;font-family:Inter,Roboto,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease-in-out;min-height:44px;margin-top:.5rem}.start-button:hover{background-color:#1e6fc7;transform:scale(.98)}.start-button:active{transform:scale(.95)}.robot-hint{color:#4da8ff;font-style:italic;margin:.5rem 0;font-size:.8rem;font-family:Inter,Roboto,sans-serif}.welcome-message{text-align:center;padding:1rem;display:flex;flex-direction:column;justify-content:center;height:100%}.welcome-message h2{font-family:Poppins,Nunito Sans,sans-serif;color:#202124;margin-bottom:.75rem;font-size:1.25rem}.welcome-message p{font-family:Inter,Roboto,sans-serif;color:#5f6368;font-size:.875rem}.loading-spinner{border:3px solid #E0E0E0;border-top:3px solid #4DA8FF;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite;margin:15px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.game-screen{height:100%;display:flex;flex-direction:column}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-family:Inter,Roboto,sans-serif;font-size:.75rem;padding:.75rem;background:#fff;border-radius:12px;box-shadow:0 1px 4px #0000000d;flex-shrink:0}.score,.question-count{font-weight:600;color:#202124}.timer{display:flex;flex-direction:column;align-items:center;gap:.25rem}.timer-text{font-weight:600;color:#202124;font-size:.75rem}.timer-bar{width:60px;height:4px;background:#e0e0e0;border-radius:2px;overflow:hidden}.timer-progress{height:100%;background:#4da8ff;transition:width 1s linear;border-radius:2px}.question-container{margin:.5rem 0;flex-shrink:0}.question{font-family:JetBrains Mono,monospace;font-size:1.5rem;font-weight:500;color:#202124;background:#fff;padding:1rem;border-radius:12px;border:2px solid #E0E0E0;box-shadow:0 1px 4px #0000000d}.answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.5rem;flex:1;min-height:0}.answer-button{background:#fff;border:2px solid #E0E0E0;border-radius:10px;padding:.75rem;font-family:JetBrains Mono,monospace;font-size:1.125rem;font-weight:500;color:#202124;cursor:pointer;transition:all .15s ease-in-out;min-height:60px;display:flex;align-items:center;justify-content:center}.answer-button:hover:not(:disabled){border-color:#4da8ff;box-shadow:0 2px 6px #4da8ff33}.answer-button:disabled{cursor:not-allowed;opacity:.4}.answer-button.selected{border-color:#4da8ff;background:#4da8ff;color:#fff}.answer-button.correct{border-color:#00e08a;background:#00e08a;color:#fff;animation:softPop .3s ease-in-out}.answer-button.incorrect{border-color:#ff4b4b;background:#ff4b4b;color:#fff;animation:gentleShake .5s ease-in-out}.results-screen{display:flex;flex-direction:column;justify-content:center;height:100%;padding:.5rem}.results-screen h2{color:#202124;font-family:Poppins,Nunito Sans,sans-serif;font-size:1.5rem;font-weight:600;margin-bottom:.5rem;line-height:1.2}.final-score{font-family:JetBrains Mono,monospace;font-size:1.75rem;font-weight:500;color:#4da8ff;margin:.75rem 0;line-height:1.2}.score-message{font-family:Inter,Roboto,sans-serif;font-size:.875rem;color:#5f6368;margin-bottom:1rem;line-height:1.3}.robot-feedback{color:#4da8ff;font-family:Inter,Roboto,sans-serif;font-size:.8rem;font-weight:500;margin:.75rem 0;background:#4da8ff1a;padding:.75rem;border-radius:10px;border-left:3px solid #4DA8FF;line-height:1.3}.play-again-button{background-color:#4da8ff;color:#fff;border:none;border-radius:12px;padding:.75rem 1.5rem;font-family:Inter,Roboto,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease-in-out;min-height:44px;margin-top:.5rem}.play-again-button:hover{background-color:#1e6fc7;transform:scale(.98)}.play-again-button:active{transform:scale(.95)}@keyframes softPop{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes gentleShake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.timer-bar.warning{background:#ffe0b2}.timer-progress.warning{background:#ff9800}.timer-bar.critical{background:#ffcdd2}.timer-progress.critical{background:#ff4b4b;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.loading-spinner,.answer-button.correct,.answer-button.incorrect{animation:none}}#draw-container{display:flex;flex-direction:column;height:50vh;min-height:400px;max-height:50vh;position:relative;overflow:hidden}.drawing-area{flex:1;position:relative;background:#fff;border-radius:8px;overflow:hidden;min-height:200px}.drawing-canvas{width:100%;height:100%;display:block;cursor:none;background:#fafafa}.drawing-cursor{position:absolute;border:2px solid #333;border-radius:50%;pointer-events:none;z-index:1000;transform:translate(-50%,-50%);transition:width .1s,height .1s;display:none}.drawing-cursor.drawing{background:#0000001a}.instructions-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#fffffffa;display:flex;justify-content:center;z-index:1000;padding:20px}.instructions-content h3{font-weight:500;color:#333;font-size:1.3rem}.instructions-content p{line-height:1.4;color:#666;font-size:.9rem}.start-button{margin-top:20px;padding:12px 24px;font-size:1rem}.drawing-controls{display:flex;align-items:center;padding:5px 0;border-top:1px solid #eee;flex-wrap:wrap;min-height:60px}.control-group{display:flex;align-items:center;gap:10px;flex:1;min-width:120px}.control-group label{font-size:.9rem;color:#666;font-weight:500;min-width:60px}.color-picker{width:40px;height:40px;border:2px solid #eee;border-radius:8px;cursor:pointer;padding:2px;background:#fff}.brush-slider{width:100px;height:4px;background:#eee;border-radius:2px;outline:none;-webkit-appearance:none;flex:1}.brush-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#333;border-radius:50%;cursor:pointer}.clear-button{background:#ff4757;color:#fff;min-width:120px}.clear-button:hover{background:#ff3742}#pomodoro-container{display:flex;flex-direction:column;align-items:center;padding:var(--space-xlarge);overflow-y:auto;background-color:var(--background-soft-white)}.pomodoro-content{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;gap:var(--space-xlarge)}.timer-header{text-align:center;width:100%}.timer-header h2{font-family:var(--font-heading);font-size:var(--text-title);font-weight:var(--weight-semibold);color:var(--text-primary-charcoal);margin-bottom:var(--space-large)}.sessions-counter{display:flex;align-items:center;justify-content:center;gap:var(--space-medium);padding:var(--space-medium) var(--space-large);background:var(--surface-card-white);border-radius:var(--radius-small);box-shadow:var(--shadow-subtle)}.sessions-emoji{font-size:1.5rem}.sessions-count{font-family:var(--font-monospace);font-size:var(--text-numbers);font-weight:var(--weight-semibold);color:var(--primary-sky-blue)}.sessions-label{font-size:var(--text-caption);color:var(--text-secondary-gray)}.timer-display{position:relative;width:240px;height:240px;display:flex;align-items:center;justify-content:center}.timer-ring{position:absolute;width:100%;height:100%;transform:rotate(-90deg)}.timer-ring-background{fill:none;stroke:var(--neutral-light-gray);stroke-width:8}.timer-ring-progress{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s linear}.timer-ring-progress.work{stroke:var(--primary-sky-blue);filter:drop-shadow(0 0 8px rgba(77,168,255,.4))}.timer-ring-progress.break{stroke:var(--secondary-mint-green);filter:drop-shadow(0 0 8px rgba(0,224,138,.4))}.timer-text{text-align:center;z-index:1}.timer-time{font-family:var(--font-monospace);font-size:3rem;font-weight:var(--weight-semibold);color:var(--text-primary-charcoal);line-height:1;margin-bottom:var(--space-medium)}.timer-label{font-size:var(--text-body-regular);color:var(--text-secondary-gray);font-weight:var(--weight-medium)}.timer-controls{display:flex;flex-wrap:wrap;gap:var(--space-medium);justify-content:center;width:100%}.control-btn{border:none;border-radius:var(--radius-small);padding:var(--space-large) var(--space-xlarge);font-family:var(--font-body);font-size:var(--text-body-regular);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-subtle);min-width:120px;min-height:44px}.control-btn:active{transform:scale(.98)}.primary-control{background-color:var(--primary-sky-blue);color:#fff;flex:1;min-width:200px}.primary-control:hover{background-color:var(--primary-deep-blue);box-shadow:var(--shadow-medium)}.secondary-control{background-color:var(--surface-card-white);color:var(--text-primary-charcoal);border:1px solid var(--neutral-light-gray)}.secondary-control:hover{background-color:var(--input-background);border-color:var(--primary-sky-blue)}.settings-toggle{border:none;background:transparent;color:var(--text-secondary-gray);font-size:var(--text-caption);cursor:pointer;padding:var(--space-medium);transition:all var(--transition-fast);border-radius:var(--radius-small)}.settings-toggle:hover:not(:disabled){color:var(--primary-sky-blue);background-color:#4da8ff1a}.settings-toggle:disabled{opacity:.4;cursor:not-allowed}.pomodoro-info{text-align:center;padding:var(--space-large);background:var(--surface-card-white);border-radius:var(--radius-medium);box-shadow:var(--shadow-subtle);width:100%}.info-text{font-size:var(--text-caption);color:var(--text-secondary-gray);line-height:var(--line-height-loose);margin:0}.settings-screen{width:100%;display:flex;flex-direction:column;gap:var(--space-xlarge)}.settings-screen h2{font-family:var(--font-heading);font-size:var(--text-title);font-weight:var(--weight-semibold);color:var(--text-primary-charcoal);text-align:center;margin:0}.setting-group{display:flex;flex-direction:column;gap:var(--space-medium)}.setting-group label{font-size:var(--text-body-regular);font-weight:var(--weight-medium);color:var(--text-primary-charcoal)}.setting-input{width:100%;border:1px solid var(--neutral-light-gray);border-radius:var(--radius-small);background-color:var(--input-background);padding:var(--space-large);font-family:var(--font-monospace);font-size:var(--text-body-large);color:var(--text-primary-charcoal);transition:all var(--transition-fast);text-align:center}.setting-input:focus{outline:none;border-color:var(--primary-sky-blue);box-shadow:0 0 0 3px #4da8ff33}.settings-buttons{display:flex;flex-direction:column;gap:var(--space-medium);margin-top:var(--space-large)}.btn-apply,.btn-cancel{border:none;border-radius:var(--radius-small);padding:var(--space-large);font-family:var(--font-body);font-size:var(--text-body-regular);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);min-height:44px}.btn-apply{background-color:var(--primary-sky-blue);color:#fff}.btn-apply:hover{background-color:var(--primary-deep-blue)}.btn-apply:active{transform:scale(.98)}.btn-cancel{background-color:var(--surface-card-white);color:var(--text-primary-charcoal);border:1px solid var(--neutral-light-gray)}.btn-cancel:hover{background-color:var(--input-background)}.btn-cancel:active{transform:scale(.98)}@media (prefers-reduced-motion: reduce){.timer-ring-progress{transition:none}.control-btn:active,.btn-apply:active,.btn-cancel:active{transform:none}}@media (max-width: 400px){.timer-display{width:200px;height:200px}.timer-time{font-size:2.5rem}.control-btn{min-width:100px}.primary-control{min-width:100%}}#coderunner-container{display:flex;flex-direction:column;padding:var(--space-xlarge);gap:var(--space-large);overflow-y:auto;background-color:var(--background-soft-white)}.coderunner-content{display:flex;flex-direction:column;gap:var(--space-large);flex:1;min-height:0}.tabs{display:flex;gap:var(--space-small);border-bottom:2px solid var(--neutral-light-gray);-webkit-overflow-scrolling:touch}.tab{padding:var(--space-medium) var(--space-large);background:transparent;border:none;border-bottom:3px solid transparent;color:var(--text-secondary-gray);font-family:var(--font-body);font-size:var(--text-body-regular);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);position:relative;bottom:-2px;white-space:nowrap;flex-shrink:0}.tab:active{color:var(--primary-sky-blue);transform:scale(.98)}.tab.active{color:var(--primary-sky-blue);border-bottom-color:var(--primary-sky-blue)}.code-editor{flex:1;min-height:180px;display:flex}.code-editor textarea{flex:1;padding:var(--space-large);border:1px solid var(--neutral-light-gray);border-radius:var(--radius-small);background-color:var(--surface-card-white);font-family:var(--font-monospace);font-size:13px;line-height:1.5;color:var(--text-primary-charcoal);resize:none;transition:all var(--transition-fast)}.code-editor textarea:focus{outline:none;border-color:var(--primary-sky-blue);box-shadow:0 0 0 3px #4da8ff33}.code-editor textarea::placeholder{color:var(--placeholder-pale-gray);font-style:italic;font-size:12px}.preview-container{flex:1;min-height:250px;border-radius:var(--radius-medium);overflow:hidden;background:transparent;box-shadow:none;border:none}.preview-container iframe{width:100%;height:100%;border:none;background:transparent}.action-buttons{display:flex;gap:var(--space-medium);justify-content:stretch}.action-buttons .btn{flex:1;min-width:0;font-size:var(--text-caption)}.action-buttons .btn-primary{flex:1.5}.preview-buttons .btn{padding:var(--space-small) var(--space-medium);font-size:var(--text-caption-small);min-height:36px}@media (prefers-reduced-motion: reduce){.tab{transition:none}.tab:active{transform:none}.code-editor textarea{transition:none}}#navigation{position:fixed;bottom:0;left:0;width:100%;height:50px;background-color:#e0e0e0;display:flex;justify-content:space-between;align-items:center;z-index:1;transition:all .3s ease-in-out}#arrow{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #333;cursor:pointer;transform:translate(47vw);z-index:1}#arrow.down{border-bottom:none;border-top:10px solid #333;transform:translate(0) translateY(-45vh)}#left-arrow,#right-arrow{display:none;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;cursor:pointer;transform:translateY(-22vh);z-index:1;padding:0 5px}#left-arrow{border-right:10px solid #333;margin-right:10px}#right-arrow{border-left:10px solid #333;margin-left:10px}#navigation.disabled{opacity:.6;pointer-events:none}#navigation.disabled #arrow{cursor:not-allowed}#navigation.able{opacity:1;pointer-events:all}#navigation.disabled .screen-container{display:none}:root{--primary-sky-blue: #4DA8FF;--primary-deep-blue: #1E6FC7;--secondary-mint-green: #00E08A;--accent-coral-red: #FF4B4B;--background-soft-white: #F8F9FA;--surface-card-white: #FFFFFF;--text-primary-charcoal: #202124;--text-secondary-gray: #5F6368;--neutral-light-gray: #E0E0E0;--placeholder-pale-gray: #9E9E9E;--input-background: #F0F0F0;--font-heading: "Poppins", "Nunito Sans", sans-serif;--font-body: "Inter", "Roboto", sans-serif;--font-monospace: "JetBrains Mono", monospace;--base-font-size: 16px;--text-display: 2rem;--text-title: 1.5rem;--text-body-large: 1.125rem;--text-body-regular: 1rem;--text-caption: .875rem;--text-small: .75rem;--text-numbers: 1.25rem;--weight-semibold: 600;--weight-medium: 500;--weight-regular: 400;--line-height-tight: 1.2;--line-height-medium: 1.3;--line-height-regular: 1.4;--line-height-loose: 1.5;--space-small: .25rem;--space-medium: .5rem;--space-large: 1rem;--space-xlarge: 1.5rem;--space-xxlarge: 2rem;--radius-small: 12px;--radius-medium: 16px;--radius-large: 20px;--radius-circle: 50%;--button-height: 44px;--icon-button-size: 40px;--floating-button-size: 56px;--shadow-subtle: 0 2px 8px rgba(0, 0, 0, .08);--shadow-medium: 0 4px 12px rgba(0, 0, 0, .12);--shadow-floating: 0 8px 24px rgba(0, 0, 0, .16);--transition-fast: .15s ease-in-out;--transition-normal: .2s ease-in-out;--transition-slow: .3s ease-in-out;--transition-spring: .3s cubic-bezier(.34, 1.56, .64, 1);--mobile: 360px;--tablet: 768px;--desktop: 1024px;--face-color: var(--background-soft-white);--face-height: 30vh;--face-width: 100%;--eye-size: 15vmin;--eye-color: black;--eyelid-color: var(--background-soft-white)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--base-font-size)}body{font-family:var(--font-body);font-size:var(--text-body-regular);line-height:var(--line-height-loose);color:var(--text-primary-charcoal);background-color:var(--background-soft-white);margin:0;padding:0;display:flex;flex-direction:column;align-items:center;overflow:hidden;text-align:center}h1,.display{font-family:var(--font-heading);font-size:var(--text-display);font-weight:var(--weight-semibold);line-height:var(--line-height-tight);margin:0 0 var(--space-large) 0}h2,.title{font-family:var(--font-heading);font-size:var(--text-title);font-weight:var(--weight-semibold);line-height:var(--line-height-medium);margin:var(--space-large) 0}.body-large{font-size:var(--text-body-large);line-height:var(--line-height-loose)}.body-regular{font-size:var(--text-body-regular);line-height:var(--line-height-loose)}.caption{font-size:var(--text-caption);line-height:var(--line-height-regular);color:var(--text-secondary-gray)}.small{font-size:var(--text-small);line-height:var(--line-height-medium);color:var(--text-secondary-gray)}.numbers{font-family:var(--font-monospace);font-size:var(--text-numbers);font-weight:var(--weight-medium);line-height:var(--line-height-tight)}.screen{position:fixed;bottom:0;left:0;width:100%;height:50vh;background:var(--background-soft-white);display:flex;flex-direction:column;padding:var(--space-xlarge);overflow-y:auto;transition:transform var(--transition-normal)}.screen-container{position:fixed;bottom:0;left:0;max-width:1200px;margin:0 auto;width:100%;height:50vh;display:flex;flex-direction:column}.screen-title{font-family:var(--font-heading);font-size:var(--text-title);font-weight:var(--weight-semibold);color:var(--text-primary-charcoal);margin-bottom:var(--space-medium);display:flex;flex-direction:column;align-items:center;gap:var(--space-medium)}.screen-subtitle{font-size:var(--text-caption);color:var(--text-secondary-gray);font-weight:var(--weight-regular);margin-bottom:var(--space-medium);line-height:var(--line-height-regular)}.btn{border:none;border-radius:var(--radius-small);padding:0 var(--space-xlarge);height:var(--button-height);font-family:var(--font-body);font-size:var(--text-body-regular);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-medium);min-width:44px;min-height:44px}.btn:focus{outline:2px solid var(--primary-sky-blue);outline-offset:2px}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background-color:var(--primary-sky-blue);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-deep-blue)}.btn-secondary{background-color:transparent;color:var(--text-primary-charcoal);border:1px solid var(--neutral-light-gray)}.btn-secondary:hover:not(:disabled){background-color:var(--neutral-light-gray)}.btn-icon{width:var(--icon-button-size);height:var(--icon-button-size);border-radius:var(--radius-circle);padding:0;background-color:var(--surface-card-white);box-shadow:var(--shadow-subtle);border:none}.btn-icon:hover:not(:disabled){box-shadow:0 0 0 3px #4da8ff33}.btn-icon:active:not(:disabled){transform:scale(.95)}.input{width:100%;border:1px solid var(--neutral-light-gray);border-radius:var(--radius-small);background-color:var(--input-background);padding:var(--space-large);font-family:var(--font-body);font-size:var(--text-body-regular);color:var(--text-primary-charcoal);transition:all var(--transition-fast)}.input::placeholder{color:var(--placeholder-pale-gray)}.input:focus{outline:none;border-color:var(--primary-sky-blue);box-shadow:0 0 0 3px #4da8ff33}.input-error{border-color:var(--accent-coral-red);animation:shake .2s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.card{background-color:var(--surface-card-white);border-radius:var(--radius-medium);padding:var(--space-xlarge);box-shadow:var(--shadow-subtle)}.top-bar{background-color:var(--surface-card-white);box-shadow:var(--shadow-subtle);padding:var(--space-large) var(--space-xlarge)}.bottom-nav{background-color:#ffffffe6;border-top-left-radius:var(--radius-medium);border-top-right-radius:var(--radius-medium);padding:var(--space-medium)}.status-indicator{width:8px;height:8px;border-radius:var(--radius-circle);display:inline-block}.status-connected{background-color:var(--secondary-mint-green);box-shadow:0 0 0 2px #00e08a4d}.status-disconnected{background-color:var(--neutral-light-gray)}.feedback-success{background-color:var(--secondary-mint-green);color:#fff;animation:pop var(--transition-spring)}.feedback-error{background-color:var(--accent-coral-red);color:#fff;animation:shake .2s ease-in-out}.feedback-info{background-color:var(--primary-sky-blue);color:#fff;animation:fadeIn .15s ease-in-out}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.robot-eyes,.feedback-success,.feedback-error,.feedback-info{animation:none!important}.btn:active,.btn-icon:active{transform:none}}