.sql-playground{margin-top:2.5rem;padding:1.5rem;background:#fafafa;border-radius:.75rem}.sp-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}.sp-title{font-size:1.125rem;font-weight:700;margin:0;letter-spacing:-.025em;color:#18181b}.sp-tabs{display:flex;gap:.375rem;flex-wrap:wrap}.sp-tab{width:1.75rem;height:1.75rem;border-radius:9999px;border:1.5px solid #d4d4d8;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:600;color:#a1a1aa;transition:all .2s}.sp-tab:hover:not(.active){border-color:#a1a1aa;color:#71717a}.sp-tab .sp-tab-ok{display:none}.sp-tab.active{background:#18181b;border-color:#18181b;color:#fff;transform:scale(1.1)}.sp-tab.completed{background:#dcfce7;border-color:#bbf7d0;color:#16a34a}.sp-tab.completed .sp-tab-num{display:none}.sp-tab.completed .sp-tab-ok{display:block;font-size:.625rem}.sp-tab.completed.active{background:#16a34a;border-color:#16a34a;color:#fff}.sp-progress{height:2px;background:#e4e4e7;border-radius:2px;margin-bottom:1.25rem;overflow:hidden}.sp-progress-fill{height:100%;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:2px;width:0%;transition:width .5s cubic-bezier(.4,0,.2,1)}.sp-body{transition:opacity .18s ease,transform .18s ease}.sp-body.sp-transitioning{opacity:0;transform:translateY(6px)}.sp-question-row{display:flex;align-items:flex-start;gap:.625rem;margin-bottom:1rem}.sp-counter{flex-shrink:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.625rem;font-weight:600;color:#a1a1aa;padding:.25rem 0;margin-top:.625rem;letter-spacing:-.025em}.sp-question{flex:1;background:#fff;border-radius:.5rem;padding:.75rem 1rem;font-size:.875rem;line-height:1.6;color:#27272a;box-shadow:0 1px 2px #0000000a}.sp-question code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8125rem;background:#f4f4f5;padding:.125rem .375rem;border-radius:.25rem;color:#18181b;font-weight:500}.sp-editor-wrapper{border-radius:.5rem;overflow:hidden;box-shadow:0 1px 3px #0000000f,0 0 0 1px #0000000a}.sp-editor .cm-editor{height:120px}.sp-editor .cm-readonly-line{opacity:.55;cursor:default}.sp-actions{display:flex;align-items:center;gap:.5rem;margin-top:.75rem}.sp-hint{display:none;background:#fefce8;border-radius:.5rem;padding:.75rem 1rem;margin-top:.75rem;font-size:.8125rem;color:#854d0e;box-shadow:0 1px 2px #0000000a}.sp-results{margin-top:1rem}.sp-row-count{font-size:.6875rem;color:#a1a1aa;margin-bottom:.375rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.sp-table-wrap{overflow-x:auto;border-radius:.5rem;box-shadow:0 1px 3px #0000000f,0 0 0 1px #0000000a}.sp-table{width:100%;font-size:.75rem;border-collapse:collapse}.sp-table th{background:#fff;padding:.5rem .75rem;text-align:left;font-weight:600;color:#52525b;border-bottom:1px solid #f4f4f5;white-space:nowrap}.sp-table td{padding:.375rem .75rem;border-bottom:1px solid #f4f4f5;color:#18181b;white-space:nowrap;background:#fff}.sp-table tr:nth-child(2n) td{background:#fafafa}.sp-null{color:#a1a1aa;font-style:italic}.sp-empty{font-size:.8125rem;color:#a1a1aa;font-style:italic;padding:.5rem 0;margin:0}.sp-feedback{display:none;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:.5rem;margin-top:.75rem;font-size:.8125rem;font-weight:500;animation:sp-slide-in .25s ease-out}@keyframes sp-slide-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sp-ok{background:#f0fdf4;color:#166534}.sp-err{background:#fef2f2;color:#991b1b}.sp-success-icon{flex-shrink:0;font-size:1.125rem;line-height:1}.sp-success-sub{display:block;font-weight:400;font-size:.75rem;opacity:.8;margin-top:.125rem}.sp-err-icon{flex-shrink:0;font-weight:700;font-size:.875rem}.sp-next-btn{margin-left:auto;background:#166534;color:#fff;border:none;padding:.375rem .875rem;border-radius:.375rem;font-size:.8125rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;position:relative;overflow:hidden}.sp-next-btn:hover{background:#15803d}.sp-next-arrow{transition:transform .15s}.sp-next-btn:hover .sp-next-arrow{transform:translate(2px)}.sp-next-timer{position:absolute;inset:0;background:#ffffff26;transform-origin:left;animation:sp-timer-shrink linear forwards;pointer-events:none}@keyframes sp-timer-shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}html.dark .sql-playground{background:#181825}html.dark .sp-title{color:#cdd6f4}html.dark .sp-tab{border-color:#45475a;background:#1e1e2e;color:#6c7086}html.dark .sp-tab:hover:not(.active){border-color:#6c7086;color:#a6adc8}html.dark .sp-tab.active{background:#89b4fa;border-color:#89b4fa;color:#1e1e2e}html.dark .sp-tab.completed{background:#a6e3a126;border-color:#a6e3a14d;color:#a6e3a1}html.dark .sp-tab.completed.active{background:#a6e3a1;border-color:#a6e3a1;color:#1e1e2e}html.dark .sp-progress{background:#313244}html.dark .sp-counter{color:#6c7086}html.dark .sp-question{background:#1e1e2e;color:#bac2de;box-shadow:0 1px 2px #0003}html.dark .sp-question code{background:#313244;color:#cdd6f4}html.dark .sp-editor-wrapper{box-shadow:0 1px 3px #0000004d,0 0 0 1px #313244}html.dark .sp-hint{background:#f9e2af1a;color:#f9e2af}html.dark .sp-row-count{color:#6c7086}html.dark .sp-table-wrap{box-shadow:0 1px 3px #0000004d,0 0 0 1px #313244}html.dark .sp-table th{background:#181825;color:#a6adc8;border-bottom-color:#313244}html.dark .sp-table td{background:#1e1e2e;color:#cdd6f4;border-bottom-color:#313244}html.dark .sp-table tr:nth-child(2n) td{background:#181825}html.dark .sp-null,html.dark .sp-empty{color:#6c7086}html.dark .sp-ok{background:#a6e3a11a;color:#a6e3a1}html.dark .sp-err{background:#f38ba81a;color:#f38ba8}html.dark .sp-next-btn{background:#a6e3a1;color:#1e1e2e}html.dark .sp-next-btn:hover{background:#94e2d5}html.dark .ui-btn-primary{background:#89b4fa;color:#1e1e2e}html.dark .ui-btn-primary:hover{background:#74c7ec}html.dark .ui-btn-ghost{color:#a6adc8}html.dark .ui-btn-ghost:hover{background:#313244;color:#cdd6f4}html.dark .ui-btn-primary .ui-shortcut kbd{background:#1e1e2e40}.lesson-article :is(h1,h2,h3,h4){position:relative}.lesson-article .heading-anchor{text-decoration:none;color:inherit}.lesson-article :is(h1,h2,h3,h4) .heading-anchor:after{content:" #";color:#94a3b8;opacity:0;transition:opacity .2s ease;font-weight:400}.lesson-article :is(h1,h2,h3,h4):hover .heading-anchor:after{opacity:1}html.dark .lesson-article :is(h1,h2,h3,h4) .heading-anchor:after{color:#585b70}.lesson-article blockquote{border-left:none;border-radius:.75rem;background:linear-gradient(135deg,#f0f9ff,#f5f3ff);border:1px solid #e0e7ff;padding:1.125rem 1.25rem 1.125rem 3rem;font-style:normal;position:relative;margin:1.5rem 0}.lesson-article blockquote:before{content:"";position:absolute;left:.875rem;top:1.125rem;width:1.125rem;height:1.125rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7'/%3E%3Cpath d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3'/%3E%3Cpath d='M9.7 17l4.6 0'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.lesson-article blockquote p{font-size:.8125rem;line-height:1.6;color:#1e293b;margin:0}.lesson-article blockquote p:first-child{margin-top:0}.lesson-article blockquote p:last-child{margin-bottom:0}.lesson-article blockquote code{background:#e0e7ff;color:#3730a3;padding:.1rem .35rem;border-radius:.25rem;font-size:.75rem}.lesson-article blockquote strong{color:#1e1b4b}.diagram-wrap{margin:1.5rem 0;padding:1.25rem;background:#fafafa;border:1px solid #e4e4e7;border-radius:.75rem}html.dark .lesson-article{--tw-prose-body: #cdd6f4;--tw-prose-headings: #eff1f8;--tw-prose-links: #89b4fa;--tw-prose-bold: #eff1f8;--tw-prose-code: #e2e8f4;--tw-prose-pre-bg: #181825;--tw-prose-th-borders: #45475a;--tw-prose-td-borders: #45475a}html.dark .lesson-article h1,html.dark .lesson-article h2,html.dark .lesson-article h3,html.dark .lesson-article h4{color:#eff1f8}html.dark .lesson-article p,html.dark .lesson-article li{color:#cdd6f4}html.dark .lesson-article a{color:#89b4fa}html.dark .lesson-article strong{color:#eff1f8}html.dark .lesson-article code:not(pre code){background:#383a4e;color:#e2e8f4}html.dark .lesson-article hr{border-color:#45475a}html.dark .lesson-article blockquote{background:linear-gradient(135deg,#89b4fa1a,#cba6f71a);border-color:#505270}html.dark .lesson-article blockquote:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2396bfff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7'/%3E%3Cpath d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3'/%3E%3Cpath d='M9.7 17l4.6 0'/%3E%3C/svg%3E")}html.dark .lesson-article blockquote p{color:#cdd6f4}html.dark .lesson-article blockquote code{background:#89b4fa2e;color:#96bfff}html.dark .lesson-article blockquote strong{color:#eff1f8}html.dark .diagram-wrap{background:#181825;border-color:#313244}.lesson-report-bug{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #e4e4e7;text-align:center}.lesson-report-bug-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.6875rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#a1a1aa;text-decoration:none;transition:color .2s ease;letter-spacing:-.025em}.lesson-report-bug-link:hover{color:#ef4444}html.dark .lesson-report-bug{border-top-color:#313244}html.dark .lesson-report-bug-link{color:#6c7086}html.dark .lesson-report-bug-link:hover{color:#f38ba8}