:root{--font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-code: "JetBrains Mono", "Fira Code", "Consolas", monospace;--font-sidebar: "Space Grotesk", sans-serif;--bg-primary: #0c0c14;--bg-secondary: #12121e;--bg-elevated: #1a1a2e;--bg-surface: rgba(255, 255, 255, .03);--bg-surface-hover: rgba(255, 255, 255, .06);--text-primary: #f0eef6;--text-secondary: #a8a3b8;--text-tertiary: #7a7490;--accent-primary: #7c6cf0;--accent-primary-hover: #8b7df5;--accent-secondary: #a78bfa;--accent-gradient: linear-gradient(135deg, #7c6cf0 0%, #a78bfa 100%);--accent-glow: rgba(124, 108, 240, .3);--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--info: #3b82f6;--border-subtle: rgba(255, 255, 255, .06);--border-default: rgba(255, 255, 255, .1);--border-accent: rgba(124, 108, 240, .3);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 8px 24px rgba(0, 0, 0, .3);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .4);--shadow-accent: 0 4px 20px rgba(124, 108, 240, .25);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}html,body,#root{width:100%;min-height:100vh;margin:0;padding:0;background-color:var(--bg-primary);overflow-x:hidden}body{font-family:var(--font-body);font-weight:400;line-height:1.6;color:var(--text-primary)}#root{overflow-y:auto}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.2}code,pre,kbd,samp{font-family:var(--font-code)}a{font-weight:500;color:var(--accent-primary);text-decoration:inherit;transition:color var(--transition-fast)}a:hover{color:var(--accent-primary-hover)}button{border-radius:var(--radius-md);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:var(--font-body);background-color:transparent;cursor:pointer;transition:all var(--transition-base)}button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}button:active{transform:scale(.97)}input,textarea,select{font-family:var(--font-body)}select option{background:#1a1a2e;color:#f0eef6}input::placeholder,textarea::placeholder{color:var(--text-tertiary)}input:focus,textarea:focus,select:focus{border-color:var(--accent-primary)!important;outline:none;box-shadow:0 0 0 3px #7c6cf026}::selection{background:#7c6cf04d;color:var(--text-primary)}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse-glow{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.6;transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(max-width:768px){body{font-size:16px}button,a,input,select,textarea{min-height:44px}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.dropdown-container{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);padding:2rem;border-radius:1rem;max-width:600px;margin:2rem auto}.sql-preview{position:sticky;top:1rem;z-index:10;background-color:#000000b3;padding:1rem;border-radius:.5rem;max-width:600px;margin:1rem auto;word-wrap:break-word}.table-container{position:fixed;top:1rem;left:1rem;background-color:#000000f2;padding:1rem;border-radius:.5rem;z-index:1000;max-height:90vh;overflow:auto;min-width:300px;max-width:90vw;width:auto;box-shadow:0 0 10px #000000b3;transition:all .3s ease}.table-container table{border-collapse:collapse;width:max-content;min-width:100%;table-layout:auto}.table-container th,.table-container td{padding:.5rem;border:1px solid #444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-container th{position:sticky;top:0;background-color:#1f2937;color:#fff;font-weight:700;z-index:2;text-align:left}.table-container .table-wrapper{overflow-x:auto;width:100%}@media screen and (max-width:640px){.table-container{width:95%;left:50%;transform:translate(-50%);top:5rem}.table-container table{display:block;overflow-x:auto;white-space:nowrap}.table-container th,.table-container td{font-size:.8rem;padding:.3rem .5rem}}.pay-btn{background-color:#3b82f6;color:#fff;border:none;padding:.8rem 1.6rem;border-radius:.5rem;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.pay-btn:hover{background-color:#2563eb;transform:scale(1.03)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#000000e6;padding:2rem;border-radius:.5rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;color:#fff}.modal-content h3{margin-top:0;color:#fff}.modal-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;float:right}.progress-list{margin-top:1rem}.progress-btn{display:block;width:100%;padding:.5rem;margin-bottom:.5rem;border:none;border-radius:.5rem;cursor:pointer;font-size:.9rem;text-align:left}.unlocked{background-color:#22c55e;color:#fff}.locked{background-color:#6b7280;color:#fff;cursor:not-allowed}.sql-code{background-color:#1f2937;padding:1rem;border-radius:.5rem;font-family:monospace;white-space:pre-wrap;word-break:break-word}.menu-btn{position:fixed;top:1rem;right:1rem;background-color:#3a3d55;color:#f5f5f5;padding:.5rem 1rem;border-radius:.25rem;border:none;cursor:pointer;font-weight:700;z-index:1010;transition:all .3s ease}.menu-btn:hover{background-color:#505272;transform:scale(1.05)}.sidenav-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.sidenav{position:fixed;top:0;right:-420px;width:360px;height:100%;background-color:#000000e6;padding:1rem;transition:right .3s ease;z-index:1000;overflow-y:auto}.sidenav-open{right:0}.sidenav-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;margin-bottom:1rem}.sidenav h3{color:#fff;margin-bottom:1rem}.sidenav-btn{display:block;width:100%;padding:.8rem;margin-bottom:.5rem;background-color:#3b82f6;color:#fff;border:none;border-radius:.5rem;cursor:pointer;font-size:1rem;transition:background .2s}.sidenav-btn:hover{background-color:#2563eb}html,body{margin:0;padding:0;height:100%;width:100%}body{font-family:Fira Code,monospace;background-color:#0d1117;color:#cdd6f4}#root{width:100%;height:100vh}.sidenav{width:250px;background-color:#2a2a3f;padding:1rem;display:flex;flex-direction:column;overflow-y:auto;transition:transform .3s ease;z-index:1000}.sidenav-open{transform:translate(0)}.sidenav-close{align-self:flex-end;background:none;border:none;color:#f5f5f5;font-size:1.2rem;cursor:pointer}.sidenav h3{margin-top:0;color:#f5f5f5}.sidenav-btn{padding:.5rem 1rem;margin:.25rem 0;background-color:#3a3d55;border-radius:.25rem;border:none;color:#f5f5f5;text-align:left;cursor:pointer;font-size:.9rem;transition:background .2s}.sidenav-btn:hover{background-color:#505272}.logout-btn{background-color:#ef4444}.logout-btn:hover{background-color:#dc2626}.editor-container{flex:1;display:flex;flex-direction:column;padding:1rem;gap:1rem}.sql-preview{background-color:#1e1e2f;padding:1rem;border-radius:.5rem;font-family:Fira Code,monospace;border:1px solid #333;max-height:120px;overflow-x:auto}.dropdown-container select{width:100%;padding:.5rem;border-radius:.25rem;border:1px solid #555;background-color:#2a2a3f;color:#f5f5f5;font-family:Fira Code,monospace;font-size:.9rem}.dropdown-container select:disabled{opacity:.6;cursor:not-allowed}button{font-family:Fira Code,monospace;font-weight:700;transition:background .2s,transform .2s}button:hover{transform:scale(1.02)}.table-container{position:fixed;top:1rem;right:1rem;background-color:#000000f2;padding:1rem;border-radius:.5rem;z-index:1000;max-height:90vh;overflow:auto;width:430px;box-shadow:0 0 10px #000000b3;transition:all .3s ease}.table-container table{border-collapse:collapse;width:100%;table-layout:fixed}.table-container th,.table-container td{padding:.5rem;border:1px solid #444;word-wrap:break-word;transition:background-color .3s,color .3s}.table-container th{position:sticky;top:0;background-color:#1f2937;color:#fff;font-weight:700;z-index:2}.table-container tbody tr:nth-child(2n){background-color:#ffffff0d}.table-container tbody tr:hover{background-color:#ffffff26}.table-container th.selected,.table-container td.selected{background-color:#22c55e!important;color:#fff;font-weight:700}.table-container td.placeholder{color:#999;text-align:center}@media screen and (max-width:640px){.table-container{width:90%;left:50%;transform:translate(-50%);top:5rem}.table-container table{display:block;overflow-x:auto;white-space:nowrap}}.modal-overlay{background-color:#1e1e2ff2}.modal-content{background-color:#2a2a3f;border-radius:.5rem;padding:1rem;max-width:500px;color:#f5f5f5}.modal-close{color:#f5f5f5;cursor:pointer;font-size:1.2rem}.menu-btn{position:fixed;top:1rem;right:1rem;background-color:#3a3d55;color:#f5f5f5;padding:.5rem 1rem;border-radius:.25rem}.show-table-btn{position:fixed;top:1rem;left:1rem;padding:.5rem 1rem;background-color:#facc15;border:none;border-radius:.5rem;cursor:pointer;font-weight:700;z-index:1010;transition:all .3s ease}.show-table-btn:hover{background-color:#eab308;transform:scale(1.05)}.show-table-btn.active{background-color:#22c55e}.leaderboard-table-container{margin-top:1rem;max-height:400px;overflow-y:auto;border-radius:.5rem;border:1px solid #444}.leaderboard-table{width:100%;border-collapse:collapse;background-color:#000000e6;color:#fff;font-family:monospace}.leaderboard-table th,.leaderboard-table td{padding:.8rem;text-align:left;border-bottom:1px solid #444}.leaderboard-table th{background-color:#1f2937;font-weight:700;position:sticky;top:0;z-index:1}.leaderboard-table tr:hover{background-color:#ffffff1a}.leaderboard-table td:first-child{font-weight:700;color:#f59e0b;width:80px}.leaderboard-table td:nth-child(3){color:#22c55e;text-align:center;width:120px}.table-header-controls{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.table-header-controls h3{margin:0;font-size:.95rem;color:#f1f5f9}.table-minimize-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#94a3b8;border-radius:.35rem;padding:.1rem .55rem;font-size:1.1rem;line-height:1;cursor:pointer;transition:all .2s ease;flex-shrink:0}.table-minimize-btn:hover{background:#ef44442e;border-color:#ef444466;color:#f87171}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}:root{--sql-primary: #22d3ee;--sql-secondary: #0ea5e9;--sql-deep: #0369a1;--sql-glow: rgba(34, 211, 238, .28);--sql-gradient: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);--sql-gradient-soft: linear-gradient(135deg, rgba(14,165,233,.14) 0%, rgba(34,211,238,.08) 100%);--sql-gradient-text: linear-gradient(135deg, #22d3ee 0%, #38bdf8 50%, #7dd3fc 100%);--sql-beginner: #22d3ee;--sql-intermediate: #0ea5e9;--sql-advanced: #7c6cf0;--sql-block-bg: rgba(14, 165, 233, .05);--sql-block-correct-bg: rgba(16, 185, 129, .12);--sql-block-wrong-bg: rgba(239, 68, 68, .1);--sql-block-correct-border: #10b981;--sql-block-wrong-border: #ef4444;--sql-block-empty-border: rgba(34, 211, 238, .18)}.sql-blocks-page{background:radial-gradient(ellipse at 15% 40%,rgba(14,165,233,.1) 0%,transparent 55%),radial-gradient(ellipse at 85% 15%,rgba(34,211,238,.07) 0%,transparent 50%),radial-gradient(ellipse at 50% 90%,rgba(124,108,240,.06) 0%,transparent 45%),var(--bg-primary);min-height:100vh;width:100%;font-family:var(--font-body);color:var(--text-primary);overflow-x:hidden;position:relative}.sql-blocks-topbar{position:fixed;top:0;left:0;right:0;height:54px;background:#0c0c14eb;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(34,211,238,.12);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;z-index:2000;gap:1rem}.sql-blocks-topbar-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-heading);font-weight:800;font-size:1rem;letter-spacing:-.02em;background:var(--sql-gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sql-blocks-topbar-back{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text-secondary);cursor:pointer;padding:.35rem .75rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:transparent;transition:all .2s;font-family:var(--font-body);text-decoration:none}.sql-blocks-topbar-back:hover{color:var(--sql-primary);border-color:#22d3ee4d;background:#22d3ee0f}.sql-blocks-topbar-mode{display:flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--sql-primary);padding:.3rem .7rem;background:#22d3ee14;border:1px solid rgba(34,211,238,.2);border-radius:100px}.sql-blocks-shell{flex:1;height:100vh;overflow-y:auto;overflow-x:hidden}.sql-blocks-shell .table-container th{background-color:#0ea5e91f!important;color:var(--sql-primary)!important;font-family:var(--font-code)!important;font-size:.78rem!important;letter-spacing:.04em!important;border-color:#22d3ee1f!important}.sql-blocks-shell .table-container td{border-color:#22d3ee12!important;font-size:.82rem!important;color:var(--text-secondary)!important}.sql-blocks-shell .table-container tbody tr:hover{background-color:#22d3ee0f!important}.sql-blocks-shell .table-container th.selected,.sql-blocks-shell .table-container td.selected{background-color:#22d3ee38!important;color:#22d3ee!important;font-weight:700!important}.sql-blocks-shell .sql-preview{background:#0ea5e90d!important;border:1px solid rgba(34,211,238,.2)!important;border-radius:12px!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;font-family:var(--font-code)!important;font-size:1.05rem!important;letter-spacing:.03em!important}.sql-blocks-shell .dropdown-container{background:#0ea5e90a!important;border:1px solid rgba(34,211,238,.12)!important;border-radius:16px!important}.sql-blocks-shell .dropdown-container select{border-radius:10px!important;font-family:var(--font-code)!important;font-size:.95rem!important;letter-spacing:.02em!important;transition:all .25s ease!important;box-shadow:0 2px 8px #0003!important}.sql-blocks-shell .dropdown-container select:not(:disabled):hover{transform:translateY(-1px)!important;box-shadow:0 4px 16px #22d3ee26!important}.sql-blocks-shell .show-table-btn{background:#22d3ee1f!important;border:1px solid rgba(34,211,238,.28)!important;color:#22d3ee!important;border-radius:10px!important;font-family:var(--font-body)!important;font-weight:600!important;font-size:.82rem!important;top:4.25rem!important}.sql-blocks-shell .show-table-btn:hover{background:#22d3ee38!important;transform:scale(1.04)!important}.sql-blocks-shell .show-table-btn.active{background:#22d3ee33!important;border-color:var(--sql-primary)!important;box-shadow:0 0 12px #22d3ee40!important}.sql-blocks-shell .menu-btn{background:#22d3ee14!important;border:1px solid rgba(34,211,238,.22)!important;color:var(--sql-primary)!important;border-radius:10px!important;font-family:var(--font-body)!important;font-weight:600!important;font-size:.82rem!important;top:4.25rem!important}.sql-blocks-shell .menu-btn:hover{background:#22d3ee26!important;transform:scale(1.04)!important}.sql-blocks-shell .sidenav{border-left:1px solid rgba(34,211,238,.15)!important;background:#060c18f7!important}.sql-blocks-shell .sidenav-btn{background:#22d3ee14!important;border:1px solid rgba(34,211,238,.15)!important;color:var(--text-primary)!important;border-radius:10px!important;transition:all .2s!important}.sql-blocks-shell .sidenav-btn:hover{background:#22d3ee2e!important;color:var(--sql-primary)!important}.sql-blocks-shell .unlocked{background:#22d3ee2e!important;color:#22d3ee!important;border:1px solid rgba(34,211,238,.25)!important}.sql-blocks-shell .sql-code{border:1px solid rgba(34,211,238,.15)!important;background:#060c18f7!important;color:var(--sql-primary)!important}.sql-blocks-shell .leaderboard-table th{color:var(--sql-primary)!important;background:#0ea5e91a!important}.sql-blocks-shell .leaderboard-table td:first-child{color:var(--sql-primary)!important}.sql-blocks-shell .leaderboard-table td:nth-child(3){color:#22d3ee!important}.sql-section-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem 1rem;background:#22d3ee14;border:1px solid rgba(34,211,238,.22);border-radius:100px;font-size:.78rem;font-weight:600;color:var(--sql-primary);margin-bottom:1rem}.sql-section-badge.green{background:#10b98114;border-color:#10b98138;color:#10b981}.sql-section-badge.purple{background:#7c6cf014;border-color:#7c6cf038;color:#7c6cf0}.sql-demo-block{background:#0ea5e90f;border:1px solid var(--sql-block-empty-border);border-radius:12px;padding:.875rem 1rem;transition:all .25s ease}.sql-demo-block.correct{background:var(--sql-block-correct-bg);border-color:var(--sql-block-correct-border);box-shadow:0 0 14px #10b98133}.sql-demo-block.wrong{background:var(--sql-block-wrong-bg);border-color:var(--sql-block-wrong-border)}.sql-demo-block .block-type-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sql-primary);margin-bottom:.5rem;font-family:var(--font-code);display:flex;align-items:center;justify-content:space-between}.sql-demo-block select{width:100%;padding:.6rem 2.25rem .6rem .875rem;border-radius:8px;border:1px solid rgba(34,211,238,.2);background:#00000059;color:var(--text-primary);font-family:var(--font-code);font-size:.92rem;cursor:pointer;outline:none;transition:all .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.sql-demo-block select:focus{border-color:var(--sql-primary);box-shadow:0 0 0 2px #22d3ee26}.sql-demo-block select:disabled{opacity:.38;cursor:not-allowed}.sql-mini-table{width:100%;border-collapse:collapse;font-family:var(--font-code);font-size:.78rem}.sql-mini-table th{background:#22d3ee1f;color:var(--sql-primary);padding:.5rem .75rem;text-align:left;font-weight:700;letter-spacing:.04em;border-bottom:1px solid rgba(34,211,238,.15);transition:background .3s}.sql-mini-table th.hl{background:#22d3ee47!important;box-shadow:0 0 8px #22d3ee33}.sql-mini-table td{padding:.45rem .75rem;color:var(--text-secondary);border-bottom:1px solid rgba(255,255,255,.04);transition:opacity .35s ease,background .2s}.sql-mini-table tr:hover td{background:#22d3ee0a}.sql-mini-table td.hl{color:#22d3ee;font-weight:600}.sql-mini-table tr.filtered td{opacity:.18}.sql-tok-keyword{color:#38bdf8;font-weight:700}.sql-tok-column{color:#4ade80;font-weight:600}.sql-tok-table-name{color:#fb923c}.sql-tok-condition{color:#c084fc}.sql-tok-number{color:#fbbf24}.sql-tok-order{color:#34d399}.sql-tok-empty{color:#ffffff40;font-style:italic}.sql-journey-node{display:flex;align-items:flex-start;gap:1.25rem;padding:1.5rem;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);transition:all .3s}.sql-journey-node:hover{border-color:#22d3ee40;box-shadow:0 8px 32px #22d3ee14;transform:translate(4px)}.sql-journey-dot{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;font-weight:700;font-family:var(--font-heading)}.sql-transform-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;transition:all .35s}.sql-transform-card:hover{border-color:#22d3ee38;box-shadow:0 12px 40px #22d3ee12;transform:translateY(-4px)}.sql-transform-card .card-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:600;font-family:var(--font-code);color:var(--sql-primary);background:#0ea5e90d}.sql-transform-card .card-body{padding:1.25rem}.sql-cta-primary{padding:1rem 2.25rem;background:var(--sql-gradient);border:none;border-radius:var(--radius-lg);color:#000;font-size:1rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;transition:all .3s;box-shadow:0 4px 20px #22d3ee59;font-family:var(--font-heading)}.sql-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px #22d3ee80}.sql-cta-ghost{padding:1rem 1.75rem;background:#ffffff0a;border:1px solid var(--border-default);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:1rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;transition:all .3s;font-family:var(--font-body)}.sql-cta-ghost:hover{background:#ffffff14;border-color:#22d3ee40;color:var(--sql-primary)}@media(max-width:768px){.sql-blocks-topbar{padding:0 1rem}.sql-blocks-topbar-mode{display:none}.sql-demo-grid,.sql-how-grid,.sql-transform-grid{grid-template-columns:1fr!important}}.ij-ide-window{flex:1;width:100%;height:100vh;display:flex;flex-direction:column;background:#2b2b2b;font-family:JetBrains Mono,Cascadia Code,Fira Code,Consolas,Courier New,monospace;color:#a9b7c6;overflow:hidden;box-sizing:border-box}.sql-blocks-shell .ij-ide-window{height:calc(100vh - 54px);margin-top:54px}.sql-blocks-shell .game-container{height:calc(100vh - 54px)!important;margin-top:54px}.ij-toolbar{height:36px;background:#3c3f41;border-bottom:1px solid #2d2d2d;display:flex;align-items:center;padding:0 8px;gap:6px;flex-shrink:0}.ij-run-btn{width:28px;height:22px;background:#499c54;border:none;border-radius:3px;color:#fff;font-size:.7rem;font-weight:700;cursor:pointer;transition:background .15s;font-family:inherit;display:flex;align-items:center;justify-content:center}.ij-run-btn:hover:not(:disabled){background:#5baf66}.ij-run-btn:disabled{background:#4a4a4a;color:#666;cursor:not-allowed}.ij-toolbar-divider{width:1px;height:18px;background:#555;flex-shrink:0;margin:0 2px}.ij-schema-chip{display:flex;align-items:center;gap:4px;padding:2px 8px;background:#454545;border:1px solid #5a5a5a;border-radius:3px;font-size:.72rem;color:#a9b7c6;white-space:nowrap}.ij-toolbar-spacer{flex:1}.ij-toolbar-btn{display:flex;align-items:center;gap:4px;padding:3px 9px;background:transparent;border:1px solid transparent;border-radius:3px;color:#a9b7c6;font-size:.72rem;cursor:pointer;font-family:inherit;transition:all .12s;white-space:nowrap}.ij-toolbar-btn:hover{background:#ffffff14;border-color:#555}.ij-challenge-tag{font-size:.68rem;color:#ffc66d;background:#ffc66d1a;border:1px solid rgba(255,198,109,.3);border-radius:2px;padding:1px 6px;white-space:nowrap}.ij-challenge-dots{display:flex;gap:3px;align-items:center}.ij-challenge-dot{width:7px;height:7px;border-radius:50%;transition:background .25s}.ij-main{flex:1;display:flex;overflow:hidden}.ij-sidebar{width:220px;flex-shrink:0;background:#3c3f41;border-right:1px solid #2d2d2d;display:flex;flex-direction:column;overflow:hidden}.ij-sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#555 transparent}.ij-panel-header{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#787878;padding:8px 10px 3px}.ij-tree-item{display:flex;align-items:center;gap:5px;padding:3px 10px;font-size:.74rem;color:#a9b7c6;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ij-tree-item:hover{background:#ffffff0f}.ij-tree-item.active{background:#214283}.ij-tree-item.col{padding-left:28px;color:gray}.ij-type-badge{font-size:.58rem;padding:0 4px;background:#6897bb33;border-radius:2px;color:#6897bb;font-weight:700;letter-spacing:.05em;flex-shrink:0}.ij-module-item{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 12px;font-size:.73rem;color:gray;cursor:pointer;background:transparent;border:none;border-left:2px solid transparent;width:100%;text-align:left;font-family:inherit;transition:all .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ij-module-item:hover:not(:disabled){background:#ffffff0d;color:#a9b7c6}.ij-module-item.active{color:#4eade5;border-left-color:#4eade5;background:#4eade512}.ij-module-item:disabled{opacity:.38;cursor:not-allowed}.ij-mod-icon{font-size:.65rem;flex-shrink:0}.ij-sidebar-actions{padding:6px;border-top:1px solid #2d2d2d;display:flex;flex-direction:column;gap:3px;flex-shrink:0}.ij-sidebar-action-btn{display:flex;align-items:center;gap:6px;padding:5px 8px;background:transparent;border:none;border-radius:3px;color:gray;font-size:.72rem;cursor:pointer;font-family:inherit;width:100%;text-align:left;transition:all .12s}.ij-sidebar-action-btn:hover{background:#ffffff12;color:#a9b7c6}.ij-sidebar-action-btn.danger:hover{color:#c75450}.ij-editor-col{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.ij-tab-bar{height:28px;background:#3c3f41;border-bottom:1px solid #2d2d2d;display:flex;align-items:stretch;flex-shrink:0}.ij-tab{display:flex;align-items:center;gap:6px;padding:0 14px;font-size:.73rem;color:#a9b7c6;background:#2b2b2b;border-right:1px solid #2d2d2d;-webkit-user-select:none;user-select:none;white-space:nowrap}.ij-tab-dot{width:6px;height:6px;border-radius:50%;background:#4eade5;flex-shrink:0}.ij-editor-pane{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#555 transparent;background:#2b2b2b}.ij-line{display:flex;min-height:22px;align-items:flex-start}.ij-line:hover{background:#ffffff05}.ij-ln{width:48px;min-width:48px;text-align:right;padding:3px 10px 3px 0;font-size:.68rem;color:#555;-webkit-user-select:none;user-select:none;background:#313335;border-right:1px solid #3a3a3a;flex-shrink:0;font-variant-numeric:tabular-nums;line-height:16px}.ij-lc{flex:1;padding:3px 0 3px 14px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;font-size:.84rem;line-height:16px}.ij-line-tall .ij-lc{align-items:flex-start;padding-top:4px}.ij-comment-line{color:gray;font-style:italic}.ij-output-comment-line{color:#629755;font-style:italic}.ij-kw-span{color:#cc7832;font-weight:700;min-width:88px;display:inline-block}.ij-kw-dim-span{color:gray}.ij-slot{background:#4a69bd1f;border:1px solid rgba(74,105,189,.4);color:#4eade5;font-family:JetBrains Mono,Cascadia Code,monospace;font-size:.8rem;border-radius:2px;padding:1px 20px 1px 6px;outline:none;cursor:pointer;min-width:110px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%234eade5' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center;transition:border-color .15s;-webkit-user-select:auto;user-select:auto}.ij-slot:hover:not(:disabled){border-color:#4eade5;background-color:#4a69bd33}.ij-slot.correct{background-color:#63974126;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%23499c54' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center;border-color:#63974199;color:#6a8759}.ij-slot.wrong{background-color:#c7545026;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%23c75450' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center;border-color:#c7545080;color:#c75450}.ij-slot:disabled{opacity:.5;cursor:not-allowed}.ij-wrong-hint{color:#c75450;font-size:.68rem;font-style:italic}.ij-gen-sql{display:inline-flex;flex-wrap:wrap;align-items:center;background:#00000038;border:1px solid #3a3a3a;border-radius:3px;padding:4px 10px;font-size:.84rem;-webkit-user-select:text;user-select:text}.ij-token{white-space:pre}.ij-token.clickable{cursor:pointer;border-bottom:1px dashed #6897bb}.ij-token.clickable:hover{background:#6897bb2e;border-radius:2px}.ij-bubble{display:flex;gap:8px;align-items:flex-start;padding:5px 10px;background:#6897bb1a;border:1px solid rgba(104,151,187,.25);border-radius:3px;font-size:.76rem;color:#a9b7c6;max-width:500px}.ij-bubble strong{color:#4eade5}.ij-bubble-close{background:none;border:none;color:#555;cursor:pointer;font-size:.85rem;padding:0;line-height:1}.ij-bubble-close:hover{color:#a9b7c6}.ij-next-btn{padding:4px 14px;background:#4a4a4a;border:1px solid #5a5a5a;border-radius:3px;color:#666;font-size:.78rem;font-family:inherit;cursor:not-allowed;transition:all .15s}.ij-next-btn.solved{background:#365880;border-color:#4a6a9a;color:#9dbde8;cursor:pointer}.ij-next-btn.solved:hover{background:#3d6490}.ij-challenge-header-span{color:#ffc66d;font-weight:700}.ij-challenge-body-span{color:#cc7832}.ij-challenge-input{background:#0000004d;border:1px solid rgba(74,105,189,.4);border-radius:3px;color:#a9b7c6;font-family:JetBrains Mono,Cascadia Code,monospace;font-size:.84rem;padding:6px 10px;outline:none;resize:none;line-height:1.5;-webkit-user-select:text;user-select:text;width:100%;box-sizing:border-box}.ij-challenge-input.correct{border-color:#499c54;background:#6397411a}.ij-challenge-input.wrong{border-color:#c75450;background:#c754501a}.ij-challenge-input:focus{border-color:#4eade5}.ij-challenge-fb{font-size:.74rem;padding:3px 0;display:flex;align-items:center;gap:6px}.ij-challenge-fb.correct{color:#6a8759}.ij-challenge-fb.wrong{color:#c75450}.ij-challenge-submit{padding:4px 14px;background:#499c54;border:none;border-radius:3px;color:#fff;font-family:inherit;font-size:.78rem;cursor:pointer}.ij-challenge-submit:hover{background:#5baf66}.ij-resize-handle{height:4px;background:#1e1e1e;border-top:1px solid #3a3a3a;flex-shrink:0}.ij-results{height:200px;flex-shrink:0;display:flex;flex-direction:column;background:#1e1f22}.ij-results-tabs{height:26px;background:#3c3f41;border-bottom:1px solid #2d2d2d;display:flex;align-items:stretch;flex-shrink:0}.ij-results-tab{display:flex;align-items:center;padding:0 14px;font-size:.7rem;color:gray;border-right:1px solid #2d2d2d;cursor:pointer;-webkit-user-select:none;user-select:none}.ij-results-tab.active{background:#1e1f22;color:#a9b7c6}.ij-results-tab:hover:not(.active){background:#ffffff0a;color:#a9b7c6}.ij-results-info{display:flex;align-items:center;padding:0 10px;font-size:.65rem;color:#5a6070;margin-left:auto;border-left:1px solid #2d2d2d;font-family:inherit}.ij-results-wrap{flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#444 transparent}.ij-results-table{width:100%;border-collapse:collapse;font-size:.72rem;font-family:JetBrains Mono,Cascadia Code,monospace}.ij-results-table th{background:#2e2f32;color:#a9b7c6;padding:3px 12px;text-align:left;font-weight:700;border-right:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a;position:sticky;top:0;z-index:1;white-space:nowrap;font-size:.7rem;letter-spacing:.03em}.ij-results-table th.hl{background:#1e3459;color:#6ca8e0}.ij-results-table td{padding:2px 12px;border-right:1px solid #282828;border-bottom:1px solid #282828;color:#717985;white-space:nowrap}.ij-results-table td.hl{color:#6a8759;background:#63974112}.ij-results-table tbody tr:nth-child(odd){background:#ffffff04}.ij-results-table tbody tr:hover td{background:#ffffff0a;color:#a9b7c6}.ij-results-table .row-num{color:#444;background:#2e2f32;font-size:.65rem;text-align:right;padding:2px 8px;border-right:2px solid #3a3a3a;min-width:32px}.ij-results-table th.row-num{color:#555}.ij-statusbar{height:22px;background:#3d6185;display:flex;align-items:center;padding:0 10px;gap:10px;font-size:.68rem;color:#c5d5e5;flex-shrink:0}.ij-status-conn{color:#85e085;font-weight:700;display:flex;align-items:center;gap:4px}.ij-status-sep{color:#ffffff40}.ij-status-r{margin-left:auto;display:flex;gap:10px;align-items:center}.ij-status-badge{padding:1px 6px;border-radius:2px;font-size:.64rem;font-weight:700}.ij-status-badge.beginner{background:#365880;color:#6ca8e0}.ij-status-badge.intermediate{background:#5d4a1a;color:#ffc66d}.ij-status-badge.advanced{background:#4a1a1a;color:#ff6b6b}