body{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh;overflow:hidden}#root{height:100vh;overflow:hidden}.codecapsule-embed,.sql-embed{width:100%;height:100vh;background-color:#111827;color:#fff;font-family:Monaco,Menlo,Ubuntu Mono,monospace;display:flex;flex-direction:column;overflow:hidden}.embed-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #374151;background-color:#111827}.embed-title{font-size:18px;font-weight:500;margin:0;color:#fff}.embed-tags{display:flex;align-items:center;gap:8px}.tag{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.tag-language{background-color:#3b82f633;color:#93c5fd}.tag-difficulty{background-color:#4b556380;color:#d1d5db}.embed-controls{display:flex;align-items:center;gap:8px}.control-btn{padding:8px;background:none;border:none;color:#9ca3af;cursor:pointer;border-radius:4px;transition:color .2s}.control-btn:hover{color:#fff}.control-btn.active{color:#3b82f6;background-color:#3b82f61a}.control-btn:disabled{color:#4b5563;cursor:not-allowed}.run-btn{background-color:#2563eb;color:#fff;padding:8px 16px;border:none;border-radius:6px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background-color .2s}.run-btn:hover{background-color:#1d4ed8}.run-btn:disabled{background-color:#4b5563;cursor:not-allowed}.embed-main,.sql-main{display:flex;flex:1;min-height:0;overflow:hidden;height:calc(100vh - 120px)}.instructions-panel{width:35%;border-right:1px solid #374151;display:flex;flex-direction:column;background-color:#111827;overflow:hidden;height:100%;min-height:0}.instructions-header{padding:16px;border-bottom:1px solid #374151;display:flex;align-items:center;justify-content:space-between}.instructions-title{font-weight:500;margin:0;color:#fff}.collapse-btn{background:none;border:none;color:#9ca3af;cursor:pointer;transition:color .2s}.collapse-btn:hover{color:#fff}.instructions-content{padding:16px;font-size:14px;color:#d1d5db;line-height:1.6;overflow-y:scroll;overflow-x:hidden;flex:1;min-height:0}.problem-statement{color:#cbd5e1;line-height:1.6;margin:0;padding:0}.problem-statement .problem-h1{color:#fff;font-size:20px;font-weight:600;margin:0 0 8px}.problem-statement .problem-h1:first-child{margin-top:0}.problem-statement .problem-h2{color:#e5e7eb;font-size:16px;font-weight:500;margin:16px 0 6px}.problem-statement .problem-h3{color:#d1d5db;font-size:14px;font-weight:500;margin:12px 0 4px}.problem-statement .problem-p{color:#cbd5e1;margin:8px 0}.problem-statement .problem-p:last-child{margin-bottom:0}.problem-statement .problem-ul{margin:8px 0;padding-left:20px}.problem-statement .problem-ul:last-child{margin-bottom:0}.problem-statement .problem-li{color:#cbd5e1;margin:4px 0;padding-left:8px}.collapsed-btn{width:32px;border-right:1px solid #374151;display:flex;align-items:center;justify-content:center;background:none;border-top:none;border-bottom:none;border-left:none;color:#9ca3af;cursor:pointer;transition:background-color .2s}.collapsed-btn:hover{background-color:#1f2937}.editor-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.console-panel{height:300px;border-top:1px solid #374151;display:flex;flex-direction:column;background-color:#111827;flex-shrink:0}.console-tabs{display:flex;border-bottom:1px solid #374151}.console-tab{padding:8px 16px;font-size:14px;font-weight:500;background:none;border:none;color:#9ca3af;cursor:pointer;transition:color .2s;border-bottom:2px solid transparent}.console-tab:hover{color:#fff}.console-tab.active{color:#fff;border-bottom-color:#3b82f6}.console-content{flex:1;overflow-y:auto;padding:16px;min-height:0}.test-result{margin-bottom:12px}.test-success{color:#10b981}.test-error{color:#ef4444}.test-pending{color:#6b7280}.test-list{list-style:none;padding:0;margin:8px 0}.test-item{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}.ai-mentor{background-color:#1d4ed84d;border:1px solid rgba(59,130,246,.5);border-radius:8px;padding:12px;margin-bottom:12px}.ai-mentor-header{display:flex;align-items:start;gap:8px}.ai-mentor-title{color:#93c5fd;font-weight:500;font-size:14px;margin-bottom:4px}.ai-mentor-text{color:#dbeafe;font-size:14px;line-height:1.5}.error-toggle{background:none;border:none;color:#9ca3af;font-size:14px;text-decoration:underline;cursor:pointer;transition:color .2s}.error-toggle:hover{color:#d1d5db}.raw-error{margin-top:8px;background-color:#ef444433;border:1px solid rgba(239,68,68,.5);border-radius:6px;padding:12px}.raw-error pre{color:#fca5a5;font-size:12px;white-space:pre-wrap;margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.status-bar{padding:8px 16px;border-top:1px solid #374151;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#9ca3af;background-color:#111827;flex-shrink:0;height:40px;min-height:40px}.status-left{display:flex;align-items:center;gap:16px}.status-right .brand{color:#3b82f6;font-weight:500}.loading-container{display:flex;align-items:center;justify-content:center;padding:32px;background-color:#111827;color:#fff;height:100vh}.spinner{width:32px;height:32px;border:2px solid #374151;border-top:2px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-container{padding:16px;background-color:#ef444433;border:1px solid rgba(239,68,68,.5);border-radius:8px;color:#fca5a5;height:100vh;display:flex;align-items:center;justify-content:center}.no-output{color:#6b7280;font-size:14px}.output-text{color:#d1d5db;font-size:14px;white-space:pre-wrap;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.sql-embed .sql-main{display:flex;flex:1;min-height:0;overflow:hidden}.sql-editor-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.sql-results-panel{height:350px;border-top:1px solid #374151;display:flex;flex-direction:column;background-color:#111827;flex-shrink:0;min-height:0}.data-table-container{overflow:auto;max-height:180px}.data-table{width:100%;border-collapse:collapse;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.data-table th{background-color:#374151;color:#e2e8f0;padding:8px 12px;text-align:left;font-weight:500;border-bottom:1px solid #4b5563;position:sticky;top:0}.data-table td{padding:6px 12px;border-bottom:1px solid #374151;color:#cbd5e1}.data-table tr:hover{background-color:#37415180}.schema-tree{color:#cbd5e1;font-size:13px}.no-results{color:#6b7280;font-size:14px;text-align:center;padding:20px}.sql-error{color:#fca5a5}.terminal-embed .terminal-main{display:flex;flex:1;min-height:0;overflow:hidden}.quest-panel{width:300px;border-right:1px solid #374151;display:flex;flex-direction:column;background-color:#111827;overflow:hidden}.terminal-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:16px}.terminal-container{flex:1;background-color:#0f172a;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}.terminal-header{background-color:#1e293b;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #334155}.terminal-controls{display:flex;gap:6px}.terminal-dot{width:12px;height:12px;border-radius:50%}.terminal-dot.red{background-color:#ef4444}.terminal-dot.yellow{background-color:#eab308}.terminal-dot.green{background-color:#22c55e}.terminal-title{color:#cbd5e1;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.terminal-content{flex:1;padding:16px;overflow-y:auto;background-color:#0f172a}.terminal-line{margin-bottom:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.4}.terminal-line.input{color:#e2e8f0}.terminal-line.output{color:#cbd5e1}.terminal-line.error{color:#fca5a5}.input-line{display:flex;align-items:center;gap:4px}.terminal-prompt{color:#22c55e;font-weight:500;font-family:Monaco,Menlo,Ubuntu Mono,monospace;flex-shrink:0}.terminal-input{background:transparent;border:none;outline:none;color:#e2e8f0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;flex:1;caret-color:#22c55e}.terminal-cursor{color:#22c55e;animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.task-list{max-height:300px;overflow-y:auto}