:root {
      --sql-blue: #2f80b7;
      --sql-red: #d9654c;
      --sql-orange: #dc922f;
      --sql-yellow: #d4ad2c;
      --sql-green: #6d9f55;
      --sql-teal: #3b9893;
      --sql-indigo: #6672b7;
      --editor-bg: #0c1728;
      --editor-ink: #e9f0f8;
      --editor-muted: #94a3b8;
      --editor-line: #24354d;
      --success: #237a4b;
      --danger: #b42318;
      --warning: #a96300;
      --info: #2f6fb0;
    }
    html[data-theme="dark"] {
      --sql-blue: #5db5e6;
      --sql-red: #ef8a75;
      --sql-orange: #efad55;
      --sql-yellow: #e8c75d;
      --sql-green: #91bf76;
      --sql-teal: #65c4bf;
      --sql-indigo: #929ce0;
      --success: #58c48a;
      --danger: #ef8176;
      --warning: #e9a94a;
      --info: #7eb6e9;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--ink); background: var(--paper, var(--bg)); font-family: "Work Sans", Arial, sans-serif; line-height: 1.68; }
    h1, h2, h3, h4 { font-family: "Source Serif 4", Georgia, serif; color: var(--ink); line-height: 1.2; }
    h1 { margin: .35rem 0 .8rem; font-size: clamp(2.1rem, 5vw, 3.35rem); }
    h2 { margin: 0 0 1rem; font-size: clamp(1.55rem, 3vw, 2.05rem); }
    h3 { margin: 0 0 .65rem; font-size: 1.2rem; }
    p { margin: .72rem 0; }
    code, pre, textarea { font-family: "IBM Plex Mono", Consolas, monospace; }
    code { padding: .08rem .3rem; border: 1px solid var(--line); border-radius: 5px; background: var(--tint); color: var(--ink); }
    button, select, input, textarea { font: inherit; }
    button, select, input[type="checkbox"], input[type="radio"] { cursor: pointer; }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
    [hidden] { display: none !important; }

    .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: .7rem 1rem; background: var(--navy); color: #fff; }
    .skip-link:focus { left: 0; }
    .lesson-sitebar .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
    .lesson-sitebar .header-cta { padding: .6rem .9rem; font-size: .78rem; }

    main#lesson-content { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 1rem 0 4rem; }
    .lesson-wrapper > section { margin: 3.35rem 0; scroll-margin-top: 90px; }
    .lesson-hero { position: relative; overflow: hidden; padding: clamp(1.7rem, 4vw, 3.4rem); border-radius: 20px; background: linear-gradient(135deg, #0c1b31 0%, #103c5e 58%, #0e7490 100%); color: #fff; box-shadow: 0 18px 48px rgba(12, 27, 49, .18); }
    .lesson-hero::after { content: "SQL"; position: absolute; right: clamp(-1rem, 1vw, 1rem); bottom: -2.8rem; color: rgba(255,255,255,.075); font: 700 clamp(7rem, 21vw, 15rem)/1 "IBM Plex Mono", monospace; letter-spacing: -.08em; }
    .lesson-hero > * { position: relative; z-index: 1; }
    .lesson-hero h1, .lesson-hero strong { color: #fff; }
    .lesson-eyebrow { margin: 0; color: #d6eef4; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .lesson-meta-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: .8rem 0 1rem; }
    .pill { display: inline-flex; align-items: center; padding: .28rem .75rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: .82rem; font-weight: 700; }
    .pill.accent { background: #fff; color: #103c5e; }
    .lesson-lede { max-width: 72ch; margin: 0; color: #e8f3f6; font-size: clamp(1.04rem, 2vw, 1.2rem); }
    .why-it-matters { max-width: 82ch; margin-top: 1.2rem; padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.28); border-left: 4px solid #f0b95a; border-radius: 0 10px 10px 0; background: rgba(255,255,255,.1); }

    .lesson-toc { margin: 1.5rem 0; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 8px 24px rgba(15,42,67,.08); }
    .lesson-toc h2 { margin: 0 0 .6rem; color: var(--muted); font: 700 .78rem/1.2 "Work Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
    .lesson-toc ol { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; }
    .lesson-toc li { margin: .25rem 0; break-inside: avoid; }
    .lesson-toc a { color: var(--ink-soft); text-decoration: none; }
    .lesson-toc a:hover { color: var(--teal); text-decoration: underline; }

    .section-intro { max-width: 78ch; color: var(--muted); }
    .panel { padding: clamp(1.1rem, 3vw, 1.55rem); border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 8px 24px rgba(15,42,67,.06); }
    .grid-2, .grid-3 { display: grid; gap: 1rem; }
    .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .callout { padding: 1rem 1.1rem; border-left: 4px solid var(--teal); border-radius: 0 10px 10px 0; background: var(--tint); }
    .callout.warn { border-left-color: var(--warning); }
    .callout.success { border-left-color: var(--success); }
    .button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: .45rem; padding: .66rem 1rem; border: 1px solid var(--teal); border-radius: 8px; background: var(--teal); color: #fff; font-weight: 700; line-height: 1.1; text-decoration: none; }
    .button:hover { filter: brightness(.94); }
    .button.secondary { border-color: var(--line); background: var(--card); color: var(--ink); }
    .button.ghost { border-color: transparent; background: transparent; color: var(--teal); }
    .button.small { min-height: 36px; padding: .5rem .7rem; font-size: .82rem; }
    .button[disabled] { cursor: not-allowed; opacity: .58; }

    .objectives { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem 1.2rem; margin: 0; padding: 0; list-style: none; }
    .objectives li { position: relative; padding: .85rem .95rem .85rem 2.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
    .objectives li::before { content: "✓"; position: absolute; left: .9rem; top: .78rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--shade-2, var(--tint)); color: var(--teal); font-weight: 800; text-align: center; line-height: 1.25rem; }

    .clause-map { display: grid; gap: .72rem; }
    .clause-row { display: grid; grid-template-columns: minmax(150px, 32%) 1fr auto; min-height: 76px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 6px 18px rgba(15,42,67,.05); }
    .clause-key { display: flex; align-items: center; justify-content: center; padding: 1rem; color: #fff; font: 700 clamp(1.2rem,3vw,1.65rem)/1 "IBM Plex Mono", monospace; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
    .clause-definition { display: flex; align-items: center; padding: 1rem 1.2rem; color: var(--ink); font-weight: 600; }
    .clause-action { display: flex; align-items: center; padding: .8rem; }
    .c-select { background: var(--sql-red); }
    .c-from { background: var(--sql-orange); }
    .c-where { background: var(--sql-yellow); }
    .c-order { background: var(--sql-green); }
    .c-group { background: var(--sql-teal); }
    .c-having { background: var(--sql-blue); }
    .c-join { background: #347faf; }
    .c-limit { background: var(--sql-indigo); }

    .order-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; }
    .order-box { padding: 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
    .order-box ol { margin: .5rem 0 0; padding-left: 1.6rem; }
    .order-box li { margin: .28rem 0; }
    .order-arrow { display: grid; place-items: center; color: var(--teal); font-size: 2rem; }

    .schema-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
    .schema-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
    .schema-card h3 { margin: 0; padding: .85rem 1rem; background: var(--navy); color: #fff; font: 600 1rem/1.2 "IBM Plex Mono", monospace; }
    .schema-card ul { margin: 0; padding: .75rem 1rem 1rem; list-style: none; }
    .schema-card li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
    .schema-card li:last-child { border-bottom: 0; }
    .field-type { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: .78rem; }
    .relationship-line { margin-top: 1rem; padding: .9rem 1rem; border-radius: 10px; background: var(--tint); font-family: "IBM Plex Mono", monospace; font-size: .87rem; }

    .clause-lessons { display: grid; gap: 1rem; }
    .clause-card { display: grid; grid-template-columns: minmax(125px, 185px) 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
    .clause-card-head { display: flex; flex-direction: column; justify-content: center; gap: .45rem; padding: 1.2rem; color: #fff; }
    .clause-card-head code { width: fit-content; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.13); color: #fff; font-size: 1.08rem; font-weight: 700; }
    .clause-card-head span { font-size: .78rem; opacity: .92; }
    .clause-card-body { padding: 1.1rem 1.25rem; }
    .clause-card-body p { margin-top: 0; }
    .code-example { position: relative; overflow-x: auto; margin: .8rem 0; padding: 1rem; border: 1px solid var(--editor-line); border-radius: 10px; background: var(--editor-bg); color: var(--editor-ink); font: .88rem/1.65 "IBM Plex Mono", monospace; white-space: pre; }
    .code-example .kw { color: #7dd3fc; font-weight: 600; }
    .code-example .str { color: #fde68a; }
    .code-example .num { color: #f0abfc; }

    .lab-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 16px 45px rgba(15,42,67,.12); }
    .lab-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1rem; border-bottom: 1px solid var(--editor-line); background: var(--editor-bg); color: var(--editor-ink); }
    .lab-status { display: flex; align-items: center; gap: .55rem; font-size: .85rem; }
    .status-dot { width: .72rem; height: .72rem; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(240,185,90,.12); }
    .status-dot.ready { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.13); }
    .lab-options { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; font-size: .8rem; }
    .lab-options label { display: inline-flex; align-items: center; gap: .35rem; }
    .lab-workspace { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 2.3fr); }
    .lab-sidebar { padding: 1rem; border-right: 1px solid var(--editor-line); background: #101d31; color: var(--editor-ink); }
    .lab-sidebar h3 { margin: 0 0 .7rem; color: #fff; font: 700 .78rem/1.2 "Work Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
    .challenge-select { width: 100%; margin-bottom: 1rem; padding: .65rem .7rem; border: 1px solid #41516a; border-radius: 8px; background: #17263d; color: #fff; }
    .challenge-brief { min-height: 126px; padding: .8rem; border: 1px solid #30415b; border-radius: 9px; background: #13223a; font-size: .83rem; }
    .challenge-brief strong { color: #7dd3fc; }
    .challenge-progress { margin-top: .8rem; color: var(--editor-muted); font-size: .78rem; }
    .schema-mini details { margin-top: .55rem; border-top: 1px solid #2f4059; padding-top: .55rem; }
    .schema-mini summary { color: #cbd5e1; font: 600 .82rem/1.3 "IBM Plex Mono", monospace; cursor: pointer; }
    .schema-mini ul { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--editor-muted); font: .75rem/1.55 "IBM Plex Mono", monospace; }
    .editor-pane { min-width: 0; background: var(--editor-bg); }
    .editor-label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid var(--editor-line); color: var(--editor-muted); font-size: .78rem; }
    #sql-editor { display: block; width: 100%; min-height: 260px; resize: vertical; padding: 1rem 1.1rem; border: 0; outline: 0; background: var(--editor-bg); color: var(--editor-ink); caret-color: #fff; font: .94rem/1.65 "IBM Plex Mono", monospace; tab-size: 2; }
    #sql-editor::selection { background: rgba(125,211,252,.25); }
    .editor-actions { display: flex; flex-wrap: wrap; gap: .55rem; padding: .8rem 1rem; border-top: 1px solid var(--editor-line); background: #101d31; }
    .editor-actions .button { min-height: 38px; font-size: .82rem; }
    .editor-actions .button.secondary { border-color: #41516a; background: #17263d; color: #e2e8f0; }
    .shortcut { margin-left: auto; align-self: center; color: var(--editor-muted); font-size: .75rem; }
    .lab-feedback { padding: 1rem; border-top: 1px solid var(--line); background: var(--card); }
    .message { padding: .9rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: 0 9px 9px 0; background: var(--tint); }
    .message.success { border-left-color: var(--success); }
    .message.error { border-left-color: var(--danger); }
    .message.warn { border-left-color: var(--warning); }
    .message h3 { margin: 0 0 .35rem; font: 700 .95rem/1.25 "Work Sans", sans-serif; }
    .message p { margin: .25rem 0; }
    .message pre { overflow-x: auto; margin: .6rem 0 0; padding: .75rem; border-radius: 8px; background: var(--editor-bg); color: var(--editor-ink); font-size: .82rem; white-space: pre-wrap; }
    .results-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid var(--line); }
    .results-head h3 { margin: 0; font: 700 .92rem/1.2 "Work Sans", sans-serif; }
    .row-count { color: var(--muted); font-size: .8rem; }
    .results-scroll { max-height: 390px; overflow: auto; border-top: 1px solid var(--line); }
    .results-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
    .results-table th, .results-table td { padding: .62rem .75rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
    .results-table th { position: sticky; top: 0; z-index: 1; background: var(--navy); color: #fff; font-family: "IBM Plex Mono", monospace; font-weight: 600; }
    .results-table tr:nth-child(even) td { background: var(--tint); }
    .empty-results { padding: 1.2rem; color: var(--muted); text-align: center; }

    .challenge-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
    .challenge-card { display: flex; min-height: 210px; flex-direction: column; padding: 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
    .challenge-number { color: var(--teal); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .challenge-card p { color: var(--muted); font-size: .9rem; }
    .challenge-card .button { margin-top: auto; align-self: flex-start; }

    .comparison-table { width: 100%; border-collapse: collapse; }
    .comparison-table th, .comparison-table td { padding: .75rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
    .comparison-table th { background: var(--navy); color: #fff; }
    .table-scroll { overflow-x: auto; }

    .quiz-shell { padding: clamp(1rem,3vw,1.5rem); border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
    .quiz-q { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; }
    .quiz-q legend { padding: 0 .35rem; font-weight: 700; }
    .quiz-options { display: grid; gap: .55rem; margin-top: .65rem; }
    .quiz-option { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); }
    .quiz-option.correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--card)); }
    .quiz-option.incorrect { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--card)); }
    .quiz-feedback { margin: .65rem 0 0; color: var(--muted); font-size: .88rem; }
    .quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
    #quiz-score { margin: 0 0 0 auto; font-weight: 700; }

    .summary-list { max-width: 80ch; }
    .summary-list li { margin: .6rem 0; }
    .lesson-footer { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
    .back-category-link { color: var(--teal); font-weight: 700; text-decoration: none; }

    @media (max-width: 900px) {
      .schema-grid, .challenge-cards { grid-template-columns: 1fr 1fr; }
      .lab-workspace { grid-template-columns: 1fr; }
      .lab-sidebar { border-right: 0; border-bottom: 1px solid var(--editor-line); }
      .schema-mini { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; }
    }
    @media (max-width: 700px) {
      main#lesson-content { width: min(100% - 1rem, 1180px); }
      .lesson-toc ol { columns: 1; }
      .grid-2, .grid-3, .objectives, .schema-grid, .challenge-cards { grid-template-columns: 1fr; }
      .clause-row { grid-template-columns: 1fr; }
      .clause-key { justify-content: flex-start; }
      .clause-definition { padding-bottom: .4rem; }
      .clause-action { padding-top: 0; }
      .clause-card { grid-template-columns: 1fr; }
      .order-flow { grid-template-columns: 1fr; }
      .order-arrow { transform: rotate(90deg); }
      .schema-mini { grid-template-columns: 1fr; }
      .shortcut { width: 100%; margin-left: 0; }
      #quiz-score { width: 100%; margin-left: 0; }
    }
    @media print {
      .lesson-sitebar, .mobile-nav, .lesson-toc, .clause-action, .lab-shell, .challenge-card .button, .quiz-actions, footer.site { display: none !important; }
      main#lesson-content { width: 100%; }
      .lesson-hero { background: #fff; color: #000; box-shadow: none; border: 1px solid #bbb; }
      .lesson-hero h1, .lesson-hero p, .lesson-hero strong { color: #000; }
    }