@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#F4F6FA;
  --paper-raised:#FFFFFF;
  --ink:#10131C;
  --ink-soft:#565D72;
  --rule:#DCE1EA;
  --rule-strong:#B9C2D4;
  --accent:#D6336C;
  --accent-soft:#FBE4EC;
  --code-bg:#10131C;
  --code-tag:#FF8FBC;
  --code-attr:#8CE0AE;
  --code-string:#FFD479;
  --code-text:#E8EAF2;
  --code-comment:#6B7286;
  --radius:3px;
  --sidebar-w:250px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3',sans-serif;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
h1{font-size:2.3rem;line-height:1.15}
h2{font-size:1.5rem;margin-top:2.4rem;margin-bottom:0.7rem}
h3{font-size:1.15rem;margin-top:1.6rem;margin-bottom:0.5rem}

code{
  font-family:'JetBrains Mono',monospace;
  font-size:0.88em;
  background:var(--accent-soft);
  color:#9C1C51;
  padding:0.1em 0.4em;
  border-radius:var(--radius);
}

/* ===== LAYOUT ===== */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--paper-raised);
  border-right:1px solid var(--rule);
  padding:32px 22px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:4px;
}
.brand .mark{
  font-family:'JetBrains Mono',monospace;
  color:var(--accent);
  font-weight:600;
  font-size:1.05rem;
}
.brand .name{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.15rem;
}
.course-label{
  font-size:0.85rem;
  color:var(--ink-soft);
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid var(--rule);
}

.lesson-list{list-style:none}
.lesson-list li{margin-bottom:2px}
.lesson-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--radius);
  color:var(--ink-soft);
  font-size:0.93rem;
  text-decoration:none;
  border-left:2px solid transparent;
}
.lesson-list a:hover{background:var(--paper);color:var(--ink)}
.lesson-list a.active{
  color:var(--accent);
  background:var(--accent-soft);
  border-left:2px solid var(--accent);
  font-weight:600;
}
.lesson-list .num{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--ink-soft);
  opacity:0.7;
}
.lesson-list a.active .num{color:var(--accent);opacity:1}

.main{
  flex:1;
  min-width:0;
  padding:52px 56px 80px;
  max-width:900px;
}
.content{max-width:680px}

@media (max-width:820px){
  .shell{flex-direction:column}
  .sidebar{
    width:100%;
    height:auto;
    position:relative;
    border-right:none;
    border-bottom:1px solid var(--rule);
    padding:20px;
  }
  .main{padding:32px 22px 60px}
}

/* ===== CONTENT ELEMENTS ===== */
.lede{font-size:1.1rem;color:var(--ink-soft);margin-top:14px;max-width:60ch}

p{margin-bottom:1rem;max-width:70ch}
ul.plain,ol.plain{margin:0 0 1rem 1.3rem;max-width:66ch}
ul.plain li,ol.plain li{margin-bottom:0.4rem}

.callout{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:14px 18px;
  margin:1.4rem 0;
  font-size:0.95rem;
  max-width:66ch;
}
.callout strong{color:var(--accent)}

/* ===== CODE EXAMPLE BLOCK ===== */
.example{margin:1.6rem 0 2rem;max-width:70ch}
.example-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.example-label .tag{color:var(--accent)}

pre.code-block{
  background:var(--code-bg);
  color:var(--code-text);
  font-family:'JetBrains Mono',monospace;
  font-size:0.87rem;
  line-height:1.7;
  padding:18px 20px;
  border-radius:var(--radius);
  overflow-x:auto;
  white-space:pre;
}
pre.code-block .t{color:var(--code-tag)}
pre.code-block .a{color:var(--code-attr)}
pre.code-block .s{color:var(--code-string)}
pre.code-block .c{color:var(--code-comment)}

.result{
  border:1px solid var(--rule);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  padding:16px 20px;
  background:var(--paper-raised);
}
.result-label{
  font-size:0.75rem;
  color:var(--ink-soft);
  text-transform:none;
  margin-bottom:8px;
  font-family:'JetBrains Mono',monospace;
}
.result-body{color:var(--ink)}
.result-body h1,.result-body h2,.result-body h3{margin:0 0 0.3em}
.result-body p{margin:0 0 0.5em;max-width:none}
.result-body a{color:var(--accent)}
.result-body ul,.result-body ol{margin:0 0 0.5em 1.2rem}
.result-body table{border-collapse:collapse;font-size:0.92rem}
.result-body td,.result-body th{border:1px solid var(--rule-strong);padding:6px 10px;text-align:left}

/* ===== PAGE NAV ===== */
.page-nav{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:3rem;
  padding-top:1.6rem;
  border-top:1px solid var(--rule);
  max-width:70ch;
}
.page-nav a{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:12px 18px;
  color:var(--ink);
  text-decoration:none;
  flex:1;
  max-width:280px;
}
.page-nav a:hover{border-color:var(--accent);background:var(--paper-raised)}
.page-nav .dir{display:block;font-size:0.75rem;color:var(--ink-soft);margin-bottom:2px}
.page-nav .next{text-align:right;margin-left:auto}

/* ===== SITE HOME ===== */
.site-header{margin-bottom:3rem}
.site-header .brand{margin-bottom:6px}
.site-header .brand .name{font-size:1.4rem}
.site-header p.lede{margin-top:10px}

.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
  margin-top:2rem;
  max-width:760px;
}
.course-card{
  display:block;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:20px 22px;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .15s;
}
.course-card:hover{border-color:var(--accent);text-decoration:none}
.course-card .tag{
  font-family:'JetBrains Mono',monospace;
  color:var(--accent);
  font-size:0.85rem;
}
.course-card h3{margin-top:6px;margin-bottom:6px;font-size:1.15rem}
.course-card p{font-size:0.88rem;color:var(--ink-soft);margin:0;max-width:none}
.course-card .status{
  display:inline-block;
  margin-top:10px;
  font-size:0.72rem;
  font-family:'JetBrains Mono',monospace;
  color:var(--ink-soft);
}
.course-card.soon{opacity:0.55;cursor:default}
.course-card.soon:hover{border-color:var(--rule)}

.top-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.82rem;
  color:var(--ink-soft);
  margin-bottom:22px;
  text-decoration:none;
}
.top-link:hover{color:var(--accent);text-decoration:none}

/* ===== INTERACTIVE EDITOR ===== */
.editor-widget{
  margin:1.6rem 0 2rem;
  max-width:70ch;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
}
.editor-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--paper-raised);
  border-bottom:1px solid var(--rule);
  padding:8px 14px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--ink-soft);
}
.editor-reset{
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  padding:3px 10px;
  cursor:pointer;
}
.editor-reset:hover{border-color:var(--accent);color:var(--accent)}
.editor-code{
  display:block;
  width:100%;
  min-height:120px;
  background:var(--code-bg);
  color:var(--code-text);
  font-family:'JetBrains Mono',monospace;
  font-size:0.87rem;
  line-height:1.7;
  padding:16px 20px;
  border:none;
  resize:vertical;
  white-space:pre;
}
.editor-code:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.editor-result-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  color:var(--ink-soft);
  padding:8px 14px 0;
  background:var(--paper-raised);
}
.editor-frame{
  display:block;
  width:100%;
  min-height:60px;
  border:none;
  background:#fff;
}

/* ===== SQL EDITOR ===== */
.sql-widget{
  margin:1.6rem 0 2rem;
  max-width:70ch;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
}
.sql-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--paper-raised);
  border-bottom:1px solid var(--rule);
  padding:8px 14px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--ink-soft);
}
.sql-actions{display:flex;gap:8px}
.sql-run{
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:#fff;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  padding:3px 12px;
  cursor:pointer;
}
.sql-run:hover{opacity:0.9}
.sql-reset{
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  padding:3px 10px;
  cursor:pointer;
}
.sql-reset:hover{border-color:var(--accent);color:var(--accent)}
.sql-code{
  display:block;
  width:100%;
  min-height:100px;
  background:var(--code-bg);
  color:var(--code-text);
  font-family:'JetBrains Mono',monospace;
  font-size:0.87rem;
  line-height:1.7;
  padding:16px 20px;
  border:none;
  resize:vertical;
  white-space:pre;
}
.sql-code:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.sql-result-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  color:var(--ink-soft);
  padding:8px 14px 0;
  background:var(--paper-raised);
}
.sql-result{
  background:var(--paper-raised);
  padding:12px 14px 16px;
  overflow-x:auto;
  font-size:0.85rem;
}
.sql-result table{border-collapse:collapse;width:100%;font-family:'JetBrains Mono',monospace;font-size:0.82rem}
.sql-result th,.sql-result td{border:1px solid var(--rule);padding:5px 10px;text-align:left}
.sql-result th{background:var(--paper);color:var(--ink)}
.sql-status{font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--ledger-green)}
.sql-error{font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:#a33b3b;white-space:pre-wrap}

/* ===== SITE FOOTER ===== */
.site-footer{
  border-top:1px solid var(--rule);
  background:var(--paper-raised);
  padding:24px 56px;
}
.site-footer-inner{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-footer .copy{font-size:0.82rem;color:var(--ink-soft)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.site-footer nav a{font-size:0.82rem;color:var(--ink-soft);text-decoration:none}
.site-footer nav a:hover{color:var(--accent);text-decoration:underline}

@media (max-width:820px){
  .site-footer{padding:20px 22px}
}

/* ===== SIMPLE PAGES (About/Contact/Privacy/Terms/Disclaimer) ===== */
.simple-page{max-width:900px;margin:0 auto;padding:52px 56px 80px}
.simple-page .content{max-width:680px}
@media (max-width:820px){
  .simple-page{padding:32px 22px 60px}
}