.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:170px}.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-feedback code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.78125rem;background:#0000000f;padding:.0625rem .3125rem;border-radius:.25rem;font-weight:600}.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-label,.sp-next-arrow{position:relative;z-index:1}.sp-next-arrow{transition:transform .15s}.sp-next-btn:hover .sp-next-arrow{transform:translate(2px)}.sp-next-timer{position:absolute;inset:0;z-index:0;background:#ffffff59;transform-origin:left;animation:sp-timer-fill linear forwards;pointer-events:none}@keyframes sp-timer-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}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-feedback code{background:#ffffff1a}html.dark .sp-next-btn{background:#a6e3a1;color:#1e1e2e}html.dark .sp-next-btn:hover{background:#94e2d5}html.dark .sp-next-timer{background:#1e1e2e47}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}