/* Quicksand at weight 300 (Material default for h1/h2) is too thin */
.md-typeset h1, .md-typeset h2 { font-weight: 500; }

.md-footer img {
  height: 50px;
  margin-top: 10px;
}

.admonition.quote.inline.end {
  width: 30%;
  background-color: inherit;
  opacity: 0.25;
  /* filter: drop-shadow(3px 3px 4px hsla(45.2, 34.4%, 48.4%, 0.41)); */
}

.md-typeset {
  font-weight: 500;
  color-adjust: exact;
  font-size: 0.9rem;
  letter-spacing: -.01em;
  line-height: 1.4em;
  overflow-wrap: break-word;
}

.md-typeset ul {
  list-style-type: disc;
  line-height: 1.2em;
  font-size: 0.95em;
}
.md-typeset .admonition, .md-typeset details {
  color: var(--md-admonition-fg-color);
  font-size: .64rem;
}

.md-typeset table:not([class]) {
  font-size: .90rem;
}

[data-md-color-scheme="default"] {
  --md-default-fg-color: #000000de;
  /* --md-default-bg-color: #F7F4EE; */
  /* --md-default-bg-color: #FCFAF7; */
  --md-default-bg-color: #FFFFFF;
  --md-typeset-color: var(--md-default-fg-color);
}

/* Hides the autogenerate h1 for files without titles */
#__skip{
  display: none
}

/* Sidenotes -- inline with visual distinction */
.sidenote {
  font-size: 0.82em;
  color: var(--md-default-fg-color--light);
  background: var(--md-code-bg-color);
  padding: 1px 6px;
  border-radius: 3px;
  border-left: 2px solid var(--md-accent-fg-color);
}

/* Numbered sidenote marker (superscript counter before the note) */
body {
  counter-reset: sidenote-counter;
}



.sidenote-number { counter-increment: sidenote-counter; }
.sidenote-number::before {
  content: counter(sidenote-counter);
  font-size: 0.7em;
  vertical-align: super;
  font-weight: 600;
  margin-right: 1px;
}

/* Sidesigil -- margin markers rendered inline */
.sidesigil {
  font-size: 1.1em;
  font-weight: 700;
  color: rgba(156, 46, 98, 0.7);
  margin-right: 0.3em;
}

/* Sigil inline code -- colored bracket glyphs */
.sigil {
  font-family: var(--md-code-font-family);
  background: rgba(156, 46, 98, 0.06);
  border: 1px solid rgba(156, 46, 98, 0.15);
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
}
.sigil .sigil-bracket {
  color: rgba(156, 46, 98, 0.45);
  font-size: 0.85em;
}




#main-grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

@media (max-width: 768px) {
  #main-grid-layout {
    display: initial;
  }

}


#main-description { grid-area: 1 / 1 / 6 / 4; }
#main-logo { grid-area: 1 / 4 / 2 / 5; }
#main-3 { grid-area: 2 / 3 / 4 / 5; }
#main-4 { grid-area: 4 / 3 / 6 / 5; }

.main-grid {
  padding: 1em;
}

.md-typeset code.dql-example-source{
  font-size: 1.1em;
}
#hero-query pre{
  font-size: 1.1em;
}

/* onetuh */

#dql-tutorial-status {
  padding: 8px 14px;
  margin-bottom: 24px;
  border-radius: 6px;
  font-size: 1.1em;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest);
}
#dql-tutorial-status.ready {
  color:  var(--md-code-hl-generic-color);
}
#dql-tutorial-status.error {
  border-color: #f44336;
  color: #f44336;
}
.dql-playground {
  margin: 16px 0 32px 0;
}
  .dql-playground textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--md-default-fg-color--lightest);
    border-radius: 6px;
    font-family: 'Iosevka Charon Mono';
    font-size: 1.2em;
    line-height: 1.5;
    resize: vertical;
    background: var(--md-code-bg-color);
    color: var(--md-code-fg-color);
  }
.dql-playground textarea.dql-input:focus {
  outline: none;
  border-color: var(--md-accent-fg-color);
}
.dql-playground-btn {
  margin-top: 8px;
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  background: var(--md-code-hl-generic-color);
  color: var(--md-accent-bg-color);
}
.dql-playground-btn:hover { opacity: 0.85; }
.dql-playground-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dql-playground .highlight pre {
  position: relative;
}
.dql-code-run {
  position: absolute;
  top: .45em;
  right: 2.4em;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: .1rem;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
  opacity: 0;
  transition: opacity .15s;
}
.dql-query-links { display: flex; flex-wrap: wrap; gap: 1em; align-items: baseline; margin: .5em 0; font-size: .75rem; }
.dql-query-links button { color: var(--md-typeset-a-color); cursor: pointer; font: inherit; }
.dql-query-links [role="status"] { overflow-wrap: anywhere; min-width: 0; }
.dql-code-run svg { width: 100%; height: 100%; }
.md-code__button.dql-code-run::after { content: none; }
.dql-playground pre:hover .dql-code-run,
.dql-playground pre:focus-within .dql-code-run {
  opacity: 1;
}
.dql-code-run:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}
@media (hover: none), (pointer: coarse) {
  .dql-code-run { opacity: 1; }
}
.dql-output-tab {
  margin-right: 8px;
  background: transparent;
  color: var(--md-default-fg-color);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.dql-output-tab[aria-selected="true"] {
  border-bottom-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}
.dql-playground-output {
  margin-top: 12px;
  border: 2px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  overflow: hidden;
}
.dql-playground-output h4 {
  margin: 0;
  padding: 6px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
}
.dql-playground-output pre.dql-sql {
  margin: 0;
  padding: 12px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 200px;
  overflow-y: auto;
  background: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
}
.dql-playground-output pre.dql-sql.error {
  color: #d32f2f;
  background: #ffebee;
}
.dql-playground-results table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
}
.dql-playground-results th,
.dql-playground-results td {
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  white-space: pre-wrap;
}
.dql-playground-results th {
  font-weight: 600;
  background: var(--md-default-fg-color--lightest);
}


.zen-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: sans-serif;
  color: #666;
}

.zen-ripple {
  width: 50px;
  height: 50px;
  border: 2px solid #8fa89b;
  border-radius: 50%;
  animation: zen-breathe 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
}

.ripple-delay {
  animation-delay: 1.5s;
}

@keyframes zen-breathe {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}