:root{
  color-scheme:light;
  --ink:#172430;
  --muted:#637582;
  --line:#e3e9ed;
  --yellow:#ffdc62;
  --blue:#2067ce;
  --canvas:#f5f8fa
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
button,textarea,select{
  font:inherit
}
button{
  cursor:pointer
}
button:disabled{
  cursor:wait;
  opacity:.65
}
button:focus-visible,a:focus-visible,textarea:focus-visible{
  outline:3px solid #75a8f0;
  outline-offset:3px
}
.shell{
  max-width:1440px;
  margin:auto;
  padding:0 32px
}
header{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand{
  font-size:23px;
  font-weight:800;
  letter-spacing:-.7px;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:10px
}
.duck{
  width:62px;
  height:52px;
  object-fit:contain
}
.status{
  font-size:12px;
  font-weight:700;
  color:#32614d;
  border:1px solid #c6e2d3;
  background:#ebf6ef;
  border-radius:20px;
  padding:6px 12px
}
.status:before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  background:#3a8f66;
  border-radius:50%;
  margin-right:7px
}
.hero{
  padding:34px 0 25px;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-end
}
.eyebrow{
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:800;
  color:var(--blue);
  margin:0 0 8px
}
h1{
  font-size:38px;
  line-height:1.15;
  letter-spacing:-1.3px;
  margin:0 0 10px
}
.intro{
  color:var(--muted);
  margin:0;
  max-width:640px
}
.facts{
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.fact{
  font-size:12px;
  background:white;
  border:1px solid var(--line);
  padding:7px 12px;
  border-radius:8px;
  white-space:nowrap
}
.workspace{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:20px;
  align-items:start
}
.card{
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 3px 15px #17243003
}
.card-head{
  padding:18px 18px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.card-head h2{
  font-size:13px;
  letter-spacing:.3px;
  margin:0
}
.count{
  font-size:11px;
  background:#eef3f7;
  color:var(--muted);
  padding:2px 7px;
  border-radius:5px
}
.tables{
  padding:0 8px 10px;
  max-height:270px;
  overflow:auto
}
.table-button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:10px;
  border-radius:9px;
  color:var(--ink)
}
.table-button:hover{
  background:#f3f6fa
}
.table-button.active{
  background:#fff5cb
}
.table-icon{
  color:#657f90;
  font-size:18px
}
.table-button strong{
  font-size:13px;
  font-weight:650;
  display:block
}
.table-button small{
  font-size:10px;
  color:var(--muted);
  display:block
}
.sidebar-label{
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
  padding:17px 18px 8px;
  border-top:1px solid var(--line)
}
.presets{
  padding:0 8px 10px
}
.preset{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap:9px;
  background:none;
  border:0;
  padding:9px 10px;
  border-radius:8px;
  color:#415765;
  font-size:12px
}
.preset:hover{
  background:#f3f6fa
}
.preset span{
  color:var(--blue);
  font-size:15px
}
.note{
  padding:16px 4px;
  color:var(--muted);
  font-size:11px
}
.note strong{
  color:#53646d
}
.main{
  min-width:0;
  display:grid;
  gap:16px
}
.editor-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  border-bottom:1px solid var(--line)
}
.editor-head strong{
  font-size:13px
}
.editor-head span{
  font-size:10px;
  letter-spacing:.5px;
  color:var(--muted)
}
textarea{
  width:100%;
  min-height:216px;
  resize:vertical;
  border:0;
  background:#fcfdff;
  padding:19px 21px;
  color:#1d466f;
  font:13px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;
  outline-offset:-3px
}
.editor-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  border-top:1px solid var(--line)
}
.shortcut{
  font-size:11px;
  color:var(--muted)
}
.run{
  background:var(--yellow);
  border:0;
  border-radius:9px;
  padding:10px 17px;
  font-size:12px;
  font-weight:800;
  color:var(--ink)
}
.run:hover{
  background:#ffd347
}
.details{
  padding:16px 20px;
  display:none
}
.details.open{
  display:block
}
.details-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px
}
.details h2{
  font-size:13px;
  margin:0
}
.secondary{
  background:white;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:7px;
  font-size:11px;
  color:var(--blue)
}
.columns{
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.column{
  border:1px solid #e5edf3;
  background:#f8fafc;
  border-radius:6px;
  padding:5px 8px;
  font-size:11px
}
.column span{
  color:var(--muted);
  font-size:9px;
  margin-left:5px
}
.column em{
  font-style:normal;
  color:#9baab4;
  margin-left:5px
}
.result-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  border-bottom:1px solid var(--line)
}
.result-head h2{
  font-size:13px;
  margin:0
}
.result-meta{
  font-size:11px;
  color:var(--muted)
}
.results{
  overflow:auto;
  max-height:460px;
  min-height:120px
}
.results table{
  border-collapse:collapse;
  font-size:12px;
  min-width:100%;
  white-space:nowrap
}
.results th{
  position:sticky;
  top:0;
  background:#f7f9fc;
  color:#516976;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.3px;
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--line)
}
.results td{
  padding:10px 16px;
  border-bottom:1px solid #edf1f4;
  max-width:480px;
  overflow:hidden;
  text-overflow:ellipsis
}
.results tbody tr:hover{
  background:#fffcf0
}
.null{
  color:#a1aeb7;
  font-style:italic
}
.empty{
  padding:30px 20px;
  color:var(--muted);
  font-size:13px
}
.notice{
  font-size:12px;
  color:#916b16;
  padding:0 20px
}
.notice:not(:empty){
  padding:12px 20px;
  background:#fff9e7;
  border-bottom:1px solid #f4e7bd
}
.notice.error{
  color:#a04635;
  background:#fff0ed
}
footer{
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:#82919b;
  font-size:10px;
  padding:25px 0 30px
}
@media(max-width:900px){
  .shell{
    padding:0 18px
  }
  .hero{
    display:block
  }
  .facts{
    margin-top:18px
  }
  .workspace{
    grid-template-columns:220px minmax(0,1fr)
  }
  h1{
    font-size:32px
  }
  .shortcut{
    display:none
  }
  .editor-head span{
    display:none
  }
}
@media(max-width:640px){
  header{
    height:72px
  }
  .brand{
    font-size:20px
  }
  .status{
    font-size:10px
  }
  .hero{
    padding:25px 0
  }
  .workspace{
    display:block
  }
  .sidebar{
    margin-bottom:16px
  }
  .tables{
    max-height:160px
  }
  .presets{
    display:flex;
    overflow:auto;
    gap:4px
  }
  .preset{
    min-width:155px
  }
  .note{
    display:none
  }
  .sidebar-label{
    padding-top:11px
  }
  textarea{
    min-height:190px;
    font-size:12px
  }
  .result-meta{
    font-size:10px
  }
  .details-top{
    align-items:flex-start
  }
  footer{
    display:block
  }
  footer span{
    display:block;
    margin-bottom:5px
  }
}
.brand-dot{
  color:#d2a122
}