:root {
  --dq-color-page: #aaa;
  --dq-color-bg: #fff;
  --dq-color-fg: #1a1a1a;
  --dq-color-muted: #3b3f4a;
  --dq-color-border: #e5e7eb;
  --dq-color-primary: #00a;
  --dq-color-link: #00a;
  --dq-color-primary-fg: #fff;
  --dq-color-secondary: #0aa;
  --dq-color-secondary-fg: #000;
  --dq-color-info: var(--dq-color-link);
  --dq-color-success: #070;
  --dq-color-warning: #a50;
  --dq-color-danger: #a00;
  --dq-color-danger-text: #700;
  --dq-font-mono: ui-monospace, "Cascadia Code", Menlo, monospace;
  --dq-font-base: "IBM Plex Mono", var(--dq-font-mono);
  --dq-text-sm: .875rem;
  --dq-text-base: 1rem;
  --dq-space-1: .25rem;
  --dq-space-2: .5rem;
  --dq-space-3: .75rem;
  --dq-space-4: 1rem;
  --dq-space-6: 1.5rem;
  --dq-space-8: 2rem;
  --dq-radius: 0;
  --dq-border-width: 2px;
  --dq-shadow-offset: 8px;
  --dq-shadow-color: var(--dq-color-fg);
  --dq-checker-size: 16px;
  --dq-checker-color: var(--dq-color-primary);
  --dq-halftone-size: 6px;
  --dq-progress-segment: 12px;
  --dq-progress-gap: 4px;
  --dq-color-focus: #ff4500;
  --dq-ring: 0 0 0 3px var(--dq-color-focus);
}

:root[data-theme="dark"] {
  --dq-color-bg: #0f1115;
  --dq-color-page: #0f1115;
  --dq-color-fg: #e5e7eb;
  --dq-color-muted: #9ca3af;
  --dq-color-border: #2a2f3a;
  --dq-color-link: #55f;
  --dq-color-secondary: #5ff;
  --dq-color-success: #5f5;
  --dq-color-warning: #ff5;
  --dq-color-danger: #f55;
  --dq-color-danger-text: #f55;
}

*, :before, :after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  line-height: 1.5;
}

img, svg, video, canvas {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

body {
  font-family: var(--dq-font-base);
  font-size: var(--dq-text-base);
  color: var(--dq-color-fg);
  background: var(--dq-color-page);
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  text-transform: uppercase;
  font-size: 1.75rem;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.15rem;
}

h4 {
  font-size: 1rem;
}

a {
  color: var(--dq-color-link);
  text-decoration-thickness: var(--dq-border-width);
  text-underline-offset: .2em;
}

a:not([class]):hover {
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  text-decoration: none;
}

hr {
  border: 0;
  border-top: var(--dq-border-width) solid var(--dq-color-primary);
  height: 0;
}

code, kbd, pre {
  font-family: var(--dq-font-mono);
  font-size: .9em;
}

code {
  color: var(--dq-color-fg);
  background: color-mix(in srgb, var(--dq-color-link) 12%, var(--dq-color-bg));
  padding: 0 .25em;
}

kbd {
  border: var(--dq-border-width) solid var(--dq-color-primary);
  background: var(--dq-color-bg);
  color: var(--dq-color-fg);
  box-shadow: calc(var(--dq-shadow-offset) / 4) calc(var(--dq-shadow-offset) / 4) 0 var(--dq-shadow-color);
  padding: 0 .4em;
}

pre {
  padding: var(--dq-space-3) var(--dq-space-4);
  color: var(--dq-color-fg);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  background: var(--dq-color-bg);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

.dq-btn, .dq-btn:before, .dq-badge--halftone:before, .dq-badge--halftone:after, .dq-modal::backdrop {
  --_tile: var(--dq-dot-tile, var(--dq-halftone-size));
  background-image: radial-gradient(circle at center,
            var(--dq-dot-color) var(--dq-dot-radius),
            transparent calc(var(--dq-dot-radius) + .5px)),
        radial-gradient(circle at center,
            var(--dq-dot-color) var(--dq-dot-radius),
            transparent calc(var(--dq-dot-radius) + .5px));
  background-size: var(--_tile) var(--_tile);
  background-position: 0 0, calc(var(--_tile) / 2) calc(var(--_tile) / 2);
}

@keyframes dq-halftone-scroll {
  from {
    background-position: 0 0, calc(var(--_tile) / 2) calc(var(--_tile) / 2);
  }

  to {
    background-position: var(--_tile) var(--_tile), calc(var(--_tile) * 1.5) calc(var(--_tile) * 1.5);
  }
}

.dq-btn {
  isolation: isolate;
  align-items: center;
  gap: var(--dq-space-2);
  padding: var(--dq-space-2) var(--dq-space-4);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background-color: var(--dq-color-bg);
  color: var(--dq-color-fg);
  --dq-btn-press: 0px;
  --dq-btn-shadow: calc(var(--dq-shadow-offset) - var(--dq-btn-press)) calc(var(--dq-shadow-offset) - var(--dq-btn-press)) 0 var(--dq-shadow-color);
  transform: translate(var(--dq-btn-press), var(--dq-btn-press));
  box-shadow: var(--dq-btn-shadow);
  cursor: pointer;
  --dq-btn-dot-color: color-mix(in srgb, var(--dq-color-primary) 35%, transparent);
  --dq-btn-dot-radius: 1px;
  --dq-btn-bg: var(--dq-color-bg);
  -webkit-text-stroke: 4px var(--dq-btn-bg);
  paint-order: stroke fill;
  --dq-dot-color: transparent;
  --dq-dot-radius: var(--dq-btn-dot-radius);
  animation: var(--dq-btn-anim, none);
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.dq-btn:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  --dq-dot-radius: calc(var(--dq-btn-dot-radius) + 1px);
  animation: var(--dq-btn-anim, none);
  position: absolute;
  inset: 0;
  mask-image: radial-gradient(circle at 0 0, #000, #0000 70%), radial-gradient(circle at 100% 100%, #000, #0000 70%);
}

@media (hover: hover) {
  .dq-btn:hover:not(:disabled) {
    --dq-btn-press: calc(var(--dq-shadow-offset) / 2);
    --dq-dot-color: var(--dq-btn-dot-color);
    --dq-btn-anim: dq-halftone-scroll 1s linear infinite;
  }
}

.dq-btn:active:not(:disabled) {
  --dq-btn-press: var(--dq-shadow-offset);
  --dq-btn-dot-radius: 1.75px;
  --dq-dot-color: var(--dq-btn-dot-color);
  --dq-btn-anim: dq-halftone-scroll 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dq-btn {
    --dq-btn-anim: none !important;
  }
}

.dq-btn:focus-visible {
  box-shadow: var(--dq-ring), var(--dq-btn-shadow);
  outline: none;
}

.dq-btn:disabled {
  --dq-btn-press: var(--dq-shadow-offset);
  opacity: .5;
  cursor: not-allowed;
}

.dq-btn--primary {
  background-color: var(--dq-color-primary);
  --dq-btn-bg: var(--dq-color-primary);
  color: var(--dq-color-primary-fg);
  --dq-btn-dot-color: color-mix(in srgb, var(--dq-color-primary-fg) 30%, transparent);
}

.dq-btn--secondary {
  background-color: var(--dq-color-secondary);
  --dq-btn-bg: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  --dq-btn-dot-color: color-mix(in srgb, var(--dq-color-secondary-fg) 25%, transparent);
}

.dq-panel, .dq-panel__body {
  --dq-panel-pad: var(--dq-space-4);
  gap: var(--dq-space-4);
  padding: var(--dq-panel-pad);
  flex-direction: column;
  display: flex;
}

.dq-panel {
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  box-shadow: var(--dq-shadow-offset) var(--dq-shadow-offset) 0 var(--dq-shadow-color);
}

.dq-panel--checker {
  background: conic-gradient(var(--dq-checker-color) 25%,
            var(--dq-color-bg) 0 50%,
            var(--dq-checker-color) 0 75%,
            var(--dq-color-bg) 0)
        0 0 / calc(var(--dq-checker-size) * 2) calc(var(--dq-checker-size) * 2);
}

.dq-panel__body {
  background: var(--dq-color-bg);
  border: var(--dq-border-width) solid var(--dq-color-primary);
}

.dq-panel__title {
  margin: calc(var(--dq-panel-pad) * -1) calc(var(--dq-panel-pad) * -1) 0;
  padding: var(--dq-space-2) var(--dq-panel-pad);
  border-bottom: var(--dq-border-width) solid var(--dq-color-primary);
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  font-size: var(--dq-text-base);
  text-transform: uppercase;
  font-weight: 700;
}

.dq-input, .dq-select {
  width: 100%;
  padding: var(--dq-space-2) var(--dq-space-3);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  --dq-input-shadow: inset calc(var(--dq-shadow-offset) / 2) calc(var(--dq-shadow-offset) / 2) 0 var(--dq-shadow-color);
  box-shadow: var(--dq-input-shadow);
}

.dq-input::placeholder {
  color: var(--dq-color-muted);
}

.dq-input:focus-visible, .dq-select:focus-visible {
  box-shadow: var(--dq-ring), var(--dq-input-shadow);
  outline: none;
}

.dq-input:disabled, .dq-select:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.dq-field {
  gap: var(--dq-space-1);
  flex-direction: column;
  display: flex;
}

.dq-field__label {
  font-size: var(--dq-text-sm);
  font-weight: 600;
}

.dq-field__hint {
  font-size: var(--dq-text-sm);
  color: var(--dq-color-muted);
}

.dq-input[aria-invalid="true"], .dq-select[aria-invalid="true"] {
  border-color: var(--dq-color-danger);
}

.dq-field--error .dq-field__hint {
  color: var(--dq-color-danger-text);
}

.dq-select {
  --_arrow: var(--dq-color-link);
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--_arrow) 50%),
        linear-gradient(-45deg, transparent 50%, var(--_arrow) 50%);
  background-repeat: no-repeat;
  background-size: .4rem .4rem;
  background-position: calc(100% - 1.2rem - .4rem) calc(50% + var(--dq-shadow-offset) / 4),
        calc(100% - 1.2rem) calc(50% + var(--dq-shadow-offset) / 4);
  padding-right: 2.5rem;
}

.dq-select:disabled {
  cursor: not-allowed;
}

.dq-select option {
  background: var(--dq-color-bg);
  color: var(--dq-color-fg);
}

.dq-select[multiple], .dq-select[size]:not([size="0"], [size="1"]) {
  padding-right: var(--dq-space-3);
  background-image: none;
}

.dq-check, .dq-radio {
  appearance: none;
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  --dq-choice-shadow: inset calc(var(--dq-shadow-offset) / 4) calc(var(--dq-shadow-offset) / 4) 0 var(--dq-shadow-color);
  width: 1.25rem;
  height: 1.25rem;
  box-shadow: var(--dq-choice-shadow);
  cursor: pointer;
  flex: none;
  place-content: center;
  margin: 0;
  display: inline-grid;
}

.dq-radio {
  border-radius: 50%;
}

.dq-check:after, .dq-radio:after {
  content: "";
  background: var(--dq-color-primary-fg);
  transform: scale(0);
}

.dq-check:after {
  clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 40% 72%);
  width: .75rem;
  height: .75rem;
}

.dq-radio:after {
  border-radius: 50%;
  width: .5rem;
  height: .5rem;
}

.dq-check:checked, .dq-radio:checked {
  background: var(--dq-color-primary);
  box-shadow: none;
}

.dq-check:checked:after, .dq-radio:checked:after {
  transform: scale(1);
}

.dq-check:focus-visible, .dq-radio:focus-visible {
  box-shadow: var(--dq-ring), var(--dq-choice-shadow);
  outline: none;
}

.dq-check:checked:focus-visible, .dq-radio:checked:focus-visible {
  box-shadow: var(--dq-ring);
}

.dq-check:disabled, .dq-radio:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.dq-choice {
  align-items: center;
  gap: var(--dq-space-2);
  cursor: pointer;
  display: inline-flex;
}

.dq-choice:has(:disabled) {
  opacity: .5;
  cursor: not-allowed;
}

.dq-choice .dq-check:disabled, .dq-choice .dq-radio:disabled {
  opacity: 1;
}

.dq-switch {
  --_w: 2.75rem;
  --_h: 1.5rem;
  --_knob-w: .5rem;
  --_knob-h: .875rem;
  --_shadow: calc(var(--dq-shadow-offset) / 4);
  --_gap: calc((var(--_h) - var(--dq-border-width) * 2 - var(--_shadow) - var(--_knob-h)) / 2);
  appearance: none;
  width: var(--_w);
  height: var(--_h);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  --dq-switch-shadow: inset calc(var(--dq-shadow-offset) / 4) calc(var(--dq-shadow-offset) / 4) 0 var(--dq-shadow-color);
  box-shadow: var(--dq-switch-shadow);
  cursor: pointer;
  flex: none;
  margin: 0;
  position: relative;
}

.dq-switch:after {
  content: "";
  top: calc(var(--_shadow) + var(--_gap));
  left: calc(var(--_shadow) + var(--_gap));
  width: var(--_knob-w);
  height: var(--_knob-h);
  background: var(--dq-color-link);
  transition: transform .12s steps(3, end);
  position: absolute;
}

.dq-switch:checked {
  background: var(--dq-color-secondary);
}

.dq-switch:checked:after {
  transform: translateX(calc(var(--_w) - var(--dq-border-width) * 2 - var(--_shadow) - var(--_knob-w) - var(--_gap) * 2));
}

.dq-switch:focus-visible {
  box-shadow: var(--dq-ring), var(--dq-switch-shadow);
  outline: none;
}

.dq-switch:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.dq-choice .dq-switch:disabled {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dq-switch:after {
    transition: none;
  }
}

.dq-fieldset {
  gap: var(--dq-space-3);
  min-width: 0;
  padding: var(--dq-space-4);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  flex-direction: column;
  margin: 0;
  display: flex;
}

.dq-fieldset > legend {
  margin-left: var(--dq-space-2);
  padding: 0 var(--dq-space-3);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  font-size: var(--dq-text-sm);
  text-transform: uppercase;
  font-weight: 700;
}

.dq-fieldset:disabled > legend {
  opacity: .5;
}

.dq-alert {
  --dq-alert-color: var(--dq-color-info);
  padding: var(--dq-space-4);
  border: var(--dq-border-width) solid var(--dq-alert-color);
  border-radius: var(--dq-radius);
  background: color-mix(in srgb, var(--dq-alert-color) 10%, var(--dq-color-bg));
  box-shadow: var(--dq-shadow-offset) var(--dq-shadow-offset) 0 var(--dq-shadow-color);
}

.dq-alert__title {
  margin-bottom: var(--dq-space-1);
  text-transform: uppercase;
  color: var(--dq-alert-color);
  font-weight: 700;
}

.dq-alert--success {
  --dq-alert-color: var(--dq-color-success);
}

.dq-alert--warning {
  --dq-alert-color: var(--dq-color-warning);
}

.dq-alert--danger {
  --dq-alert-color: var(--dq-color-danger);
}

.dq-progress {
  --dq-progress-color: var(--dq-color-link);
  --dq-progress-blocks: repeating-linear-gradient(90deg,
        var(--dq-progress-color) 0 var(--dq-progress-segment),
        transparent var(--dq-progress-segment) calc(var(--dq-progress-segment) + var(--dq-progress-gap)));
  --dq-progress-shadow: inset calc(var(--dq-shadow-offset) / 4) calc(var(--dq-shadow-offset) / 4) 0 var(--dq-shadow-color);
  appearance: none;
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  width: 100%;
  height: 1.5rem;
  box-shadow: var(--dq-progress-shadow);
  padding: 0;
  display: block;
  overflow: hidden;
}

.dq-progress::-webkit-progress-bar {
  background: none;
}

.dq-progress::-webkit-progress-value {
  background: var(--dq-progress-blocks);
  box-shadow: var(--dq-progress-shadow);
}

.dq-progress::-moz-progress-bar {
  background: var(--dq-progress-blocks);
  box-shadow: var(--dq-progress-shadow);
}

.dq-progress:indeterminate {
  background: var(--dq-progress-blocks) 0 0 / calc(var(--dq-progress-segment) + var(--dq-progress-gap)) 100%
        repeat-x var(--dq-color-bg);
  animation: .6s steps(4, end) infinite dq-progress-scroll;
}

.dq-progress:indeterminate::-moz-progress-bar {
  box-shadow: none;
  background: none;
}

@keyframes dq-progress-scroll {
  to {
    background-position-x: calc(var(--dq-progress-segment) + var(--dq-progress-gap));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dq-progress:indeterminate {
    animation: none;
  }
}

.dq-progress--secondary {
  --dq-progress-color: var(--dq-color-secondary);
}

.dq-progress--success {
  --dq-progress-color: var(--dq-color-success);
}

.dq-progress--warning {
  --dq-progress-color: var(--dq-color-warning);
}

.dq-progress--danger {
  --dq-progress-color: var(--dq-color-danger);
}

.dq-badge {
  --dq-badge-color: var(--dq-color-link);
  --dq-badge-dots: color-mix(in srgb, var(--dq-badge-color) 35%, transparent);
  isolation: isolate;
  padding: 0 var(--dq-space-2);
  border: var(--dq-border-width) solid var(--dq-badge-color);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  color: var(--dq-badge-color);
  font-size: var(--dq-text-sm);
  text-transform: uppercase;
  box-shadow: calc(var(--dq-shadow-offset) / 4) calc(var(--dq-shadow-offset) / 4) 0 var(--dq-shadow-color);
  align-items: center;
  font-weight: 700;
  line-height: 1.25rem;
  display: inline-flex;
  position: relative;
}

.dq-badge--success {
  --dq-badge-color: var(--dq-color-success);
}

.dq-badge--warning {
  --dq-badge-color: var(--dq-color-warning);
}

.dq-badge--danger {
  --dq-badge-color: var(--dq-color-danger);
}

.dq-badge--secondary {
  --dq-badge-color: var(--dq-color-secondary);
  color: var(--dq-color-fg);
}

.dq-badge--solid {
  background: var(--dq-badge-color);
  color: var(--dq-color-bg);
  --dq-badge-dots: color-mix(in srgb, var(--dq-color-bg) 35%, transparent);
}

.dq-badge--solid.dq-badge--secondary {
  color: var(--dq-color-secondary-fg);
  --dq-badge-dots: color-mix(in srgb, var(--dq-color-secondary-fg) 25%, transparent);
}

.dq-badge--halftone:before, .dq-badge--halftone:after {
  content: "";
  z-index: -1;
  --dq-dot-color: var(--dq-badge-dots);
  --dq-dot-radius: 1.25px;
  position: absolute;
  inset: 0;
}

.dq-badge--halftone:after {
  --dq-dot-radius: 2.25px;
  mask-image: radial-gradient(circle at 0 0, #000, #0000 70%), radial-gradient(circle at 100% 100%, #000, #0000 70%);
}

.dq-menu {
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  box-shadow: var(--dq-shadow-offset) var(--dq-shadow-offset) 0 var(--dq-shadow-color);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dq-menu__item {
  padding: var(--dq-space-2) var(--dq-space-4);
  cursor: pointer;
}

.dq-menu__item:hover, .dq-menu__item:focus-visible {
  background: color-mix(in srgb, var(--dq-color-secondary) 35%, var(--dq-color-bg));
  outline: none;
}

.dq-menu__item[aria-selected="true"] {
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  font-weight: 700;
}

.dq-menu__item[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

.dq-tabs__list {
  gap: var(--dq-space-1);
  flex-wrap: wrap;
  display: flex;
}

.dq-tabs__tab {
  padding: var(--dq-space-2) var(--dq-space-4) calc(var(--dq-space-2) + var(--dq-border-width));
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  color: var(--dq-color-fg);
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 0;
  font-weight: 600;
  position: relative;
}

.dq-tabs__tab:hover {
  background: color-mix(in srgb, var(--dq-color-secondary) 35%, var(--dq-color-bg));
}

.dq-tabs__tab:focus-visible {
  z-index: 2;
  box-shadow: var(--dq-ring);
  outline: none;
}

.dq-tabs__tab[aria-selected="true"] {
  z-index: 1;
  margin-bottom: calc(var(--dq-border-width) * -1);
  padding-bottom: calc(var(--dq-space-2) + var(--dq-border-width) * 2);
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
}

.dq-tabs__tab:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.dq-tabs__panel {
  padding: var(--dq-space-4);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  box-shadow: var(--dq-shadow-offset) var(--dq-shadow-offset) 0 var(--dq-shadow-color);
}

.dq-navbar {
  background: var(--dq-color-primary);
  color: var(--dq-color-primary-fg);
}

.dq-navbar__inner {
  align-items: center;
  gap: var(--dq-space-4);
  padding-block: var(--dq-space-2);
  flex-wrap: wrap;
  display: flex;
}

.dq-navbar__brand {
  color: inherit;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
}

.dq-navbar__links {
  gap: var(--dq-space-1);
  flex-wrap: wrap;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
}

.dq-navbar__link {
  padding: var(--dq-space-1) var(--dq-space-3);
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  text-decoration: none;
  display: block;
}

.dq-navbar__link:hover, .dq-navbar__link:focus-visible, .dq-navbar__link[aria-current="page"] {
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
}

.dq-navbar__link:focus-visible {
  box-shadow: inset 0 0 0 var(--dq-border-width) var(--dq-color-focus);
  outline: none;
}

.dq-breadcrumb ol {
  gap: var(--dq-space-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.dq-breadcrumb li + li:before {
  content: ">";
  margin-right: var(--dq-space-2);
  color: var(--dq-color-muted);
}

.dq-breadcrumb a:hover {
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  text-decoration: none;
}

.dq-breadcrumb [aria-current="page"] {
  font-weight: 700;
}

.dq-pagination ul {
  gap: var(--dq-space-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.dq-pagination__link {
  --dq-pagination-shadow: calc(var(--dq-shadow-offset) / 4) calc(var(--dq-shadow-offset) / 4) 0 var(--dq-shadow-color);
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--dq-space-2);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  color: var(--dq-color-fg);
  box-shadow: var(--dq-pagination-shadow);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.dq-pagination__link:hover {
  background: color-mix(in srgb, var(--dq-color-secondary) 35%, var(--dq-color-bg));
}

.dq-pagination__link:focus-visible {
  box-shadow: var(--dq-ring), var(--dq-pagination-shadow);
  outline: none;
}

.dq-pagination__link[aria-current="page"] {
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  font-weight: 700;
}

.dq-pagination__link[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.dq-table {
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-spacing: 0;
  border-collapse: separate;
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  width: 100%;
  box-shadow: var(--dq-shadow-offset) var(--dq-shadow-offset) 0 var(--dq-shadow-color);
  text-align: left;
}

.dq-table caption {
  padding-bottom: var(--dq-space-2);
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
}

.dq-table th, .dq-table td {
  padding: var(--dq-space-2) var(--dq-space-4);
}

.dq-table tbody th, .dq-table tbody td {
  border-top: 1px solid var(--dq-color-border);
}

.dq-table tbody tr:first-child th, .dq-table tbody tr:first-child td {
  border-top: 0;
}

.dq-table thead th {
  border-bottom: var(--dq-border-width) solid var(--dq-color-primary);
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  text-transform: uppercase;
  font-weight: 700;
}

.dq-table tbody th {
  font-weight: 600;
}

.dq-table tbody tr:hover {
  background: color-mix(in srgb, var(--dq-color-secondary) 35%, var(--dq-color-bg));
}

.dq-table--striped tbody tr:nth-child(2n) {
  background: color-mix(in srgb, var(--dq-color-link) 8%, var(--dq-color-bg));
}

.dq-table--striped tbody tr:nth-child(2n):hover {
  background: color-mix(in srgb, var(--dq-color-secondary) 35%, var(--dq-color-bg));
}

.dq-table tbody tr[aria-selected="true"]:is(:hover, :nth-child(n)) {
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  font-weight: 700;
}

.dq-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dq-table-wrap {
  padding: 0 var(--dq-shadow-offset) var(--dq-shadow-offset) 0;
  overflow-x: auto;
}

.dq-modal {
  --dq-panel-pad: var(--dq-space-4);
  width: min(100% - 2rem, 32rem);
  max-height: calc(100vh - 4rem);
  padding: var(--dq-panel-pad);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-bg);
  color: var(--dq-color-fg);
  box-shadow: var(--dq-shadow-offset) var(--dq-shadow-offset) 0 var(--dq-shadow-color);
  margin: auto;
  overflow: auto;
}

.dq-modal[open] {
  gap: var(--dq-space-4);
  flex-direction: column;
  display: flex;
}

.dq-modal__actions {
  justify-content: flex-end;
  gap: var(--dq-space-4);
  padding-right: var(--dq-shadow-offset);
  padding-bottom: var(--dq-shadow-offset);
  display: flex;
}

.dq-modal::backdrop {
  --dq-dot-color: color-mix(in srgb, var(--dq-color-primary, #00a) 60%, transparent);
  --dq-dot-radius: 1.5px;
  --dq-dot-tile: 8px;
  background-color: color-mix(in srgb, var(--dq-color-fg, #1a1a1a) 55%, transparent);
}

.dq-tooltip {
  --_gap: var(--dq-space-2);
  display: inline-flex;
  position: relative;
}

.dq-tooltip__text {
  bottom: calc(100% + var(--_gap));
  z-index: 10;
  width: max-content;
  max-width: 16rem;
  padding: var(--dq-space-1) var(--dq-space-3);
  border: var(--dq-border-width) solid var(--dq-color-primary);
  border-radius: var(--dq-radius);
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  font-size: var(--dq-text-sm);
  box-shadow: calc(var(--dq-shadow-offset) / 2) calc(var(--dq-shadow-offset) / 2) 0 var(--dq-shadow-color);
  visibility: hidden;
  opacity: 0;
  font-weight: 600;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.dq-tooltip__text:before {
  content: "";
  height: var(--_gap);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.dq-tooltip:hover .dq-tooltip__text, .dq-tooltip:focus-within .dq-tooltip__text {
  visibility: visible;
  opacity: 1;
}

.dq-tooltip[data-dismissed] .dq-tooltip__text {
  visibility: hidden;
  opacity: 0;
}

.dq-tooltip--bottom .dq-tooltip__text {
  top: calc(100% + var(--_gap));
  bottom: auto;
}

.dq-tooltip--bottom .dq-tooltip__text:before {
  top: auto;
  bottom: 100%;
}

.dq-statusbar {
  border-top: var(--dq-border-width) solid var(--dq-color-primary);
  background: var(--dq-color-secondary);
  color: var(--dq-color-secondary-fg);
  font-size: var(--dq-text-sm);
}

.dq-statusbar__inner {
  gap: var(--dq-space-1) var(--dq-space-6);
  padding-block: var(--dq-space-2);
  flex-wrap: wrap;
  display: flex;
}

.dq-statusbar a {
  color: inherit;
}

.dq-container {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

.dq-stack {
  gap: var(--dq-space-4);
  flex-direction: column;
  display: flex;
}

.dq-row {
  align-items: center;
  gap: var(--dq-space-4);
  display: flex;
}

.dq-stack--lg {
  gap: var(--dq-space-8);
}

.dq-grid {
  grid-template-columns: repeat(auto-fit, minmax(var(--dq-grid-min, 16rem), 1fr));
  gap: var(--dq-space-6);
  display: grid;
}