:root{--font-size-base:16px;--foreground:#232323;--muted-foreground:#555;--border:#dadada;--viz-series-1:#005b92;--viz-series-2:#427e16}
body{margin:0;color:var(--foreground);font:16px "Fira Sans",sans-serif}
@font-face{font-family:"Fira Sans";src:url("FiraSans-Regular.woff2") format("woff2")}
h3,p{margin:0}.viz-row{display:flex;flex-wrap:wrap;gap:8px}.text-small{font-size:13px}
.btn{font:inherit;background:#fff;color:#005b92;border:1px solid #005b92;padding:7px 10px;cursor:pointer}.btn[aria-pressed="true"]{background:#005b92;color:#fff}
.btn:hover{background:#ededed;color:#005b92}
.btn[aria-pressed="true"]:hover{background:#004a77;color:#fff}
.btn:focus-visible{outline:2px solid #005b92;outline-offset:3px}

  #qmandat-vector-demo .qm-queries,
  #qmandat-vector-demo .qm-result {
    margin-top: calc(var(--font-size-base) * .5);
  }
  #qmandat-vector-demo .qm-plot {
    display: block;
    width: 100%;
    color: var(--foreground);
    margin-top: calc(var(--font-size-base) * .5);
  }
  #qmandat-vector-demo .qm-guide { stroke: var(--border); }
  #qmandat-vector-demo .qm-ray { stroke: var(--viz-series-1); stroke-dasharray: 5 4; }
  #qmandat-vector-demo .qm-hit-ray { stroke: var(--viz-series-2); }
  #qmandat-vector-demo .qm-dot { fill: var(--muted-foreground); }
  #qmandat-vector-demo .qm-text { fill: var(--foreground); }
  #qmandat-vector-demo .qm-query-mark { fill: var(--viz-series-1); }
  #qmandat-vector-demo .qm-hit-mark { stroke: var(--viz-series-2); stroke-width: 2; }
  #qmandat-vector-demo .qm-query-symbol { color: var(--viz-series-1); }
  #qmandat-vector-demo .qm-hit-symbol { color: var(--viz-series-2); }
  #qmandat-vector-demo .qm-result + p { margin-top: calc(var(--font-size-base) * .25); }