pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#79c0ff}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-comment,.hljs-code,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}:root{color-scheme:dark;--panel: #0f1520;--border: #30363d;--border-strong: #3f4750;--text: #e6edf3;--muted: #8b949e;--accent: #2f81f7;--beginner: #79c0ff;--intermediate: #e3b341;--advanced: #ff7b72;--success: #7ee787;--danger: #ff7b72;--shadow: 0 18px 48px rgba(0, 0, 0, .28)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:radial-gradient(circle at top left,rgba(47,129,247,.08),transparent 26%),linear-gradient(180deg,#0d1117,#0a0f14);color:var(--text);font-family:SF Pro Display,Hiragino Sans,Yu Gothic UI,sans-serif}button,input,textarea,pre,code{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:minmax(320px,20%) minmax(0,1fr);transition:grid-template-columns .18s ease}.app-shell.sidebar-collapsed{grid-template-columns:60px minmax(0,1fr)}.sidebar{border-right:1px solid var(--border);background:#03070ef0;padding:22px 18px;overflow:hidden;height:100vh;position:sticky;top:0}.sidebar-main{display:grid;height:100%;min-height:0;grid-template-rows:auto auto minmax(0,1fr) auto}.sidebar-header,.panel-header,.editor-toolbar,.label-with-hint,.editor-actions{display:flex;align-items:center}.sidebar-header,.panel-header{gap:16px}.sidebar-header{justify-content:center}.panel-header{justify-content:space-between}.sidebar-header{align-items:center;margin-bottom:20px}.sidebar-copy{min-width:0}.app-shell.sidebar-collapsed .sidebar-copy,.app-shell.sidebar-collapsed .sidebar-meta,.app-shell.sidebar-collapsed .problem-list,.app-shell.sidebar-collapsed .sidebar-footer-group{display:none}.app-shell.sidebar-collapsed .sidebar{padding:16px 8px}.app-shell.sidebar-collapsed .sidebar-header{justify-content:center;margin-bottom:0}.rail-button{width:40px;height:40px;border-radius:8px;border:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}.rail-button span{display:block;width:14px;height:2px;margin:0 auto;border-radius:999px;background:#c9d1d9;transition:width .16s ease,opacity .16s ease,background-color .16s ease}.rail-button span:nth-child(2){width:10px}.rail-button:hover span{background:#f0f6fc}.rail-button:hover span:nth-child(2){width:12px}.sidebar-meta{margin-bottom:18px}.progress-table{width:100%;border-collapse:collapse;table-layout:fixed}.progress-table th,.progress-table td{padding:6px 8px;font-size:12px;text-align:center;color:#c9d1d9;font-weight:400}.progress-table thead th{border-bottom:1px solid rgba(48,54,61,.5)}.progress-table thead .beginner{color:var(--beginner)}.progress-table thead .intermediate{color:var(--intermediate)}.progress-table thead .advanced{color:var(--advanced)}h1,h2{margin:0}h1{font-size:22px;font-weight:700}h2{font-size:20px;font-weight:700}.eyebrow{margin:0 0 6px;color:#a3afbd;text-transform:uppercase;letter-spacing:.18em;font-size:11px}.problem-list{display:grid;gap:0;border-top:1px solid rgba(48,54,61,.5);min-height:0;margin-right:-10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:transparent transparent}.problem-list::-webkit-scrollbar{width:10px}.problem-list.scrolling{scrollbar-color:rgba(139,148,158,.7) transparent}.problem-list.scrolling::-webkit-scrollbar-track{background:transparent}.problem-list::-webkit-scrollbar-thumb{background:transparent;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.problem-list.scrolling::-webkit-scrollbar-thumb{background:#8b949eb3;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.problem-item{width:100%;border:0;border-bottom:1px solid rgba(48,54,61,.5);background:transparent;color:var(--text);padding:10px 8px 10px 12px;text-align:left;position:relative;display:flex;align-items:flex-start;justify-content:flex-start}.problem-item:hover{background:#f0f6fc08}.problem-item.solved{background:#2ea0431f}.problem-item.solved:hover{background:#2ea04329}.problem-item:before{content:"";position:absolute;inset:6px auto 6px 0;width:3px;border-radius:0 8px 8px 0;background:transparent}.problem-item.active{background:#2f81f714}.problem-item.active.solved{background:linear-gradient(0deg,#2ea04324,#2ea04324),linear-gradient(0deg,#2f81f71f,#2f81f71f)}.problem-item.active:before{background:var(--accent)}.problem-item.solved:before{background:transparent}.problem-item.active.solved:before{background:var(--accent)}.problem-copy{display:grid;min-width:0;flex:1}.problem-title-row{display:flex;align-items:flex-start;flex-direction:column;gap:10px}.problem-index{display:inline-flex;align-items:center;height:16px;font-size:11px;border-radius:5px;border:1px solid var(--border-strong);padding:0 8px;line-height:1}.problem-index.easy{background:#2f81f729;color:var(--beginner);border-color:#2f81f77a}.problem-index.medium{background:#d299222e;color:var(--intermediate);border-color:#d2992280}.problem-index.hard{background:#da36332e;color:var(--advanced);border-color:#da363380}.problem-copy strong{font-size:14px;line-height:1.45;font-weight:400}.problem-check{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin:0;color:transparent;font-size:14px;line-height:1}.problem-check.solved{color:var(--success)}.sidebar-footer-group{display:grid;gap:10px;margin-top:16px}.sidebar-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.auth-status{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}.auth-email{max-width:180px;overflow:hidden;color:#c9d1d9;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.logout-link{color:var(--accent);font-size:12px;text-decoration:underline;text-underline-offset:2px}.logout-link:hover{color:#79c0ff}.settings-button,.login-button{border-radius:8px;padding:0}.settings-button{border:1px solid rgba(99,110,123,.34);background:#6e768114;color:#c9d1d9}.login-button{border:1px solid rgba(47,129,247,.42);background:#2f81f71f;color:#c9d1d9;flex:1 1 auto;width:100%;min-width:0;height:40px;padding:0 14px;font-size:12px;letter-spacing:.08em}.login-button-content{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}.google-icon{width:18px;height:18px;flex:0 0 auto}.sidebar-icon-button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center}.sidebar-icon-button svg{display:block}.sidebar-legal-links{display:flex;align-items:center;justify-content:center;gap:14px}.legal-link-button{border:0;background:transparent;color:var(--muted);padding:0;font-size:12px;text-decoration:underline;text-underline-offset:2px}.legal-link-button:hover{color:#c9d1d9}.inline-legal-link-button{display:inline;margin:0 2px;vertical-align:baseline}.workspace{padding:16px;min-width:0}.content-grid{min-height:calc(100vh - 48px);display:flex;gap:16px;align-items:flex-start}.panel{border-radius:0;padding:0;border:0;background:transparent;box-shadow:none}.problem-panel{flex:1 1 30%;min-width:220px;max-width:30%;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);height:calc(100vh - 48px);min-height:calc(100vh - 48px)}.workbench-column{display:grid;gap:10px;grid-template-rows:auto minmax(320px,1fr) auto minmax(180px,auto);min-width:0;min-height:calc(100vh - 48px)}.workbench-panel{flex:1 1 auto;min-width:0}.problem-card{border-radius:8px;border:1px solid var(--border);background:linear-gradient(180deg,#0d1117b3,#0d111747);padding:16px;margin:10px 0 18px}.problem-heading{display:block;margin-bottom:12px;font-size:15px;color:#f0f6fc}.problem-text{margin:0;font-size:14px;line-height:1.75;color:#d2d9e0}.problem-text p{margin:0}.problem-text p+p{margin-top:10px}.problem-text code{display:inline-block;margin:0 .15em;padding:.08em .42em;border-radius:6px;background:#6e76812e;border:1px solid rgba(110,118,129,.22);color:#f0f6fc;font-family:SF Mono,Consolas,Monaco,monospace;font-size:.92em;line-height:1.55}.subsection-header{display:flex;align-items:center;justify-content:space-between;padding-top:6px;margin-bottom:15px}.subsection-header .eyebrow,.label-with-hint .eyebrow{margin:0}.schema-tree{display:grid;gap:8px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;outline:none}.schema-tree:focus-visible{box-shadow:inset 0 0 0 1px #2f81f773;border-radius:8px}.schema-section{border-radius:8px;border:1px solid rgba(48,54,61,.6);background:#0d111733;padding:8px 10px}.schema-section summary{list-style:none;cursor:pointer;padding:4px 0;font-weight:600;color:#d2d9e0;display:flex;align-items:center;gap:8px;font-size:14px}.schema-section summary:before{content:"▾";color:var(--muted);font-size:12px}.schema-section:not([open]) summary:before{content:"▸"}.schema-section summary::-webkit-details-marker{display:none}.schema-section ul{margin:0;padding:4px 0 8px 18px;list-style:none;display:grid;gap:6px}.schema-section li{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#c9d1d9}.schema-column-name.is-primary-key{color:#9fe8b5}.schema-column-name.is-foreign-key{color:#9fd9ff}.schema-column-name.is-primary-key.is-foreign-key{color:#9fe8b5}.schema-section code{color:var(--muted)}.editor-toolbar{justify-content:space-between;gap:12px;margin-bottom:0}.label-with-hint{gap:12px}.editor-actions{flex-wrap:wrap;gap:8px}.subtle-button,.ghost-button,.primary-button{border-radius:8px;border:1px solid var(--border-strong);padding:8px 12px;display:inline-flex;align-items:center;gap:8px}.subtle-button{border-color:#636e7b66;background:#6e768114;color:#9aa4af}.primary-button{background:#2f81f71f;border-color:#2f81f76b;color:#c9d1d9}.ghost-button{background:#23863629;border-color:#2386367a;color:var(--success)}.subtle-button:disabled,.primary-button:disabled,.ghost-button:disabled{opacity:.5;cursor:default}.shortcut-key{font-size:11px;color:#6e7681}.shortcut-help{margin-top:16px;border-top:1px solid var(--border);padding:18px 70px 4px}.shortcut-help-title{margin:0 0 12px;font-size:13px;font-weight:600}.shortcut-help-note{margin:0;color:var(--muted);font-size:13px}.shortcut-help-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:8px;overflow:hidden}.shortcut-help-table th,.shortcut-help-table td{font-size:13px;padding:10px 12px;border-bottom:1px solid var(--border)}.shortcut-help-table th{text-align:left;font-weight:500;border-right:1px solid var(--border)}.shortcut-help-table td{width:1%;text-align:right;white-space:nowrap}.shortcut-help-table tr:last-child th,.shortcut-help-table tr:last-child td{border-bottom:0}.shortcut-help-table code{border:1px solid var(--border);border-radius:6px;padding:2px 8px;background:#6e76811f;color:var(--text);white-space:nowrap}.editor-window{border-radius:8px;overflow:hidden;border:1px solid var(--border);background:#0a0f14;min-height:290px}.cm-host,.cm-editor{height:100%}.cm-editor{background:#0a0f14}.result-tabs{display:flex;align-items:flex-end;gap:2px;padding:0 4px;border-bottom:1px solid var(--border)}.tab{border:1px solid rgba(48,54,61,.9);border-bottom:0;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#1b222c,#141a22);color:var(--muted);padding:7px 14px 6px;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}.tab.active{color:var(--text);background:linear-gradient(180deg,#2a313b,#1c232d);border-color:#515b68f2}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:8px;max-height:320px}.result-table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0}.result-table thead{background:#11161d}.result-table th{position:sticky;top:0;z-index:1;background:#11161d}.result-table th,.result-table td{padding:12px;text-align:left;border-bottom:1px solid var(--border);border-right:1px solid var(--border);font-size:13px}.result-table th:last-child,.result-table td:last-child{border-right:0}.result-table tbody tr:nth-child(2n){background:#ffffff05}.empty-result{border:1px solid var(--border);border-radius:8px;min-height:180px;display:grid;place-items:center;color:var(--muted)}.plan-output{margin:0;border:1px solid var(--border);border-radius:8px;background:#0a0f14;color:#d2d9e0;min-height:180px;max-height:320px;overflow:auto;padding:14px 16px}.plan-output code{display:block;font-family:SF Mono,Consolas,Monaco,monospace;font-size:13px;line-height:1.7;white-space:pre}.global-flash{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;min-width:280px;max-width:calc(100vw - 32px);border-radius:10px;padding:16px 48px 16px 20px;text-align:center;box-shadow:0 24px 60px #00000059;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.global-flash.success{border:1px solid rgba(22,101,52,.5);background:#10b98126;color:var(--success)}.global-flash.incorrect{border:1px solid rgba(153,27,27,.55);background:#b91c1c2e;color:#fecaca}.flash-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#e6edf380;font-size:24px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:16px;overflow-y:auto;background:#00000080}.modal-card{width:min(100%,560px);max-height:calc(100vh - 32px);border-radius:8px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);padding:24px;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}.modal-close{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);padding:0;font-size:22px;line-height:1}.modal-close:hover{color:#f0f6fc;background:#f0f6fc0d}.settings-list{border:0;padding:0;margin:0;display:grid;gap:12px}.settings-list legend{margin-bottom:12px;color:#d2d9e0;font-size:14px}.setting-option{display:flex;align-items:center;gap:12px;border-radius:8px;border:1px solid var(--border);background:#02061759;padding:14px 16px}.modal-list{margin:0;list-style:disc;border-radius:8px;border:1px solid var(--border);background:#0a0f14;padding:16px 16px 16px 2.4em}.modal-list li{color:#d2d9e0;line-height:1.8;padding:0}.modal-code{margin:0;border-radius:8px;border:1px solid var(--border);background:#0a0f14;color:#d2d9e0;max-height:min(70vh,720px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:transparent transparent;padding:16px;white-space:pre-wrap}.modal-code::-webkit-scrollbar{width:10px;height:10px}.modal-code.scrolling{scrollbar-color:rgba(139,148,158,.7) transparent}.modal-code.scrolling::-webkit-scrollbar-track{background:transparent}.modal-code::-webkit-scrollbar-thumb{background:transparent;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.modal-code.scrolling::-webkit-scrollbar-thumb{background:#8b949eb3;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.modal-code code{display:block;font-family:SF Mono,Consolas,Monaco,monospace;font-size:14px;line-height:1.9}.modal-code code.hljs{background:transparent;padding:0}.login-modal-content{display:grid;gap:16px}.google-button-host{display:flex;justify-content:center}.login-note,.error-copy{margin:0;color:#d2d9e0;line-height:1.7}.login-cookie-note{font-size:11px}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;background:#02061780;color:var(--text)}@media (max-width: 800px){.app-shell{grid-template-columns:clamp(300px,32vw,360px) minmax(0,1fr)}.app-shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.sidebar,.app-shell.sidebar-collapsed .sidebar{border-right:1px solid var(--border);border-bottom:0;height:100vh;position:sticky;top:0}.sidebar{padding:22px 18px}.app-shell.sidebar-collapsed .sidebar{grid-column:1;grid-row:1;border-right:0;border-bottom:1px solid var(--border);height:auto;padding:12px 16px;position:sticky;top:0;z-index:20}.app-shell.sidebar-collapsed .sidebar-main{display:block;height:auto;min-height:auto}.app-shell.sidebar-collapsed .sidebar-header{justify-content:space-between;margin-bottom:0}.app-shell.sidebar-collapsed .sidebar-copy{display:block}.app-shell.sidebar-collapsed .sidebar-copy h1{font-size:18px}.app-shell.sidebar-collapsed>main{grid-column:1;grid-row:2}.content-grid{min-height:auto;flex-direction:column}.problem-panel{min-width:0;max-width:none;height:auto;min-height:auto}.schema-tree{overflow:visible;padding-right:0}}@media (max-width: 960px){.workspace{padding:16px}.workbench-column{grid-template-rows:auto auto}.result-tabs{overflow:auto}}