:root{
  --paper:#0A1014;
  --panel:#0F1821;
  --panel-2:#131E28;
  --ink:#E8EFF4;
  --ink-soft:#8FA1AF;
  --grid:#161F27;
  --line:#26333E;
  --accent:#3FCF8E;
  --accent-soft:rgba(63,207,142,0.12);
  --kw:#6FD3FF;
  --str:#E8B84B;
  --signal:#E8B84B;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:34px 34px;
  color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#06231A}

html{
  /* Hide scrollbar for Chrome, Safari, and Opera */
  &::-webkit-scrollbar{
    display:none;
  }

  /* Hide scrollbar for Firefox */
  scrollbar-width:none;

  /* Hide scrollbar for IE and Edge */
  -ms-overflow-style:none;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

.display{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 118, 'wght' 800;
  letter-spacing:-0.015em;
  line-height:1.05;
}
.mono{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.mono b{color:var(--accent);font-weight:500}

/* sql syntax bits */
.kw{color:var(--kw)}
.str{color:var(--str)}
.cmt{color:var(--ink-soft);opacity:.75}
.prompt{color:var(--accent)}

/* nav */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,16,20,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:58px}
nav a{color:var(--ink);text-decoration:none}
nav .links{display:flex;gap:26px}
nav .links a{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;letter-spacing:0.04em;
  color:var(--ink-soft);
  padding:4px 2px;border-bottom:2px solid transparent;
  transition:color .15s;
}
nav .links a:hover,nav .links a:focus-visible{color:var(--ink);border-color:var(--accent);outline:none}
nav .links a.active{color:var(--accent);border-color:var(--accent)}
.navmark{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;color:var(--accent)}
.navmark span{color:var(--ink-soft)}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  line-height:1;
  font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;letter-spacing:0.04em;
  text-decoration:none;
  padding:14px 22px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink);
  background:var(--panel);
  transition:background .15s,color .15s,border-color .15s;
}
.btn svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;display:block}
.btn.primary{background:var(--accent);color:#06231A;border-color:var(--accent);font-weight:500}
.btn.primary:hover,.btn.primary:focus-visible{background:#5CE3A6;border-color:#5CE3A6;outline:none}
.btn:not(.primary):hover,.btn:not(.primary):focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* uniform page top: title + query bar (identical on every page) */
.pagetop{padding:58px 0 0}
.pagetitle{font-size:clamp(36px,5vw,58px);margin-bottom:24px}
.pagetop + section{padding-top:34px}
.console{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.panelhead{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;
  padding:12px 18px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.consolebody{padding:22px 22px 18px}
.qline{
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;letter-spacing:0.01em;
  color:var(--ink);
  line-height:1.7;
  word-break:break-word;
}
.caret{
  display:inline-block;width:8px;height:16px;
  background:var(--accent);vertical-align:-2px;margin-left:2px;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* result set */
.rtable{border-top:none}
.rtable.staged .rcol,
.rtable.staged .rcell{opacity:0;transform:translateY(8px)}
.rhead,.rbody{display:grid;grid-template-columns:repeat(3,1fr)}
.rhead{border-bottom:1px solid var(--line)}
.rcol,.rcell{
  padding:16px 22px;
  transition:opacity .45s ease,transform .45s ease;
}
.rcol{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--accent);
}
.rcell{padding:24px 22px 28px}
.rcol + .rcol,
.rcell + .rcell{border-left:1px solid var(--grid)}
.rtable.staged .rcol.in,
.rtable.staged .rcell.in{opacity:1;transform:none}
.rcell p{color:var(--ink-soft);font-size:16px}
.rcount{padding:16px 4px 4px}
.consolecta{margin-top:34px}

/* sql contact form */
.sqlform .qline{margin-bottom:6px}
.sqlform .indent{padding-left:24px}
.fieldrow{
  display:flex;align-items:flex-start;gap:2px;
  padding-left:24px;margin-bottom:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;line-height:1.7;
  cursor:text;
}
.quo{color:var(--str);flex-shrink:0}
.fieldrow input,
.fieldrow textarea{
  flex:1;min-width:0;
  background:transparent;
  border:none;border-bottom:1px dashed var(--line);
  color:var(--str);
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;line-height:1.7;
  padding:0 6px 2px;
  outline:none;
  resize:vertical;
}
.fieldrow input::placeholder,
.fieldrow textarea::placeholder{color:var(--ink-soft);opacity:.55}
.fieldrow input:focus,
.fieldrow textarea:focus{border-bottom-color:var(--accent)}
.sqlform button{margin-top:22px}
.qresult{margin-top:16px;min-height:18px;text-transform:none;letter-spacing:0.02em}
.qresult.ok{color:var(--accent)}
.qresult.err{color:#FF7B72}

/* query bar (interior pages) */
.querybar{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;letter-spacing:0.01em;
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 18px;
  display:inline-block;
  max-width:100%;
  word-break:break-word;
}
.directlabel{margin-bottom:14px}

/* generic sections */
section{padding:76px 0}
.sechead{margin-bottom:44px}
.sechead h2{font-size:clamp(30px,3.6vw,44px);margin-top:10px}

/* projects */
.case{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:40px;
}
.case:last-child{margin-bottom:0}
.casehead{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:8px;
  padding:18px 28px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.casehead h3{font-size:clamp(21px,2.5vw,28px)}
.casebody{display:grid;grid-template-columns:1.1fr 0.9fr}
.casetext{padding:30px 28px;border-right:1px solid var(--line)}
.casetext p{color:var(--ink-soft);font-size:16.5px}
.casetext p + p{margin-top:14px}
.caseviz{padding:30px 28px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.caseviz svg{width:100%;height:auto}
.tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 28px;border-top:1px solid var(--line)}
.tags .mono{margin-right:4px}
.tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;padding:5px 10px;border-radius:4px;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid rgba(63,207,142,0.22);
}

.maplab{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:var(--ink-soft)}
.mapline{stroke:var(--accent);stroke-width:1.2;opacity:.55}
.mapbox{fill:var(--panel-2);stroke:var(--line)}
.mapbox-hl{fill:var(--accent-soft);stroke:var(--accent)}

/* contact */
.sqlform + *,
.console + .directlabel{margin-top:0}
section > .wrap > .console{margin-bottom:30px}

/* held back until the query finishes typing */
.js .pending{display:none}

.qgate{transition:opacity .5s ease,transform .5s ease}
.js .qgate{opacity:0;transform:translateY(10px)}
.js .qgate.in{opacity:1;transform:none}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .rtable.staged .rcol,
  .rtable.staged .rcell{opacity:1;transform:none}
  *{animation:none!important;transition:none!important}
}

@media (max-width:860px){
  .casebody{grid-template-columns:1fr}
  .casetext{border-right:none;border-bottom:1px solid var(--line)}
  .rhead{display:none}
  .rbody{grid-template-columns:1fr}
  .rcell + .rcell{border-left:none;border-top:1px solid var(--grid)}
  .rcell::before{
    content:attr(data-col);
    display:block;margin-bottom:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--accent);
  }
  nav .links{gap:16px}
}