:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
  background: #fff;
  font-synthesis: none;
  --border: #e4e5e7;
  --muted: #686b72;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a, textarea { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, pre:focus-visible { outline: 2px solid #547aa5; outline-offset: 3px; }
header { height: 64px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 max(32px, calc((100vw - 1200px) / 2)); }
.brand { font-size: 17px; font-weight: 650; letter-spacing: -.5px; text-decoration: none; color: #202124; }
.header-note { font-family: var(--mono); font-size: 11px; color: var(--muted); }
main { max-width: 1264px; margin: auto; padding: 42px 32px 56px; }
h1 { font-size: 28px; letter-spacing: -.9px; margin: 0 0 10px; font-weight: 600; line-height: 1.25; }
.intro p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.practice { display: flex; align-items: center; gap: 16px; margin: 32px 0 14px; }
.practice-label { font-size: 12px; color: var(--muted); }
.example-list { display: flex; gap: 4px; flex-wrap: wrap; }
.example-chip { border: 1px solid transparent; border-radius: 4px; background: none; color: #62656b; padding: 7px 10px; font-size: 12px; transition: background .12s; }
.example-chip:hover { background: #f5f5f6; color: #202124; }
.example-chip.active { color: #202124; border-color: #dedfe2; background: #f4f4f5; }
.workspace { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid #d8dade; border-radius: 6px; overflow: hidden; }
.editor-pane { min-width: 0; }
.output-pane { border-left: 1px solid var(--border); }
.pane-heading { height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--border); background: #fafafa; }
.pane-title { font-size: 13px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; }
.pane-subtitle { color: #777b82; font-size: 11px; font-weight: 400; }
.muted { color: #9a9da3; }
.language-label { font-family: var(--mono); font-size: 11px; color: #777b82; }
.copy-button { border: 1px solid #d8dade; background: #fff; border-radius: 4px; font-size: 11px; color: #50535a; padding: 5px 9px; }
.copy-button:hover:not(:disabled) { background: #f0f1f2; border-color: #bcbfc5; }
.editor-body { height: 310px; display: flex; padding: 22px 0; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 24px; }
.line-numbers { flex-shrink: 0; width: 46px; text-align: right; padding-right: 16px; color: #a5a8af; white-space: pre; user-select: none; font-size: 11px; }
.code-layer { position: relative; flex: 1; min-width: 0; margin-right: 16px; overflow: hidden; }
pre { font-family: var(--mono); margin: 0; font-size: inherit; line-height: inherit; tab-size: 4; }
.code-layer pre { min-height: 100%; pointer-events: none; white-space: pre; }
.code-layer textarea { position: absolute; inset: 0; min-width: 100%; width: 100%; height: 100%; padding: 0; margin: 0; background: transparent; color: transparent; caret-color: #202124; border: 0; outline: none; resize: none; font: inherit; line-height: inherit; white-space: pre; overflow: auto; }
.editor-pane:has(textarea:focus-visible) .pane-heading { box-shadow: inset 0 -2px #6485aa; }
.code-layer textarea::selection { background: #b9d1ef70; }
.output-body pre { padding-right: 20px; flex: 1; white-space: pre; }
.token-keyword { color: #795299; }
.token-string { color: #36714f; }
.token-number { color: #98602b; }
.token-comment { color: #7c818a; }
.token-function { color: #365f8b; }
.pane-footer { height: 36px; border-top: 1px solid #eeeef0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.editor-hint { color: #777b82; font-size: 10px; display: flex; align-items: center; gap: 6px; }
.text-button { border: 0; background: none; padding: 6px 0; color: #50535a; font-size: 11px; }
.text-button:hover { color: #111; text-decoration: underline; }
.output-status { font-size: 10px; color: #6b7077; }
.convert-row { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 38px; gap: 16px; }
.conversion-note { font-size: 11px; line-height: 1.5; color: #73777e; }
.convert-actions { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.shortcut { font-size: 10px; color: #7d8188; display: flex; align-items: center; gap: 4px; }
kbd { font-family: var(--mono); font-size: 11px; border: 1px solid #e0e1e4; border-radius: 3px; padding: 2px 4px; background: #fafafa; }
.primary-button { border: 1px solid #242629; border-radius: 4px; background: #242629; color: #fff; padding: 11px 18px; font-size: 12px; font-weight: 500; }
.primary-button:hover { background: #3b3e43; }
.learning-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: 40px; border-top: 1px solid var(--border); padding-top: 28px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; gap: 12px; }
.title-row { display: flex; align-items: center; gap: 10px; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; margin: 0; }
.count-badge { font-size: 11px; font-weight: 400; color: #777b82; }
.section-heading p, .dataset > p { color: #73777e; font-size: 12px; margin: 8px 0 0; line-height: 1.6; }
.section-label { font-size: 9px; letter-spacing: .6px; color: #81858d; white-space: nowrap; }
.steps { display: flex; flex-direction: column; }
.step { border-bottom: 1px solid #eeeef0; padding: 21px 0; display: flex; gap: 15px; }
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step-number { height: 22px; width: 22px; border: 1px solid #dedfe2; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #6b7077; font-family: var(--mono); font-size: 10px; }
.step-content { min-width: 0; flex: 1; }
.step-title { font-size: 13px; font-weight: 550; margin: 3px 0 12px; }
.step-mapping { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11px; }
.step-mapping code { font-family: var(--mono); border-radius: 3px; padding: 5px 7px; background: #f4f5f6; color: #464c55; overflow-wrap: anywhere; max-width: 100%; line-height: 1.5; }
.step-mapping > span { color: #969ba3; }
.step p { font-size: 12px; line-height: 1.8; color: #686d75; margin: 11px 0 0; }
.dataset { border-left: 1px solid var(--border); padding-left: 28px; align-self: start; min-width: 0; }
.dataset-heading { display: flex; justify-content: space-between; align-items: center; }
.table-tabs { display: flex; gap: 20px; margin-top: 22px; border-bottom: 1px solid var(--border); }
.table-tabs button { font-family: var(--mono); font-size: 11px; border: 0; background: none; padding: 0 0 12px; color: #7c8189; position: relative; }
.table-tabs button[aria-selected=true] { color: #26292e; }
.table-tabs button[aria-selected=true]:after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #454b54; }
.table-tabs button span { font-family: inherit; font-size: 10px; color: #8c9199; margin-left: 6px; }
#schema { padding: 12px 0 8px; }
.schema-row { display: flex; align-items: center; justify-content: space-between; height: 30px; font-family: var(--mono); font-size: 11px; color: #505760; }
.schema-row small { color: #777c85; font-size: 10px; }
.schema-row b { color: #8d929b; font-weight: 400; margin-left: 7px; font-size: 9px; }
.data-preview-label { font-size: 10px; color: #737983; margin: 18px 0 10px; }
.preview-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 10px; white-space: nowrap; text-align: left; }
th { font-weight: 400; color: #636b75; background: #f6f7f8; }
td, th { padding: 9px 8px; border-bottom: 1px solid #eeeef0; }
td { color: #636b75; }
.dataset-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); color: #777c85; font-size: 11px; line-height: 1.6; }
.setup-toggle { padding: 12px 0 0; border: 0; background: none; color: #444b55; font-size: 12px; display: flex; justify-content: space-between; width: 100%; }
.setup-toggle:hover { color: #111; }
.setup-toggle[aria-expanded=true] > span { transform: rotate(45deg); }
#setup-panel { margin-top: 12px; }
#setup-code { font-size: 10px; line-height: 1.7; overflow: auto; max-height: 220px; padding: 12px; background: #f6f7f8; }
footer { max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--border); padding: 20px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #81868e; font-size: 11px; }
.error { background: #fff6f5; color: #9a4037; border: 1px solid #ecd0cc; padding: 15px; border-radius: 4px; font-size: 12px; margin: -17px 0 25px; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1264px) { footer { margin: 0 32px; } }
@media (max-width: 960px) {
  .practice { align-items: flex-start; flex-direction: column; gap: 9px; }
  .example-chip:first-child { margin-left: -10px; }
  .example-chip.active:first-child { margin-left: 0; }
  .learning-grid { gap: 25px; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
  .dataset { padding-left: 20px; }
  .shortcut, .section-label { display: none; }
}
@media (max-width: 700px) {
  header { height: 56px; padding: 0 20px; }
  main { padding: 30px 20px 36px; }
  h1 { font-size: 25px; }
  .intro p { font-size: 13px; max-width: 360px; }
  .practice { margin-top: 25px; }
  .example-list { gap: 3px; }
  .example-chip { padding: 7px 8px; font-size: 11px; }
  .workspace { grid-template-columns: 1fr; }
  .output-pane { border-left: 0; border-top: 1px solid var(--border); }
  .editor-body { height: 265px; }
  .output-body { height: 270px; }
  .convert-row { flex-wrap: wrap; margin-bottom: 28px; }
  .conversion-note { flex: 1; min-width: 140px; }
  .primary-button { padding: 11px 13px; font-size: 11px; }
  .learning-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; }
  .dataset { border-left: 0; border-top: 1px solid var(--border); padding: 24px 0 0; }
  .step { gap: 12px; }
  footer { margin: 0 20px; font-size: 10px; align-items: flex-start; }
  footer span:last-child { max-width: 220px; text-align: right; }
}
/* Practice curriculum */
.intro-row{display:flex;justify-content:space-between;align-items:center;gap:24px}.progress-summary{display:grid;grid-template-columns:auto auto;gap:8px 12px;align-items:center;min-width:140px;font-size:11px;color:var(--muted)}.progress-summary strong{font-size:18px;font-weight:550;color:#30353c}.progress-summary progress{grid-column:1/-1;width:100%;height:4px;accent-color:#343a43}.question-section{margin:32px 0 22px}.question-toolbar{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:23px}.question-toolbar label{font-size:12px;color:var(--muted);margin-right:6px}.question-toolbar select{font:inherit;font-size:12px;max-width:470px;width:100%;border:1px solid #d8dade;border-radius:4px;background:#fff;padding:10px 12px;color:#30353c}.nav-button{width:35px;height:35px;border:1px solid #d8dade;background:white;border-radius:4px;color:#505760}.nav-button:hover:not(:disabled){background:#f4f5f6}.question-meta{display:flex;gap:16px;align-items:center;font-size:10px;color:#737983;margin-bottom:10px}.question-meta span:first-child{font-family:var(--mono);letter-spacing:.5px}#question-solved{color:#36714f}#question-title{font-size:20px;margin-bottom:8px}#question-prompt{font-size:14px;line-height:1.7;max-width:850px;margin:0 0 8px;color:#454b54}.question-rules{font-size:11px;color:#737983;line-height:1.6;margin:0}details{font-size:12px;color:#616973;margin-top:12px}summary{cursor:pointer;width:fit-content;padding:4px 0}details p{line-height:1.7}.code-layer textarea::placeholder{color:#a0a5ac}.grade-panel{border:1px solid #decfb5;border-radius:5px;padding:20px;margin:-12px 0 28px;background:#fffcf7}.grade-panel.passed{border-color:#c5d8c9;background:#f8fbf8}.grade-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.grade-heading span{font-size:11px;color:#6b737d}#grade-message{font-size:12px;line-height:1.7;color:#626a74}.check{display:inline-block;font-size:10px;margin:4px 14px 4px 0;color:#6b737d}.check.pass{color:#417551}.check.fail{color:#9c6634}.result-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px;min-width:0}.result-comparison>div{min-width:0}.result-comparison h3{font-size:12px;font-weight:500}.result-comparison .preview-scroll{max-height:250px}.ai-status{font-size:12px;line-height:1.7;color:#747b85;margin:22px 0 12px}#assumptions{padding-left:18px;font-size:12px;line-height:1.8;color:#747b85}.dataset .preview-scroll{max-height:250px}.dataset .preview-scroll thead{position:sticky;top:0}.question-toolbar select:focus-visible,summary:focus-visible{outline:2px solid #547aa5;outline-offset:3px}[hidden]{display:none!important}@media(max-width:700px){.intro-row{align-items:flex-start;flex-direction:column;gap:18px}.progress-summary{width:160px}.question-toolbar{gap:6px}.question-toolbar select{min-width:0;flex:1}.question-toolbar label{display:none}.nav-button{flex-shrink:0}.question-meta{gap:10px;flex-wrap:wrap}#question-title{font-size:18px}.result-comparison{grid-template-columns:1fr}.grade-panel{padding:15px}.grade-heading{align-items:flex-start}}
/* Slate, navy and teal accents keep the workspace quiet and readable. */
:root{color:#223247;background:#f6f8fb;--border:#dde5ee;--muted:#64758b;--accent:#285c91;--accent-soft:#edf4fb;--teal:#23746b}
header{background:#fff;border-top:3px solid #285c91;height:67px}.brand{color:#203e60}.header-note{color:#547493}
h1{color:#20364f}.intro p{color:#63758a}.progress-summary strong{color:#285c91}.progress-summary progress{accent-color:#23746b}
.question-toolbar select{border-color:#ccd9e6;color:#294664}.nav-button{border-color:#ccd9e6;color:#285c91}.nav-button:hover:not(:disabled){background:#eaf1f8}
.question-section{background:#fff;border:1px solid #dde5ee;border-radius:7px;padding:20px 24px 22px;box-shadow:0 2px 5px #23496e03}.question-toolbar{padding-bottom:16px;margin-bottom:20px}.question-meta span:first-child{color:#285c91;font-weight:600}.question-meta span:nth-child(2){color:#406888;background:#edf4fb;padding:4px 8px;border-radius:4px}#question-title{color:#223d5a}#question-solved{color:var(--teal)}#question-prompt{color:#42566c}
.workspace{border-color:#cdd9e6}.pane-heading{background:#edf3f9;border-color:#dde6f0}.output-pane .pane-heading{background:#edf5f3}.pane-title{color:#2b4c70}.output-pane .pane-title{color:#31645c}.pane-footer{background:#fafcfe}.primary-button{background:#285c91;border-color:#285c91;box-shadow:0 2px 4px #264e7714}.primary-button:hover{background:#204d7b}.copy-button{color:#365977;border-color:#cfdae5}.text-button{color:#456585}
h2{color:#294360}.step-number{background:#edf3fa;color:#365d85;border-color:#d3dfec}.step-mapping code{background:#edf2f8;color:#405a77}.step-mapping code:last-child{background:#edf5f2;color:#34695e}
.table-tabs button[aria-selected=true]{color:#285c91}.table-tabs button[aria-selected=true]:after{background:#285c91}.table-tabs button span{color:#547493}th{background:#eaf1f8;color:#45627d}.schema-row{color:#435e79}.setup-toggle{color:#285c91}#setup-code{background:#edf2f7}.learning-grid{border-color:#d9e3ed}.dataset{border-color:#d9e3ed}.token-keyword{color:#655598}.token-function{color:#27628c}.token-string{color:#26765e}
.grade-panel{background:#fffaf1;border-color:#e1cfa8;border-left:3px solid #b58c40}.grade-panel.passed{background:#f3faf7;border-color:#c4ded4;border-left:3px solid #358272}.grade-panel.passed #grade-title{color:#28665b}.grade-actions{display:flex;align-items:center;gap:16px}.close-grade{border:1px solid #cbd7dc;border-radius:4px;padding:6px 9px;background:#ffffffb0;color:#466070;font-size:11px;display:flex;gap:8px;align-items:center}.close-grade:hover{background:#fff;border-color:#6e8d9f}.close-grade span{font-size:16px;line-height:12px}.grade-context{font-size:11px;color:#5a7281;line-height:1.6;margin:9px 0}#submitted-sql{padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;background:#ffffffb0;border:1px solid #dde7e5;border-radius:4px;font-size:11px;line-height:1.7;margin-top:6px}.result-comparison th{background:#e8f1ee}.result-comparison td{background:#ffffff80}
@media(max-width:700px){.question-section{padding:16px}.grade-heading{flex-wrap:wrap}.grade-actions{margin-left:auto;gap:10px}.question-toolbar select{padding-left:8px}}
.question-reference{margin:20px 0 14px}.source-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}.source-table{border:1px solid #dce5ef;border-radius:5px;overflow:hidden;background:#fafcfe}.source-table h3{font-size:12px;font-weight:500;color:#62758a;margin:0;padding:11px 13px 0}.source-table h3 code{font-family:var(--mono);font-size:13px;font-weight:600;color:#285c91;margin-left:4px}.source-table>p{font-size:11px;line-height:1.6;color:#63758a;padding:0 13px;margin:6px 0 12px}.source-table table{white-space:normal;font-family:inherit;font-size:11px}.source-table th{padding:8px 13px;font-size:10px}.source-table td{padding:8px 13px;line-height:1.6;vertical-align:top}.source-table td:first-child{width:125px;white-space:nowrap;color:#294664}.source-table code,.required-output code,.join-reference code{font-family:var(--mono);font-size:11px}.column-type{font-size:9px;font-family:var(--mono);color:#5b7c93;display:inline-block;margin-right:6px}.join-reference{font-size:11px;line-height:1.7;color:#5b7087;margin:12px 0}.join-reference code{overflow-wrap:anywhere;color:#285c91}.required-output{margin-top:14px;padding:12px 14px;background:#edf4fa;border-radius:4px}.required-output h3{font-size:11px;font-weight:600;color:#345474;margin:0 0 9px}.required-output h3 span{font-weight:400;color:#687d91;margin-left:6px}.required-output ol{list-style:none;counter-reset:columns;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:0}.required-output li{counter-increment:columns;border:1px solid #d5e1ed;background:white;border-radius:3px;padding:5px 8px;color:#2c5379}.required-output li:before{content:counter(columns) '.';font-size:10px;margin-right:6px;color:#8a9aae}.required-output p{font-size:11px;line-height:1.6;color:#63788d;margin:9px 0 0}@media(max-width:700px){.source-table td,.source-table th{padding:7px 9px}.source-table td:first-child{width:105px}.required-output{padding:12px}}