@charset "utf-8";
/* Qlynic design system · 03 · Components */

/* 01 · Logo lockup */

.ql-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  text-decoration: none;
  color: var(--ql-text-strong);
  line-height: 1;
}

.ql-logo__mark {
  inline-size: auto;
  block-size: 28px;
  aspect-ratio: 428.6 / 500;
  flex: none;
  transition: filter var(--ql-d-slow) var(--ql-ease-out),
              transform var(--ql-d-slow) var(--ql-ease-out);
}
.ql-logo:hover .ql-logo__mark {
  filter: drop-shadow(0 0 14px rgb(var(--ql-accent-rgb) / .40));
  transform: translateY(-1px);
}

.ql-logo__word {
  font-size: var(--ql-fs-lg);
  font-weight: var(--ql-fw-heavy);
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--ql-text-strong);
  text-shadow: 0 1px 0 rgb(var(--ql-black-rgb) / .6);
}
.ql-logo__word small {
  display: block;
  margin-block-start: 3px;
  font-family: var(--ql-font-mono);
  font-size: 9px;
  font-weight: var(--ql-fw-medium);
  letter-spacing: .22em;
  color: var(--ql-text-subtle);
}
.ql-logo--lg .ql-logo__mark { block-size: 52px; }
.ql-logo--lg .ql-logo__word { font-size: var(--ql-fs-2xl); }
.ql-logo--sm .ql-logo__mark { block-size: 22px; }
.ql-logo--sm .ql-logo__word { font-size: var(--ql-fs-md); }

/* 02 · Buttons */

.ql-btn {
  --btn-h: var(--ql-btn-h);
  --btn-px: var(--ql-sp-7);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ql-sp-4);
  block-size: var(--btn-h);
  padding-inline: var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--ql-r-full);
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--ql-d-fast) var(--ql-ease-out),
              box-shadow var(--ql-d-base) var(--ql-ease-out),
              background-color var(--ql-d-fast) var(--ql-ease),
              border-color var(--ql-d-fast) var(--ql-ease),
              color var(--ql-d-fast) var(--ql-ease),
              opacity var(--ql-d-fast) var(--ql-ease);
}

.ql-btn:active { transform: translateY(1px) scale(.994); }
.ql-btn:focus-visible { box-shadow: var(--ql-ring); }
.ql-btn[disabled], .ql-btn[aria-disabled="true"], .ql-btn.is-disabled {
  pointer-events: none;
  opacity: .40;
  filter: saturate(.3);
}
.ql-btn__icon { flex: none; inline-size: 16px; block-size: 16px; }
.ql-btn__icon svg { inline-size: 100%; block-size: 100%; display: block; }

/* Filled: primary, spectral, danger, solid */

.ql-btn--primary,
.ql-btn--spectral,
.ql-btn--danger,
.ql-btn--solid {
  background-color: var(--btn-fill);
  color: var(--btn-ink, var(--ql-text-on-spec));
  font-weight: var(--ql-fw-semibold);

  box-shadow: 0 1px 2px rgb(var(--ql-black-rgb) / .35);
}
.ql-btn--primary:hover,
.ql-btn--spectral:hover,
.ql-btn--danger:hover,
.ql-btn--solid:hover {
  background-color: var(--btn-fill-hi);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px -1px rgb(var(--ql-black-rgb) / .40);
}
.ql-btn--primary:active,
.ql-btn--spectral:active,
.ql-btn--danger:active,
.ql-btn--solid:active {
  background-color: var(--btn-fill);
  transform: translateY(0) scale(.994);
  box-shadow: 0 1px 1px rgb(var(--ql-black-rgb) / .35);
}

.ql-btn--primary {
  --btn-fill:    var(--ql-ink-950);
  --btn-fill-hi: rgb(var(--ql-white-rgb));
  --btn-ink:     var(--ql-ink-050);
  --btn-shadow:  transparent;
}

.ql-btn--primary::after {
  content: "";
  position: absolute;
  inset-inline: 22%;
  inset-block-end: -6px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ql-grad-signature);
  box-shadow: 0 0 10px 1px rgb(var(--ql-accent-text-rgb) / .45);
  opacity: 0;
  transform: scaleX(.2);
  transition: transform .55s var(--ql-ease-out), opacity .35s var(--ql-ease-out);
  pointer-events: none;
}
.ql-btn--primary:hover::after,
.ql-btn--primary:focus-visible::after { opacity: .95; transform: scaleX(1); }

.ql-btn__arrow {
  display: inline-flex;
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  margin-inline-end: -3px;
}
.ql-btn__arrow svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ql-btn__arrow path {
  transform-box: fill-box;
  transition: transform .4s var(--ql-ease-out), opacity .25s var(--ql-ease-out);
}
.ql-btn__arrow .ql-btn__stem { transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.ql-btn:hover .ql-btn__arrow path,
.ql-btn:focus-visible .ql-btn__arrow path { transform: translateX(2px); }
.ql-btn:hover .ql-btn__arrow .ql-btn__stem,
.ql-btn:focus-visible .ql-btn__arrow .ql-btn__stem { transform: translateX(2px) scaleX(1); opacity: 1; }

.ql-btn--spectral {
  --btn-fill:    rgb(var(--ql-accent-rgb) / .18);
  --btn-fill-hi: rgb(var(--ql-accent-rgb) / .28);
  --btn-ink:     var(--ql-accent-text);
  --btn-shadow:  transparent;
}
.ql-btn--danger {
  --btn-fill:    var(--ql-danger-fill);
  --btn-fill-hi: var(--ql-danger-fill-hi);
  --btn-ink:     var(--ql-text-strong);
  --btn-shadow:  rgb(var(--ql-danger-rgb) / .40);
}
.ql-btn--danger:focus-visible { box-shadow: var(--ql-ring-danger); }

.ql-btn--solid {
  --btn-fill:    var(--ql-accent);
  --btn-fill-hi: var(--ql-accent-hi);
  --btn-ink:     var(--ql-ink-950);
  --btn-shadow:  rgb(var(--ql-accent-rgb) / .45);
}

.ql-btn--secondary {
  color: var(--ql-text);
  background-color: var(--ql-surface-2);
}
.ql-btn--secondary:hover {
  color: var(--ql-text-strong);
  background-color: var(--ql-surface-3);
  transform: translateY(-1px);
}

.ql-btn--ghost { color: var(--ql-text-muted); background: transparent; }
.ql-btn--ghost:hover {
  color: var(--ql-text-strong);
  background-color: rgb(var(--ql-white-rgb) / .06);
}

.ql-btn--outline {
  color: var(--ql-text-strong);
  background-color: rgb(var(--ql-white-rgb) / .035);
  border-color: rgb(var(--ql-white-rgb) / .17);
}
.ql-btn--outline:hover {
  color: var(--ql-text-strong);
  border-color: rgb(var(--ql-white-rgb) / .32);
  background-color: rgb(var(--ql-white-rgb) / .075);
  transform: translateY(-1px);
}

.ql-btn--sm { --btn-h: var(--ql-btn-h-sm); --btn-px: var(--ql-sp-6); font-size: var(--ql-fs-xs); }
.ql-btn--lg { --btn-h: var(--ql-btn-h-lg); --btn-px: var(--ql-sp-9); font-size: var(--ql-fs-md); }
.ql-btn--block { inline-size: 100%; }
.ql-btn--icon { --btn-px: 0; inline-size: var(--btn-h); }

.ql-btn--sharp { border-radius: var(--ql-r-sm); }

.ql-btn.is-loading { pointer-events: none; color: transparent !important; }
.ql-btn.is-loading::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 17px; block-size: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  border: 2px solid rgb(var(--ql-white-rgb) / .18);
  border-block-start-color: var(--ql-text-strong);
  animation: ql-spin .62s linear infinite;
  z-index: 3;
}
.ql-btn--primary.is-loading::before,
.ql-btn--spectral.is-loading::before,
.ql-btn--danger.is-loading::before,
.ql-btn--solid.is-loading::before {
  border-color: rgb(var(--ql-black-rgb)/.22);
  border-block-start-color: var(--btn-ink, var(--ql-text-on-spec));
}
@keyframes ql-spin { to { transform: rotate(360deg); } }

.ql-btn-group { display: inline-flex; }
.ql-btn-group .ql-btn { border-radius: 0; }
.ql-btn-group .ql-btn:first-child { border-start-start-radius: var(--ql-r-full); border-end-start-radius: var(--ql-r-full); padding-inline-start: var(--ql-sp-8); }
.ql-btn-group .ql-btn:last-child  { border-start-end-radius: var(--ql-r-full);  border-end-end-radius: var(--ql-r-full);  padding-inline-end: var(--ql-sp-8); }
.ql-btn-group .ql-btn:only-child  { border-radius: var(--ql-r-full); }
.ql-btn-group .ql-btn + .ql-btn { margin-inline-start: 1px; }

/* 03 · Badge · Chip · Kbd */

.ql-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-3);
  block-size: 22px;
  padding-inline: var(--ql-sp-4);
  border-radius: var(--ql-r-xs);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  letter-spacing: .045em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: rgb(var(--ql-white-rgb) / .06);
  color: var(--ql-text-muted);
  border: 1px solid rgb(var(--ql-white-rgb) / .07);
}
.ql-badge--spec    { background: rgb(var(--ql-accent-rgb)/.11);    color: var(--ql-accent-text);  border-color: rgb(var(--ql-accent-rgb)/.26); }
.ql-badge--violet  { background: rgb(var(--ql-accent-rgb)/.13);  color: var(--ql-accent-text);border-color: rgb(var(--ql-accent-rgb)/.28); }
.ql-badge--success { background: rgb(var(--ql-success-rgb)/.11); color: var(--ql-success);      border-color: rgb(var(--ql-success-rgb)/.26); }
.ql-badge--warning { background: rgb(var(--ql-warning-rgb)/.11); color: var(--ql-warning);      border-color: rgb(var(--ql-warning-rgb)/.26); }
.ql-badge--danger  { background: rgb(var(--ql-danger-rgb)/.11);  color: var(--ql-danger);       border-color: rgb(var(--ql-danger-rgb)/.26); }

.ql-badge--solid {
  color: var(--ql-accent-text);
  font-weight: var(--ql-fw-bold);
  border-color: transparent;
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-100)) padding-box,
    linear-gradient(var(--ql-axis-grad),
      rgb(var(--ql-accent-rgb)/.85), rgb(var(--ql-accent-rgb)/.40) 48%,
      rgb(var(--ql-accent-rgb)/.75)) border-box;
  box-shadow: 0 4px 16px -8px rgb(var(--ql-accent-rgb)/.55);
}

.ql-dot {
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ql-dot--live { position: relative; }
.ql-dot--live::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: ql-ping 1.9s var(--ql-ease-out) infinite;
}
@keyframes ql-ping {
  0%   { transform: scale(.7); opacity: .9; }
  80%, 100% { transform: scale(2.1); opacity: 0; }
}

.ql-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-4);
  block-size: 32px;
  padding-inline: var(--ql-sp-5);
  border-radius: var(--ql-r-full);
  font-size: var(--ql-fs-xs);
  font-weight: var(--ql-fw-medium);
  color: var(--ql-text-body);
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge-quiet) border-box;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--ql-t-color), transform var(--ql-d-fast) var(--ql-ease-out);
}
.ql-chip:hover { color: var(--ql-text-strong); transform: translateY(-1px); }
.ql-chip[aria-pressed="true"], .ql-chip.is-active {
  color: var(--ql-accent-text);
  background:
    linear-gradient(rgb(var(--ql-accent-rgb)/.13), rgb(var(--ql-accent-rgb)/.13)) padding-box,
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge-hi) border-box;
}
.ql-chip__x {
  position: relative;
  inline-size: 15px; block-size: 15px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(var(--ql-white-rgb)/.1);
  font-size: 10px; line-height: 1;
  transition: background var(--ql-d-fast) var(--ql-ease);
}

.ql-chip__x::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.ql-chip__x:hover { background: rgb(var(--ql-danger-rgb)/.5); }

kbd, .ql-kbd {
  display: inline-block;
  min-inline-size: 22px;
  padding: 3px 6px;
  border-radius: var(--ql-r-xs);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1.2;
  text-align: center;
  color: var(--ql-text-muted);
  background: var(--ql-ink-200);
  border: 1px solid var(--ql-ink-300);
  box-shadow: 0 2px 0 var(--ql-ink-300), inset 0 1px 0 rgb(var(--ql-white-rgb)/.05);
}

/* 04 · Avatar */

.ql-avatar {
  position: relative;
  inline-size: 40px; block-size: 40px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-bold);
  letter-spacing: .02em;

  color: #fff;
  background: var(--ql-grad-carry);
  box-shadow: 0 0 0 1px rgb(var(--ql-white-rgb)/.08);
}
.ql-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ql-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--ql-fs-3xs); }
.ql-avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--ql-fs-lg); }
.ql-avatar-stack { display: flex; }
.ql-avatar-stack .ql-avatar + .ql-avatar { margin-inline-start: -12px; }
.ql-avatar-stack .ql-avatar { box-shadow: 0 0 0 2px var(--ql-bg); }

/* 05 · Card */

.ql-card {
  position: relative;
  border-radius: var(--ql-r-lg);
  padding: var(--ql-sp-8);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-surface), var(--ql-surface)) padding-box,
    var(--ql-edge) border-box;
  box-shadow: var(--ql-el-1);
  transition: var(--ql-t-lift), background var(--ql-d-base) var(--ql-ease);
}
.ql-card::before {
  content: "";
  position: absolute;
  inset-inline: 14%;
  inset-block-start: 0;
  block-size: 1px;
  background: var(--ql-grad-hair);
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--ql-d-base) var(--ql-ease);
}
.ql-card--lg  { padding: var(--ql-sp-11); border-radius: var(--ql-r-xl); }
.ql-card--sm  { padding: var(--ql-sp-6); border-radius: var(--ql-r-md); }
.ql-card--flat{ box-shadow: none; background: linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box, var(--ql-edge-quiet) border-box; }

.ql-card--interactive { cursor: pointer; }
.ql-card--interactive::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--ql-mx, 50%) var(--ql-my, 0%),
              rgb(var(--ql-accent-rgb) / .09), transparent 62%);
  transition: opacity var(--ql-d-slow) var(--ql-ease-out);
}
.ql-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--ql-el-3);
  background:
    linear-gradient(var(--ql-surface-2), var(--ql-surface-2)) padding-box,
    var(--ql-edge-hi) border-box;
}
.ql-card--interactive:hover::after  { opacity: 1; }
.ql-card--interactive:hover::before { opacity: 1; }
.ql-card--interactive:focus-within  { box-shadow: var(--ql-ring); }

.ql-card__eyebrow { margin-block-end: var(--ql-sp-5); }
.ql-card__title { font-size: var(--ql-fs-lg); font-weight: var(--ql-fw-bold); letter-spacing: var(--ql-tr-lead); color: var(--ql-text-strong); }
.ql-card__body  { margin-block-start: var(--ql-sp-4); color: var(--ql-text-muted); font-size: var(--ql-fs-sm); line-height: 1.62; }
.ql-card__foot  { margin-block-start: var(--ql-sp-7); padding-block-start: var(--ql-sp-6); border-block-start: 1px solid var(--ql-line); }

.ql-glass {
  background: rgb(25 25 27 / .72);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgb(var(--ql-white-rgb) / .085);
}
@supports not (backdrop-filter: blur(1px)) { .ql-glass { background: var(--ql-ink-150); } }

/* 06 · Field shell */

.ql-field { display: flex; flex-direction: column; gap: var(--ql-sp-4); min-inline-size: 0; }
.ql-field--row { flex-direction: row; align-items: center; gap: var(--ql-sp-5); }

.ql-label {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-3);
  font-size: var(--ql-fs-xs);
  font-weight: var(--ql-fw-semibold);
  letter-spacing: var(--ql-tr-tiny);
  color: var(--ql-text-muted);
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-field:focus-within > .ql-label { color: var(--ql-accent-text); }
.ql-label__req { color: var(--ql-danger); font-size: var(--ql-fs-sm); line-height: 1; }
.ql-label__opt { margin-inline-start: auto; font-weight: var(--ql-fw-regular); color: var(--ql-text-subtle); }

.ql-help {
  display: flex;
  align-items: flex-start;
  gap: var(--ql-sp-3);
  font-size: var(--ql-fs-xs);
  line-height: 1.5;
  color: var(--ql-text-subtle);
}
.ql-error {
  display: flex;
  align-items: flex-start;
  gap: var(--ql-sp-3);
  font-size: var(--ql-fs-xs);
  line-height: 1.5;
  color: var(--ql-danger);
  animation: ql-slip var(--ql-d-base) var(--ql-ease-out);
}
@keyframes ql-slip { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 07 · Text controls */

.ql-input, .ql-textarea, .ql-select__trigger, .ql-native-select {
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--ql-control-h);
  padding-inline: var(--ql-sp-6);
  border: 1px solid transparent;
  border-radius: var(--ql-r-sm);
  background:
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box,
    var(--ql-edge-quiet) border-box;
  color: var(--ql-text-strong);
  font-size: var(--ql-fs-sm);
  font-family: inherit;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--ql-d-base) var(--ql-ease),
              box-shadow var(--ql-d-base) var(--ql-ease-out),
              color var(--ql-d-fast) var(--ql-ease);
}
.ql-textarea {
  block-size: auto;
  min-block-size: 118px;
  padding-block: var(--ql-sp-5);
  line-height: var(--ql-lh-body);
  resize: vertical;
}
.ql-input::placeholder, .ql-textarea::placeholder { color: var(--ql-text-subtle); opacity: 1; }

.ql-input:hover, .ql-textarea:hover, .ql-select__trigger:hover, .ql-native-select:hover {
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge) border-box;
}
.ql-input:focus, .ql-textarea:focus, .ql-native-select:focus,
.ql-select__trigger:focus-visible, .ql-select.is-open .ql-select__trigger {
  outline: none;
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge-hi) border-box;
  box-shadow: 0 0 0 3px rgb(var(--ql-accent-rgb) / .14),
              0 6px 26px -10px rgb(var(--ql-accent-rgb) / .40);
}
.ql-input:disabled, .ql-textarea:disabled, .ql-native-select:disabled {
  color: var(--ql-text-disabled);
  cursor: not-allowed;
  background: linear-gradient(var(--ql-ink-050), var(--ql-ink-050)) padding-box,
              linear-gradient(var(--ql-ink-200), var(--ql-ink-200)) border-box;
}
.ql-input[readonly] { color: var(--ql-text-muted); }

.ql-input--lg, .ql-select--lg .ql-select__trigger { block-size: var(--ql-control-h-lg); font-size: var(--ql-fs-md); border-radius: var(--ql-r-md); padding-inline: var(--ql-sp-7); }
.ql-input--sm, .ql-select--sm .ql-select__trigger { block-size: var(--ql-control-h-sm); font-size: var(--ql-fs-xs); border-radius: var(--ql-r-xs); padding-inline: var(--ql-sp-5); }

.ql-input.is-invalid, .ql-textarea.is-invalid, .ql-input[aria-invalid="true"],
.ql-select.is-invalid .ql-select__trigger {
  background:
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box,
    linear-gradient(var(--ql-axis-grad), rgb(var(--ql-danger-rgb)/.75), rgb(var(--ql-danger-rgb)/.35)) border-box;
  box-shadow: 0 0 0 3px rgb(var(--ql-danger-rgb) / .12);
}
.ql-input.is-valid, .ql-textarea.is-valid {
  background:
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box,
    linear-gradient(var(--ql-axis-grad), rgb(var(--ql-success-rgb)/.65), rgb(var(--ql-success-rgb)/.28)) border-box;
}

.ql-input-wrap { position: relative; display: block; min-inline-size: 0; }
.ql-input-wrap::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ql-grad-sweep);
  transform: translateX(-50%);
  transition: inline-size var(--ql-d-slow) var(--ql-ease-out);
  pointer-events: none;
}
.ql-input-wrap:focus-within::after { inline-size: calc(100% - 18px); }

.ql-input-wrap--icon .ql-input { padding-inline-start: 42px; }
.ql-input-wrap--suffix .ql-input { padding-inline-end: 42px; }
.ql-input-affix {
  position: absolute;
  inset-block: 0;
  display: grid;
  place-items: center;
  inline-size: 42px;
  color: var(--ql-text-subtle);
  pointer-events: none;
  transition: color var(--ql-d-fast) var(--ql-ease);
  z-index: 2;
}
.ql-input-affix svg { inline-size: 16px; block-size: 16px; }
.ql-input-affix--start { inset-inline-start: 0; }
.ql-input-affix--end   { inset-inline-end: 0; pointer-events: auto; }
.ql-input-wrap:focus-within .ql-input-affix--start { color: var(--ql-accent-text); }

.ql-float { position: relative; display: block; min-inline-size: 0; }
.ql-float > .ql-input, .ql-float > .ql-textarea { padding-block-start: 21px; padding-block-end: 7px; }
.ql-float > .ql-input { block-size: 58px; }
.ql-float > .ql-textarea { min-block-size: 128px; }
.ql-float > label {
  position: absolute;
  inset-inline-start: var(--ql-sp-6);
  inset-block-start: 18px;
  font-size: var(--ql-fs-sm);
  color: var(--ql-text-subtle);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--ql-d-base) var(--ql-ease-out),
              color var(--ql-d-base) var(--ql-ease);
  z-index: 2;
}
.ql-float > .ql-input:focus + label,
.ql-float > .ql-input:not(:placeholder-shown) + label,
.ql-float > .ql-textarea:focus + label,
.ql-float > .ql-textarea:not(:placeholder-shown) + label {
  transform: translateY(-11px) scale(.78);
  color: var(--ql-accent-text);
}
.ql-float > .ql-input:not(:focus):not(:placeholder-shown) + label { color: var(--ql-text-subtle); }

.ql-counter { font-family: var(--ql-font-mono); font-size: var(--ql-fs-3xs); color: var(--ql-text-subtle); margin-inline-start: auto; }
.ql-counter.is-over { color: var(--ql-danger); }

.ql-strength { display: flex; gap: 4px; margin-block-start: var(--ql-sp-3); }
.ql-strength__seg {
  block-size: 3px; flex: 1;
  border-radius: 2px;
  background: var(--ql-ink-300);
  transition: background var(--ql-d-slow) var(--ql-ease-out);
}
.ql-strength[data-score="1"] .ql-strength__seg:nth-child(-n+1) { background: var(--ql-danger); }
.ql-strength[data-score="2"] .ql-strength__seg:nth-child(-n+2) { background: var(--ql-warning); }
.ql-strength[data-score="3"] .ql-strength__seg:nth-child(-n+3) { background: var(--ql-accent); }
.ql-strength[data-score="4"] .ql-strength__seg { background: var(--ql-success); }

.ql-otp { display: flex; gap: var(--ql-sp-4); }
.ql-otp input {
  inline-size: 48px; block-size: 58px;
  text-align: center;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-xl);
  font-weight: var(--ql-fw-semibold);
  padding-inline: 0;
}
@media (max-width: 479px) { .ql-otp input { inline-size: 40px; block-size: 50px; font-size: var(--ql-fs-lg); } .ql-otp { gap: var(--ql-sp-3); } }

.ql-drop {
  display: grid;
  place-items: center;
  gap: var(--ql-sp-4);
  padding: var(--ql-sp-11) var(--ql-sp-8);
  text-align: center;
  border-radius: var(--ql-r-md);
  border: 1px dashed var(--ql-ink-400);
  background: var(--ql-ink-100);
  color: var(--ql-text-muted);
  cursor: pointer;
  transition: var(--ql-t-color), border-color var(--ql-d-base) var(--ql-ease);
}
.ql-drop:hover, .ql-drop.is-over {
  border-color: var(--ql-accent-text);
  background: rgb(var(--ql-accent-rgb) / .06);
  color: var(--ql-text-strong);
}
.ql-drop.is-over { border-style: solid; box-shadow: 0 0 0 3px rgb(var(--ql-accent-rgb)/.12); }
.ql-drop__icon { inline-size: 30px; block-size: 30px; color: var(--ql-accent-text); }

.ql-range {
  inline-size: 100%;
  block-size: 28px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.ql-range::-webkit-slider-runnable-track {
  block-size: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ql-accent-text) 0%, var(--ql-accent) var(--ql-range-pct, 50%), var(--ql-ink-300) var(--ql-range-pct, 50%));
}
.ql-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ql-ink-300); }
.ql-range::-moz-range-progress { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ql-accent-text), var(--ql-accent)); }
.ql-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  inline-size: 16px; block-size: 16px;
  margin-block-start: -6px;
  border-radius: 50%;
  background: var(--ql-ink-950);
  border: 0;
  box-shadow: 0 0 0 1px rgb(var(--ql-black-rgb)/.4), 0 2px 8px rgb(var(--ql-black-rgb)/.6);
  transition: transform var(--ql-d-fast) var(--ql-ease-spring), box-shadow var(--ql-d-fast) var(--ql-ease);
}
.ql-range::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: var(--ql-ink-950);
  box-shadow: 0 0 0 1px rgb(0 0 0 /.4), 0 2px 8px rgb(0 0 0 /.6);
}
.ql-range:hover::-webkit-slider-thumb { transform: scale(1.18); }
.ql-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(var(--ql-accent-rgb)/.35); }

/* 08 · Choice controls */

.ql-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ql-sp-5);
  min-block-size: var(--ql-sp-8);
  cursor: pointer;
  font-size: var(--ql-fs-sm);
  line-height: 1.45;
  color: var(--ql-text-body);
  user-select: none;
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-check:hover { color: var(--ql-text-strong); }
.ql-check input {
  position: absolute;
  inline-size: 20px; block-size: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ql-check__box {
  position: relative;
  flex: none;
  inline-size: 20px; block-size: 20px;
  margin-block-start: 1px;
  border-radius: var(--ql-r-xs);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge-quiet) border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background var(--ql-d-base) var(--ql-ease),
              transform var(--ql-d-slow) var(--ql-ease-spring),
              box-shadow var(--ql-d-base) var(--ql-ease);
}
.ql-check:hover .ql-check__box {
  background: linear-gradient(var(--ql-ink-200), var(--ql-ink-200)) padding-box, var(--ql-edge) border-box;
}
.ql-check__box svg {
  inline-size: 13px; block-size: 13px;
  color: var(--ql-text-on-spec);
  position: relative; z-index: 2;
}
.ql-check__box svg path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset var(--ql-d-slow) var(--ql-ease-out) 40ms;
}
.ql-check input:checked ~ .ql-check__box {
  background: var(--ql-grad-carry) padding-box, var(--ql-grad-carry) border-box;
  transform: scale(1.06);
  box-shadow: 0 4px 16px -4px rgb(var(--ql-accent-rgb)/.55);
}
.ql-check input:checked ~ .ql-check__box svg path { stroke-dashoffset: 0; }
.ql-check input:indeterminate ~ .ql-check__box {
  background: var(--ql-grad-carry) padding-box, var(--ql-grad-carry) border-box;
}
.ql-check input:indeterminate ~ .ql-check__box::after {
  content: ""; inline-size: 9px; block-size: 2px; border-radius: 1px;
  background: var(--ql-text-on-spec); position: absolute; z-index: 2;
}
.ql-check input:focus-visible ~ .ql-check__box { box-shadow: var(--ql-ring); }
.ql-check input:disabled ~ .ql-check__box { opacity: .4; }
.ql-check:has(input:disabled) { cursor: not-allowed; color: var(--ql-text-disabled); }
.ql-check__text small { display: block; color: var(--ql-text-subtle); font-size: var(--ql-fs-xs); margin-block-start: 2px; }

.ql-radio { }
.ql-radio .ql-check__box { border-radius: 50%; }
.ql-radio .ql-check__box::before {
  content: "";
  inline-size: 20px; block-size: 20px;
  border-radius: 50%;
  background: var(--ql-grad-carry);
  transform: scale(0);
  transition: transform var(--ql-d-slow) var(--ql-ease-spring);
  position: absolute;
}
.ql-radio .ql-check__box::after {
  content: "";
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: var(--ql-text-on-spec);
  transform: scale(0);
  transition: transform var(--ql-d-slow) var(--ql-ease-spring) 60ms;
  position: relative; z-index: 2;
}
.ql-radio input:checked ~ .ql-check__box { transform: none; box-shadow: 0 4px 16px -4px rgb(var(--ql-accent-rgb)/.5); }
.ql-radio input:checked ~ .ql-check__box::before { transform: scale(1); }
.ql-radio input:checked ~ .ql-check__box::after  { transform: scale(1); }

.ql-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ql-sp-5);
  padding: var(--ql-sp-6);
  border-radius: var(--ql-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box,
    var(--ql-edge-quiet) border-box;
  cursor: pointer;
  transition: background var(--ql-d-base) var(--ql-ease), transform var(--ql-d-fast) var(--ql-ease-out);
}
.ql-choice:hover { transform: translateY(-1px);
  background: linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box, var(--ql-edge) border-box; }
.ql-choice:has(input:checked) {
  background:
    linear-gradient(rgb(var(--ql-accent-rgb)/.10), rgb(var(--ql-accent-rgb)/.10)) padding-box,
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge-hi) border-box;
  box-shadow: 0 8px 28px -14px rgb(var(--ql-accent-rgb)/.6);
}
.ql-choice:has(input:focus-visible) { box-shadow: var(--ql-ring); }

.ql-switch { display: inline-flex; align-items: center; gap: var(--ql-sp-5); cursor: pointer; font-size: var(--ql-fs-sm); color: var(--ql-text-body); user-select: none; }
.ql-switch input { position: absolute; opacity: 0; inline-size: 46px; block-size: 26px; margin: 0; cursor: pointer; }

.ql-switch__note { display: block; margin-block-start: 3px; font-size: var(--ql-fs-xs); line-height: 1.5; color: var(--ql-text-subtle); }
.ql-switch__track {
  position: relative;
  flex: none;
  inline-size: 46px; block-size: 26px;
  border-radius: var(--ql-r-full);
  background: var(--ql-ink-300);
  box-shadow: inset 0 1px 3px rgb(var(--ql-black-rgb)/.55);
  transition: background var(--ql-d-base) var(--ql-ease);
}
.ql-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 20px; block-size: 20px;
  border-radius: 50%;
  background: var(--ql-ink-800);
  box-shadow: 0 2px 6px rgb(var(--ql-black-rgb)/.5);
  transition: transform var(--ql-d-slow) var(--ql-ease-spring),
              background var(--ql-d-base) var(--ql-ease),
              inline-size var(--ql-d-fast) var(--ql-ease);
}
.ql-switch input:checked ~ .ql-switch__track { background: var(--ql-grad-sweep); box-shadow: 0 0 18px -4px rgb(var(--ql-accent-rgb)/.6); }
.ql-switch input:checked ~ .ql-switch__track::after { transform: translateX(20px); background: #fff; }
.ql-switch:active .ql-switch__track::after { inline-size: 25px; }
.ql-switch input:focus-visible ~ .ql-switch__track { box-shadow: var(--ql-ring); }
.ql-switch input:disabled ~ .ql-switch__track { opacity: .4; }

.ql-seg {
  position: relative;
  display: inline-flex;
  max-inline-size: 100%;
  padding: 4px;
  gap: 2px;
  border-radius: var(--ql-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box,
    var(--ql-edge-quiet) border-box;
}
.ql-seg__thumb {
  position: absolute;
  inset-block: 4px;
  border-radius: var(--ql-r-xs);
  background: var(--ql-ink-300);
  box-shadow: var(--ql-el-1), inset 0 1px 0 rgb(var(--ql-white-rgb)/.06);
  transition: transform var(--ql-d-slow) var(--ql-ease-out),
              inline-size var(--ql-d-slow) var(--ql-ease-out);
  pointer-events: none;
  z-index: 0;
}
.ql-seg__thumb::before {
  content: ""; position: absolute; inset-inline: 20%; inset-block-start: 0; block-size: 1px;
  background: var(--ql-grad-hair);
}
.ql-seg button {
  position: relative;
  z-index: 1;
  block-size: 32px;
  min-inline-size: 0;
  padding-inline: var(--ql-sp-6);
  border-radius: var(--ql-r-xs);
  font-size: var(--ql-fs-xs);
  font-weight: var(--ql-fw-semibold);
  color: var(--ql-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--ql-d-fast) var(--ql-ease);
}
@media (max-width: 479px) { .ql-seg button { padding-inline: var(--ql-sp-4); } }
.ql-seg button:hover { color: var(--ql-text-body); }
.ql-seg button[aria-selected="true"], .ql-seg button.is-active { color: var(--ql-text-strong); }

/* 09 · Select */

.ql-select { position: relative; display: block; min-inline-size: 0; }
.ql-select__native {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.ql-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-5);
  text-align: start;
  cursor: pointer;
}
.ql-select__value { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-select__value.is-placeholder { color: var(--ql-text-subtle); }
.ql-select__caret {
  flex: none;
  inline-size: 16px; block-size: 16px;
  color: var(--ql-text-subtle);
  transition: transform var(--ql-d-slow) var(--ql-ease-out), color var(--ql-d-fast) var(--ql-ease);
}
.ql-select.is-open .ql-select__caret { transform: rotate(180deg); color: var(--ql-accent-text); }

.ql-select__panel {
  position: absolute;
  z-index: var(--ql-z-popover);
  inset-inline: 0;
  inset-block-start: calc(100% + 8px);
  padding: 6px;
  border-radius: var(--ql-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge) border-box;
  box-shadow: var(--ql-el-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) skewX(-4deg) scale(.97);
  transform-origin: 50% 0;
  filter: blur(3px);
  transition: opacity var(--ql-d-base) var(--ql-ease-out),
              transform var(--ql-d-slow) var(--ql-ease-out),
              filter var(--ql-d-base) var(--ql-ease-out),
              visibility 0s linear var(--ql-d-slow);
}
.ql-select.is-open .ql-select__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition-delay: 0s;
}
.ql-select.is-up .ql-select__panel {
  inset-block-start: auto;
  inset-block-end: calc(100% + 8px);
  transform-origin: 50% 100%;
  transform: translateY(8px) skewX(-4deg) scale(.97);
}
.ql-select.is-up.is-open .ql-select__panel { transform: none; }

.ql-select__search {
  inline-size: 100%;
  block-size: 36px;
  margin-block-end: 6px;
  padding-inline: var(--ql-sp-5);
  border: 0;
  border-block-end: 1px solid var(--ql-line);
  border-radius: var(--ql-r-xs) var(--ql-r-xs) 0 0;
  background: transparent;
  color: var(--ql-text-strong);
  font-size: var(--ql-fs-sm);
}

.ql-select__search:focus,
.ql-select__search:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 0 var(--ql-accent-text);
  border-block-end-color: var(--ql-accent-text);
}

.ql-select__opt.is-blank { color: var(--ql-text-subtle); }
.ql-select__opt.is-blank[aria-selected="true"] { color: var(--ql-text-subtle); font-weight: var(--ql-fw-regular); }
.ql-select__opt.is-blank::after { display: none; }

.ql-select__list { max-block-size: 264px; overflow-y: auto; margin: 0; padding: 0; list-style: none; overscroll-behavior: contain; }
.ql-select__group {
  padding: var(--ql-sp-5) var(--ql-sp-5) var(--ql-sp-3);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: var(--ql-tr-micro);
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-select__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ql-sp-5);
  min-block-size: 38px;
  padding: var(--ql-sp-3) var(--ql-sp-5);
  border-radius: var(--ql-r-xs);
  font-size: var(--ql-fs-sm);
  color: var(--ql-text-body);
  cursor: pointer;
  transition: background var(--ql-d-instant) var(--ql-ease), color var(--ql-d-instant) var(--ql-ease);
}
.ql-select__opt::before {
  content: "";
  position: absolute;
  inset-block: 7px;
  inset-inline-start: 0;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--ql-grad-axis);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform var(--ql-d-base) var(--ql-ease-out);
}
.ql-select__opt.is-active { background: rgb(var(--ql-white-rgb) / .055); color: var(--ql-text-strong); }
.ql-select__opt.is-active::before { transform: scaleY(1); }
.ql-select__opt[aria-selected="true"] { color: var(--ql-accent-text); font-weight: var(--ql-fw-semibold); }
.ql-select__opt[aria-selected="true"]::after {
  content: "";
  inline-size: 14px; block-size: 8px;
  margin-inline-start: auto;
  flex: none;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}
.ql-select__opt[aria-disabled="true"] { color: var(--ql-text-disabled); cursor: not-allowed; }
.ql-select__opt small { display: block; font-size: var(--ql-fs-3xs); color: var(--ql-text-subtle); }
.ql-select__empty { padding: var(--ql-sp-7); text-align: center; color: var(--ql-text-subtle); font-size: var(--ql-fs-xs); }

.ql-native-select {
  padding-inline-end: 38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238E9598' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)),
    var(--ql-edge-quiet);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right var(--ql-sp-6) center, 0 0, 0 0;
  background-size: 12px 8px, auto, auto;
  cursor: pointer;
}

.ql-native-select:hover, .ql-native-select:focus {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2367E8F9' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)),
    var(--ql-edge-hi);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right var(--ql-sp-6) center, 0 0, 0 0;
  background-size: 12px 8px, auto, auto;
}
.ql-native-select option { background: #19191B; color: #DDE1E3; }
.ql-native-select optgroup { background: #131214; color: #8E9598; font-style: normal; }

/* 10 · Tooltip · Popover */

.ql-tip {
  position: fixed;
  z-index: var(--ql-z-tooltip);
  max-inline-size: 264px;
  padding: var(--ql-sp-4) var(--ql-sp-5);
  border-radius: var(--ql-r-sm);
  background: var(--ql-ink-300);
  color: var(--ql-ink-950);
  font-size: var(--ql-fs-xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1.45;
  letter-spacing: var(--ql-tr-tiny);
  box-shadow: var(--ql-el-3), 0 0 0 1px rgb(var(--ql-white-rgb)/.07);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, var(--ql-tip-from-y, 4px), 0) scale(.96);
  transition: opacity var(--ql-d-fast) var(--ql-ease-out),
              transform var(--ql-d-base) var(--ql-ease-out);
  text-wrap: pretty;
}
.ql-tip.is-in { opacity: 1; transform: none; }
.ql-tip__arrow {
  position: absolute;
  inline-size: 8px; block-size: 8px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 1px;
}
.ql-tip--rich { max-inline-size: 320px; padding: var(--ql-sp-6); text-align: start; }
.ql-tip--rich b { display: block; color: #fff; margin-block-end: 2px; font-size: var(--ql-fs-sm); }
.ql-tip--spec { background: linear-gradient(var(--ql-axis-grad), var(--ql-accent), var(--ql-accent)); color: #fff; }

.ql-popover {
  position: fixed;
  z-index: var(--ql-z-popover);
  min-inline-size: 220px;
  max-inline-size: 360px;
  padding: var(--ql-sp-6);
  border-radius: var(--ql-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge) border-box;
  box-shadow: var(--ql-el-4);
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(.98);
  transition: opacity var(--ql-d-base) var(--ql-ease-out), transform var(--ql-d-slow) var(--ql-ease-out);
}
.ql-popover.is-in { opacity: 1; transform: none; }

/* 11 · Modal · Drawer */

.ql-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--ql-z-backdrop);
  background: rgb(var(--ql-black-rgb) / .72);
  -webkit-backdrop-filter: blur(6px) saturate(80%);
  backdrop-filter: blur(6px) saturate(80%);
  opacity: 0;
  transition: opacity var(--ql-d-base) var(--ql-ease);
}
.ql-backdrop.is-in { opacity: 1; }

.ql-modal {
  position: fixed;
  z-index: var(--ql-z-modal);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: min(560px, calc(100vw - 32px));
  max-block-size: min(88svh, 900px);
  display: flex;
  flex-direction: column;
  border-radius: var(--ql-r-xl);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge) border-box;
  box-shadow: var(--ql-el-5);
  opacity: 0;
  transform: translate(-50%, -46%) scale(.96);
  transition: opacity var(--ql-d-base) var(--ql-ease-out), transform var(--ql-d-slow) var(--ql-ease-out);
  overflow: hidden;
}
.ql-modal.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ql-modal::before {
  content: ""; position: absolute; inset-inline: 18%; inset-block-start: 0; block-size: 1px;
  background: var(--ql-grad-hair); pointer-events: none;
}
.ql-modal--lg { inline-size: min(820px, calc(100vw - 32px)); }
.ql-modal__head { padding: var(--ql-sp-8) var(--ql-sp-8) var(--ql-sp-6); display: flex; align-items: flex-start; gap: var(--ql-sp-6); }
.ql-modal__title { font-size: var(--ql-fs-xl); font-weight: var(--ql-fw-bold); letter-spacing: var(--ql-tr-lead); color: var(--ql-text-strong); }
.ql-modal__sub { margin-block-start: var(--ql-sp-3); color: var(--ql-text-muted); font-size: var(--ql-fs-sm); }
.ql-modal__body { padding: 0 var(--ql-sp-8) var(--ql-sp-8); overflow-y: auto; flex: 1 1 auto; }
.ql-modal__foot {
  display: flex; justify-content: flex-end; gap: var(--ql-sp-5);
  padding: var(--ql-sp-6) var(--ql-sp-8);
  border-block-start: 1px solid var(--ql-line);
  background: rgb(var(--ql-black-rgb)/.2);
}
.ql-modal__x {
  margin-inline-start: auto; flex: none;
  inline-size: 32px; block-size: 32px;
  display: grid; place-items: center;
  border-radius: var(--ql-r-xs);
  color: var(--ql-text-subtle);
  transition: var(--ql-t-color);
}
.ql-modal__x:hover { background: rgb(var(--ql-white-rgb)/.07); color: var(--ql-text-strong); }
@media (max-width: 639px) {
  .ql-modal__head, .ql-modal__body, .ql-modal__foot { padding-inline: var(--ql-sp-6); }
  .ql-modal__foot { flex-direction: column-reverse; }
  .ql-modal__foot .ql-btn { inline-size: 100%; }
}

.ql-drawer {
  position: fixed;
  z-index: var(--ql-z-modal);
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--ql-ink-100);
  border-inline-start: 1px solid var(--ql-line-strong);
  box-shadow: var(--ql-el-5);
  transform: translateX(100%);
  transition: transform var(--ql-d-slow) var(--ql-ease-out);
}
.ql-drawer.is-in { transform: none; }

/* 12 · Toast · Alert · Empty */

.ql-toast-region {
  position: fixed;
  z-index: var(--ql-z-toast);
  inset-block-end: var(--ql-sp-8);
  inset-inline-end: var(--ql-sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--ql-sp-5);
  pointer-events: none;
  max-inline-size: min(400px, calc(100vw - 32px));
}
@media (max-width: 639px) { .ql-toast-region { inset-inline: var(--ql-sp-6); inset-block-end: var(--ql-sp-6); max-inline-size: none; } }

.ql-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ql-sp-5);
  padding: var(--ql-sp-6);
  border-radius: var(--ql-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-200), var(--ql-ink-200)) padding-box,
    var(--ql-edge) border-box;
  box-shadow: var(--ql-el-4);
  pointer-events: auto;
  overflow: hidden;
  opacity: 0;
  transform: translateX(24px) scale(.97);
  transition: opacity var(--ql-d-base) var(--ql-ease-out),
              transform var(--ql-d-slow) var(--ql-ease-out),
              margin var(--ql-d-slow) var(--ql-ease-out);
}
.ql-toast.is-in { opacity: 1; transform: none; }
.ql-toast.is-out { opacity: 0; transform: translateX(24px) scale(.97); margin-block-end: -66px; }
.ql-toast__icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--ql-accent-text); }
.ql-toast__body { flex: 1 1 auto; min-inline-size: 0; }
.ql-toast__title { font-size: var(--ql-fs-sm); font-weight: var(--ql-fw-semibold); color: var(--ql-text-strong); }
.ql-toast__msg { font-size: var(--ql-fs-xs); color: var(--ql-text-muted); margin-block-start: 2px; line-height: 1.5; }
.ql-toast__bar {
  position: absolute;
  inset-block-end: 0; inset-inline-start: 0;
  block-size: 2px;
  inline-size: 100%;
  background: var(--ql-grad-sweep);
  transform-origin: 0 50%;
  animation: ql-toast-bar var(--ql-toast-life, 4600ms) linear forwards;
}
@keyframes ql-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ql-toast--success .ql-toast__icon { color: var(--ql-success); }
.ql-toast--success .ql-toast__bar { background: var(--ql-success); }
.ql-toast--danger  .ql-toast__icon { color: var(--ql-danger); }
.ql-toast--danger  .ql-toast__bar { background: var(--ql-danger); }
.ql-toast--warning .ql-toast__icon { color: var(--ql-warning); }
.ql-toast--warning .ql-toast__bar { background: var(--ql-warning); }

.ql-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ql-sp-5);
  padding: var(--ql-sp-6) var(--ql-sp-7);
  border-radius: var(--ql-r-md);
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-body);
  background: rgb(var(--ql-white-rgb)/.04);
  border: 1px solid rgb(var(--ql-white-rgb)/.07);
  overflow: hidden;
}
.ql-alert::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px; background: currentColor; opacity: .8; }
.ql-alert__icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; }
.ql-alert b { color: var(--ql-text-strong); }
.ql-alert--info    { color: var(--ql-info);    background: rgb(var(--ql-accent-rgb)/.07);    border-color: rgb(var(--ql-accent-rgb)/.20); }
.ql-alert--success { color: var(--ql-success); background: rgb(var(--ql-success-rgb)/.07); border-color: rgb(var(--ql-success-rgb)/.20); }
.ql-alert--warning { color: var(--ql-warning); background: rgb(var(--ql-warning-rgb)/.07); border-color: rgb(var(--ql-warning-rgb)/.20); }
.ql-alert--danger  { color: var(--ql-danger);  background: rgb(var(--ql-danger-rgb)/.07);  border-color: rgb(var(--ql-danger-rgb)/.20); }
.ql-alert__text { color: var(--ql-text-body); flex: 1 1 auto; min-inline-size: 0; }

.ql-empty { display: grid; place-items: center; gap: var(--ql-sp-5); padding: var(--ql-sp-13) var(--ql-sp-8); text-align: center; }
.ql-empty__art {
  inline-size: 68px; block-size: 68px;
  display: grid; place-items: center;
  border-radius: var(--ql-r-lg);
  background: rgb(var(--ql-white-rgb)/.04);
  border: 1px solid var(--ql-line);
  color: var(--ql-text-subtle);
}
.ql-empty__title { font-size: var(--ql-fs-lg); font-weight: var(--ql-fw-semibold); color: var(--ql-text-strong); }
.ql-empty__msg { font-size: var(--ql-fs-sm); color: var(--ql-text-subtle); max-inline-size: 42ch; }

/* 13 · Tabs · Accordion · Breadcrumb · Pagination */

.ql-tabs { position: relative; display: flex; gap: var(--ql-sp-2); border-block-end: 1px solid var(--ql-line); overflow-x: auto; scrollbar-width: none; }
.ql-tabs::-webkit-scrollbar { display: none; }
.ql-tab {
  position: relative;
  padding: var(--ql-sp-5) var(--ql-sp-6);
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-medium);
  color: var(--ql-text-subtle);
  white-space: nowrap;
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-tab:hover { color: var(--ql-text-body); }
.ql-tab[aria-selected="true"] { color: var(--ql-text-strong); font-weight: var(--ql-fw-semibold); }
.ql-tabs__ink {
  position: absolute;
  inset-block-end: -1px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ql-grad-sweep);
  box-shadow: 0 0 14px rgb(var(--ql-accent-rgb)/.5);
  transition: transform var(--ql-d-slow) var(--ql-ease-out), inline-size var(--ql-d-slow) var(--ql-ease-out);
  pointer-events: none;
}
.ql-tabpanel { padding-block-start: var(--ql-sp-8); }
.ql-tabpanel[hidden] { display: none; }
.ql-tabpanel.is-in { animation: ql-fade-up var(--ql-d-slow) var(--ql-ease-out); }
@keyframes ql-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ql-accordion { border-block-start: 1px solid var(--ql-line); }
.ql-acc {
  border-block-end: 1px solid var(--ql-line);
}
.ql-acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--ql-sp-6);
  padding: var(--ql-sp-7) var(--ql-sp-2);
  text-align: start;
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  letter-spacing: var(--ql-tr-body);
  color: var(--ql-text);
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-acc__btn:hover { color: var(--ql-text-strong); }
.ql-acc__btn[aria-expanded="true"] { color: var(--ql-accent-text); }
.ql-acc__sign { margin-inline-start: auto; flex: none; position: relative; inline-size: 14px; block-size: 14px; }
.ql-acc__sign::before, .ql-acc__sign::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 6px;
  inline-size: 14px; block-size: 2px; border-radius: 1px; background: currentColor;
  transition: transform var(--ql-d-slow) var(--ql-ease-out);
}
.ql-acc__sign::after { transform: rotate(90deg); }
.ql-acc__btn[aria-expanded="true"] .ql-acc__sign::after { transform: rotate(0deg); }
.ql-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ql-d-slow) var(--ql-ease-out);
}
.ql-acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.ql-acc__inner { overflow: hidden; }
.ql-acc__inner > div { padding: 0 var(--ql-sp-2) var(--ql-sp-8); color: var(--ql-text-muted); font-size: var(--ql-fs-sm); line-height: 1.65; max-inline-size: 72ch; }

.ql-crumbs { display: flex; align-items: center; gap: var(--ql-sp-3); font-size: var(--ql-fs-xs); color: var(--ql-text-subtle); flex-wrap: wrap; }
.ql-crumbs a { display: inline-flex; align-items: center; min-block-size: 26px; color: var(--ql-text-muted); text-decoration: none; transition: color var(--ql-d-fast) var(--ql-ease); }
.ql-crumbs a:hover { color: var(--ql-accent-text); }
.ql-crumbs__sep { opacity: .45; transform: skewX(var(--ql-axis)); display: inline-block; }
.ql-crumbs [aria-current="page"] { color: var(--ql-text-strong); }

.ql-pager { display: flex; align-items: center; gap: var(--ql-sp-3); }
.ql-pager a, .ql-pager button, .ql-pager span {
  min-inline-size: 36px; block-size: 36px;
  display: grid; place-items: center;
  padding-inline: var(--ql-sp-4);
  border-radius: var(--ql-r-xs);
  font-size: var(--ql-fs-xs);
  font-weight: var(--ql-fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--ql-text-muted);
  text-decoration: none;
  transition: var(--ql-t-color);
}
.ql-pager a:hover, .ql-pager button:hover { background: rgb(var(--ql-white-rgb)/.06); color: var(--ql-text-strong); }
.ql-pager [aria-current="page"] {
  color: var(--ql-accent-text);
  font-weight: var(--ql-fw-bold);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-100)) padding-box,
    var(--ql-edge-hi) border-box;
  box-shadow: 0 4px 16px -8px rgb(var(--ql-accent-rgb)/.45);
}

/* 14 · Stepper · Timeline */

.ql-steps { display: flex; gap: var(--ql-sp-2); counter-reset: ql-step; }
.ql-step { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--ql-sp-4); }
.ql-step__bar { block-size: 3px; border-radius: 2px; background: var(--ql-ink-300); overflow: hidden; position: relative; }
.ql-step__bar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ql-grad-sweep);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--ql-d-slower) var(--ql-ease-out);
}
.ql-step.is-done .ql-step__bar::after, .ql-step.is-current .ql-step__bar::after { transform: scaleX(1); }
.ql-step.is-current .ql-step__bar::after { transform: scaleX(.5); }
.ql-step__label { font-size: var(--ql-fs-xs); color: var(--ql-text-subtle); display: flex; align-items: center; gap: var(--ql-sp-3); }
.ql-step.is-current .ql-step__label, .ql-step.is-done .ql-step__label { color: var(--ql-text-body); }
.ql-step__n { font-family: var(--ql-font-mono); font-size: var(--ql-fs-3xs); color: var(--ql-accent-text); }

.ql-timeline { position: relative; padding-inline-start: var(--ql-sp-9); }
.ql-timeline::before {
  content: ""; position: absolute; inset-block: 6px 6px; inset-inline-start: 5px; inline-size: 1px;
  background: linear-gradient(var(--ql-accent-text), var(--ql-accent) 60%, transparent);
  opacity: .45;
}
.ql-tl-item { position: relative; padding-block-end: var(--ql-sp-9); }
.ql-tl-item:last-child { padding-block-end: 0; }
.ql-tl-item::before {
  content: ""; position: absolute;
  inset-inline-start: calc(-1 * var(--ql-sp-9) + 1px);
  inset-block-start: 6px;
  inline-size: 9px; block-size: 9px;
  border-radius: 50%;
  background: var(--ql-ink-050);
  border: 2px solid var(--ql-accent);
}
.ql-tl-item.is-now::before { background: var(--ql-accent-text); box-shadow: 0 0 12px rgb(var(--ql-accent-rgb)/.8); }
.ql-tl-item__when { font-family: var(--ql-font-mono); font-size: var(--ql-fs-3xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ql-text-subtle); }
.ql-tl-item__title { font-size: var(--ql-fs-md); font-weight: var(--ql-fw-semibold); color: var(--ql-text-strong); margin-block-start: 3px; }

/* 15 · Loaders · Skeleton · Progress */

.ql-spinner {
  position: relative;
  inline-size: 28px; block-size: 28px;
  flex: none;
}
.ql-spinner::before, .ql-spinner::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: ql-spin 1.05s linear infinite;
}
.ql-spinner::before { border-block-start-color: var(--ql-accent-text); border-inline-end-color: var(--ql-accent-text); }
.ql-spinner::after  { inset: 5px; border-block-end-color: var(--ql-accent); border-inline-start-color: var(--ql-accent); animation-duration: 1.5s; animation-direction: reverse; }
.ql-spinner--sm { inline-size: 18px; block-size: 18px; }
.ql-spinner--sm::after { inset: 4px; }
.ql-spinner--lg { inline-size: 46px; block-size: 46px; }
.ql-spinner--lg::after { inset: 8px; }

/* Mark loader */

.ql-mark-loader {
  inline-size: auto;
  block-size: 44px;
  aspect-ratio: 428.6 / 500;
  flex: none;
  filter: drop-shadow(0 0 14px rgb(var(--ql-accent-rgb) / .22));
}
.ql-mark-loader--sm { block-size: 26px; }
.ql-mark-loader--lg { block-size: 84px; filter: drop-shadow(0 0 26px rgb(var(--ql-accent-rgb) / .28)); }

.ql-blades { display: flex; align-items: flex-end; gap: 3px; block-size: 26px; }
.ql-blades i {
  display: block;
  inline-size: 3px;
  block-size: 100%;
  border-radius: 2px;
  transform: skewX(var(--ql-axis));
  background: linear-gradient(var(--ql-axis-fill), var(--ql-accent-text), var(--ql-accent));
  transform-origin: 50% 100%;
  animation: ql-blade-pulse 1.15s var(--ql-ease-in-out) infinite;
}
.ql-blades i:nth-child(1){animation-delay:0ms}    .ql-blades i:nth-child(2){animation-delay:70ms}
.ql-blades i:nth-child(3){animation-delay:140ms}  .ql-blades i:nth-child(4){animation-delay:210ms}
.ql-blades i:nth-child(5){animation-delay:280ms}  .ql-blades i:nth-child(6){animation-delay:350ms}
.ql-blades i:nth-child(7){animation-delay:420ms}  .ql-blades i:nth-child(8){animation-delay:490ms}
.ql-blades i:nth-child(9){animation-delay:560ms}  .ql-blades i:nth-child(10){animation-delay:630ms}
.ql-blades i:nth-child(11){animation-delay:700ms}
@keyframes ql-blade-pulse {
  0%, 100% { transform: skewX(var(--ql-axis)) scaleY(.22); opacity: .38; }
  50%      { transform: skewX(var(--ql-axis)) scaleY(1);   opacity: 1; }
}

.ql-topbar {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  block-size: 2px;
  z-index: var(--ql-z-toast);
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ql-d-base) var(--ql-ease);
}
.ql-topbar.is-on { opacity: 1; }
.ql-topbar::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 40%;
  background: var(--ql-grad-sweep);
  box-shadow: 0 0 14px rgb(var(--ql-accent-rgb)/.7);
  animation: ql-topbar-run 1.2s var(--ql-ease-in-out) infinite;
}
@keyframes ql-topbar-run {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-topbar::after { animation: none; inline-size: 100%; opacity: .55; }
}

.ql-dots { display: inline-flex; gap: 5px; align-items: center; }
.ql-dots i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ql-accent-text); animation: ql-dot-bob 1.1s var(--ql-ease-in-out) infinite; }
.ql-dots i:nth-child(2) { animation-delay: .13s; background: var(--ql-accent); }
.ql-dots i:nth-child(3) { animation-delay: .26s; background: var(--ql-accent); }
@keyframes ql-dot-bob { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-5px); opacity: 1; } }

.ql-skeleton {
  position: relative;
  border-radius: var(--ql-r-xs);
  background: var(--ql-ink-200);
  overflow: hidden;
}
.ql-skeleton::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -160%;
  inline-size: 160%;
  transform: skewX(var(--ql-axis));
  background: linear-gradient(90deg, transparent, rgb(var(--ql-white-rgb)/.07) 46%, rgb(var(--ql-accent-rgb)/.08) 54%, transparent);
  animation: ql-shimmer 1.5s var(--ql-ease-in-out) infinite;
}
@keyframes ql-shimmer { to { inset-inline-start: 160%; } }
.ql-skeleton--text { block-size: 11px; border-radius: var(--ql-r-full); }
.ql-skeleton--title { block-size: 20px; border-radius: var(--ql-r-full); }
.ql-skeleton--circle { border-radius: 50%; }

.ql-progress { block-size: 6px; border-radius: var(--ql-r-full); background: var(--ql-ink-200); overflow: hidden; }
.ql-progress__fill {
  block-size: 100%;
  border-radius: inherit;
  background: var(--ql-grad-sweep);
  box-shadow: 0 0 14px -2px rgb(var(--ql-accent-rgb)/.6);
  transition: inline-size var(--ql-d-slower) var(--ql-ease-out);
}
.ql-ring { transform: rotate(-90deg); }
.ql-ring circle { fill: none; stroke-linecap: round; }
.ql-ring__track { stroke: var(--ql-ink-300); }
.ql-ring__fill  { stroke: url(#ql-ring-grad); transition: stroke-dashoffset var(--ql-d-slower) var(--ql-ease-out); }

/* 16 · Table · Stat · Code */

.ql-table-wrap { inline-size: 100%; overflow-x: auto; border-radius: var(--ql-r-md); border: 1px solid var(--ql-line); background: var(--ql-ink-100); }
.ql-table { inline-size: 100%; min-inline-size: 560px; font-size: var(--ql-fs-sm); border-collapse: separate; border-spacing: 0; }
.ql-table thead th {
  position: sticky; inset-block-start: 0; z-index: 1;
  padding: var(--ql-sp-5) var(--ql-sp-6);
  text-align: start;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  letter-spacing: var(--ql-tr-micro);
  text-transform: uppercase;
  color: var(--ql-text-subtle);
  background: var(--ql-ink-150);
  border-block-end: 1px solid var(--ql-line);
  white-space: nowrap;
}
.ql-table tbody td { padding: var(--ql-sp-6); border-block-end: 1px solid var(--ql-line-soft); color: var(--ql-text-body); vertical-align: middle; }
.ql-table tbody tr { transition: background var(--ql-d-fast) var(--ql-ease); }
.ql-table tbody tr:hover { background: rgb(var(--ql-white-rgb)/.028); }
.ql-table tbody tr:last-child td { border-block-end: 0; }
.ql-table .ql-num { text-align: end; font-variant-numeric: tabular-nums; }

.ql-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ql-sp-3);
  padding: var(--ql-sp-7);
  border-radius: var(--ql-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box,
    var(--ql-edge-quiet) border-box;
}
.ql-stat__k { font-family: var(--ql-font-mono); font-size: var(--ql-fs-3xs); letter-spacing: var(--ql-tr-micro); text-transform: uppercase; color: var(--ql-text-subtle); }
.ql-stat__v {
  font-size: var(--ql-fs-3xl);
  font-weight: var(--ql-fw-heavy);
  letter-spacing: var(--ql-tr-head);
  line-height: 1;
  color: var(--ql-text-strong);
  font-variant-numeric: tabular-nums;
}
.ql-stat__d { font-size: var(--ql-fs-xs); color: var(--ql-text-subtle); }

.ql-code {
  position: relative;
  padding: var(--ql-sp-7);
  border-radius: var(--ql-r-md);
  background: var(--ql-ink-025);
  border: 1px solid var(--ql-line);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-xs);
  line-height: 1.72;
  color: var(--ql-ink-800);
  overflow-x: auto;
  tab-size: 2;
}
.ql-code .c { color: var(--ql-text-subtle); font-style: italic; }
.ql-code .k { color: var(--ql-accent-text); }
.ql-code .s { color: var(--ql-success); }
.ql-code .v { color: var(--ql-accent-text); }
.ql-code .n { color: var(--ql-warning); }
.ql-code__copy {
  position: absolute;
  inset-block-start: var(--ql-sp-4);
  inset-inline-end: var(--ql-sp-4);
  padding: var(--ql-sp-2) var(--ql-sp-4);
  border-radius: var(--ql-r-xs);
  font-family: var(--ql-font-sans);
  font-size: var(--ql-fs-3xs);
  color: var(--ql-text-subtle);
  background: rgb(var(--ql-white-rgb)/.05);
  opacity: 0;
  transition: opacity var(--ql-d-fast) var(--ql-ease), color var(--ql-d-fast) var(--ql-ease);
}
.ql-code:hover .ql-code__copy, .ql-code__copy:focus-visible { opacity: 1; }
.ql-code__copy:hover { color: var(--ql-accent-text); }

/* 17 · Header · Footer · Marketing */

.ql-nav { display: flex; align-items: center; gap: var(--ql-sp-2); margin-inline-start: var(--ql-sp-6); }
.ql-nav a {
  position: relative;
  padding: var(--ql-sp-4) var(--ql-sp-5);
  border-radius: var(--ql-r-xs);
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-semibold);
  color: var(--ql-text-muted);
  text-decoration: none;
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ql-grad-sweep);
  transform: translateX(-50%);
  transition: inline-size var(--ql-d-base) var(--ql-ease-out);
}
.ql-nav a:hover { color: var(--ql-text-strong); }
.ql-nav a:hover::after, .ql-nav a[aria-current="page"]::after { inline-size: 18px; }
.ql-nav a[aria-current="page"] { color: var(--ql-text-strong); }

.ql-mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ql-d-slow) var(--ql-ease-out);
  border-block-start: 1px solid transparent;
}
.ql-mobile-nav[data-open="true"] { grid-template-rows: 1fr; border-block-start-color: var(--ql-line); }
.ql-mobile-nav > div { overflow: hidden; }
.ql-mobile-nav nav { display: flex; flex-direction: column; gap: var(--ql-sp-2); padding-block: var(--ql-sp-6); }
.ql-mobile-nav a { padding: var(--ql-sp-5); border-radius: var(--ql-r-sm); color: var(--ql-text-body); text-decoration: none; font-size: var(--ql-fs-md); font-weight: var(--ql-fw-medium); }
.ql-mobile-nav a:hover { background: rgb(var(--ql-white-rgb)/.05); color: var(--ql-text-strong); }

.ql-hero { position: relative; padding-block: clamp(4rem, 2rem + 9vw, 9rem) var(--ql-section); overflow: hidden; }
.ql-hero__glow {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: 50%;
  inline-size: min(1100px, 130%);
  aspect-ratio: 1.6;
  translate: -50% 0;
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--ql-accent-rgb)/.16), transparent 70%),
              radial-gradient(40% 40% at 66% 58%, rgb(var(--ql-accent-rgb)/.14), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}

.ql-feature { display: flex; flex-direction: column; gap: var(--ql-sp-5); }
.ql-feature__icon {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border-radius: var(--ql-r-sm);
  color: var(--ql-accent-text);
  background: rgb(var(--ql-accent-rgb)/.09);
  border: 1px solid rgb(var(--ql-accent-rgb)/.20);
  transition: var(--ql-t-lift), background var(--ql-d-base) var(--ql-ease);
}
.ql-card--interactive:hover .ql-feature__icon { background: rgb(var(--ql-accent-rgb)/.16); transform: translateY(-2px); }

.ql-logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ql-sp-11); opacity: .55; }
.ql-logo-cloud > * { filter: grayscale(1) brightness(1.6); transition: filter var(--ql-d-slow) var(--ql-ease), opacity var(--ql-d-slow) var(--ql-ease); }
.ql-logo-cloud > *:hover { filter: none; }

.ql-price { display: flex; align-items: baseline; gap: var(--ql-sp-3); }
.ql-price__amt { font-size: var(--ql-fs-4xl); font-weight: var(--ql-fw-heavy); letter-spacing: var(--ql-tr-display); color: var(--ql-text-strong); line-height: 1; }
.ql-price__per { font-size: var(--ql-fs-sm); color: var(--ql-text-subtle); }
.ql-plan-list { display: flex; flex-direction: column; gap: var(--ql-sp-5); font-size: var(--ql-fs-sm); color: var(--ql-text-muted); }
.ql-plan-list li { display: flex; align-items: flex-start; gap: var(--ql-sp-5); }
.ql-plan-list li::before {
  content: ""; flex: none; margin-block-start: 5px;
  inline-size: 13px; block-size: 7px;
  border-inline-start: 1.75px solid var(--ql-accent-text);
  border-block-end: 1.75px solid var(--ql-accent-text);
  transform: rotate(-45deg);
}

.ql-cta {
  position: relative;
  padding: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  border-radius: var(--ql-r-2xl);
  text-align: center;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box,
    var(--ql-edge-hi) border-box;
}
.ql-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 50% 0%, rgb(var(--ql-accent-rgb)/.14), transparent 62%),
              radial-gradient(60% 100% at 82% 100%, rgb(var(--ql-accent-rgb)/.13), transparent 65%);
}
.ql-cta > * { position: relative; z-index: 1; }

.ql-footer { border-block-start: 1px solid var(--ql-line); padding-block: var(--ql-sp-13) var(--ql-sp-9); margin-block-start: var(--ql-section); }
.ql-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--ql-sp-11); }
@media (max-width: 900px) { .ql-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ql-footer__grid { grid-template-columns: 1fr; } }

.ql-footer h6 {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: var(--ql-tr-micro);
  text-transform: uppercase;
  color: var(--ql-text-muted);
  margin-block-end: var(--ql-sp-5);
}
.ql-footer nav { display: flex; flex-direction: column; gap: var(--ql-sp-3); }
.ql-footer nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 30px;
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-medium);
  color: var(--ql-text-body);
  text-decoration: none;
  transition: color var(--ql-d-fast) var(--ql-ease);
  width: fit-content;
}
.ql-footer nav a:hover { color: var(--ql-accent-text); }
.ql-footer__base {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--ql-sp-6);
  justify-content: space-between; align-items: center;
  margin-block-start: 0;
  padding-block: var(--ql-sp-7);
  border-block-start: 1px solid rgb(var(--ql-black-rgb) / .85);
  box-shadow: 0 -1px 0 0 var(--ql-spec-top) inset;
  font-size: var(--ql-fs-xs);
  color: var(--ql-text-subtle);
}

/* 18 · Site chrome */

.ql-shell { display: flex; flex-direction: column; min-block-size: 100svh; }
.ql-shell > main { flex: 1 0 auto; }

/* Bar */
.ql-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--ql-z-header);
  background:
    linear-gradient(0deg, rgb(var(--ql-accent-text-rgb) / .05), transparent 46%),
    linear-gradient(180deg,
      rgb(17 17 20 / .86) 0%,
      rgb(9 9 11 / .82) 60%,
      rgb(5 5 6 / .80) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  transition: box-shadow var(--ql-d-slow) var(--ql-ease);
}

.ql-header.is-stuck {
  background:
    linear-gradient(0deg, rgb(var(--ql-accent-text-rgb) / .05), transparent 46%),
    linear-gradient(180deg,
      rgb(17 17 20 / .95) 0%,
      rgb(9 9 11 / .93) 60%,
      rgb(5 5 6 / .91) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 24px 48px -30px rgb(var(--ql-black-rgb) / .95);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ql-header,
  .ql-header.is-stuck { background: linear-gradient(180deg, #111114, #09090B 60%, #050506); }
}
.ql-header__bar { display: flex; align-items: center; gap: var(--ql-sp-7); block-size: 84px; }
@media (max-width: 767px) { .ql-header__bar { block-size: 68px; } }

.ql-header::before,
.ql-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ql-d-slower) var(--ql-ease);
}
.ql-header::before {
  z-index: -1;
  inset: 0 0 2px;
  background: radial-gradient(440px 150px at var(--ql-hx, 50%) -30px,
      rgb(var(--ql-white-rgb) / .09), transparent 72%);
}
.ql-header::after {
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--ql-grad-signature);
  -webkit-mask-image: radial-gradient(170px 3px at var(--ql-hx, 50%) 50%, #000, transparent);
          mask-image: radial-gradient(170px 3px at var(--ql-hx, 50%) 50%, #000, transparent);
}
.ql-header.is-lit::before { opacity: 1; }
.ql-header.is-lit::after { opacity: .9; }

.ql-header .ql-logo { gap: 11px; }
.ql-header .ql-logo__mark { block-size: 30px; }
.ql-header .ql-logo__word { font-size: 1.25rem; letter-spacing: .06em; }
.ql-header__sep {
  flex: none;
  inline-size: 1px;
  block-size: 24px;
  background: linear-gradient(180deg, transparent,
      rgb(var(--ql-white-rgb) / .18) 25%, rgb(var(--ql-white-rgb) / .18) 75%, transparent);
}

/* Seam */
.ql-rail {
  position: relative;
  block-size: 2px;
  inline-size: 100%;
}
.ql-rail::before,
.ql-rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  background: var(--ql-grad-signature);
  pointer-events: none;
  transition: opacity var(--ql-d-slow) var(--ql-ease);
}
.ql-rail::before { inset-block: 0; opacity: .5; }
.ql-rail::after  { inset-block: -3px; filter: blur(7px); opacity: .32; }
.ql-header:hover .ql-rail::before,
.ql-header.is-stuck .ql-rail::before { opacity: .62; }
.ql-header.is-live .ql-rail::before { opacity: calc(.52 + var(--ql-sig-low, 0) * .42); transition: none; }
.ql-header.is-live .ql-rail::after  { opacity: calc(.3 + var(--ql-sig-low, 0) * .5); transition: none; }

.ql-rail__node {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  block-size: 2px;
  inline-size: var(--ql-node-w, 0px);
  border-radius: 2px;
  transform: translate3d(var(--ql-node-x, 0px), 0, 0);
  background-image: var(--ql-grad-signature);
  background-size: var(--ql-rail-w, 100%) 100%;
  background-position: calc(-1 * var(--ql-node-x, 0px)) 0;
  opacity: 0;
  transition: transform var(--ql-d-slower) var(--ql-ease-out),
              inline-size var(--ql-d-slower) var(--ql-ease-out),
              background-position var(--ql-d-slower) var(--ql-ease-out),
              opacity var(--ql-d-base) var(--ql-ease);
  pointer-events: none;
}
.ql-rail__node.is-on { opacity: 1; }
.ql-rail__node::before,
.ql-rail__node::after {
  content: "";
  position: absolute;
  background-image: var(--ql-grad-signature);
  background-size: var(--ql-rail-w, 100%) 100%;
  pointer-events: none;
  transition: background-position var(--ql-d-slower) var(--ql-ease-out),
              inset-inline-start var(--ql-d-slower) var(--ql-ease-out),
              inline-size var(--ql-d-slower) var(--ql-ease-out);
}
.ql-rail__node::before {
  inset-block: -7px -1px;
  inset-inline-start: -8px;
  inline-size: calc(var(--ql-node-w, 0px) + 16px);
  border-radius: 8px;
  background-position: calc(8px - var(--ql-node-x, 0px)) 0;
  filter: blur(6px);
  opacity: .75;
}
.ql-rail__node::after {
  inset-block-end: 1px;
  inset-inline-start: calc(var(--ql-node-w, 0px) * -.3);
  inline-size: calc(var(--ql-node-w, 0px) * 1.6);
  block-size: 64px;
  background-position: calc(var(--ql-node-w, 0px) * .3 - var(--ql-node-x, 0px)) 0;
  -webkit-mask-image: radial-gradient(50% 100% at 50% 100%, #000, rgb(0 0 0 / .4) 40%, transparent);
          mask-image: radial-gradient(50% 100% at 50% 100%, #000, rgb(0 0 0 / .4) 40%, transparent);
  opacity: .5;
}

.ql-rail__wake {
  position: absolute;
  inset-inline: 0;
  inset-block: -12px;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ql-rail__wake::before,
.ql-rail__wake::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: 100%;
  background: linear-gradient(90deg,
      transparent calc(50% - 200px),
      rgb(var(--ql-white-rgb) / .26) calc(50% - 56px),
      rgb(var(--ql-white-rgb) / .95) 50%,
      transparent calc(50% + 16px));
  opacity: 0;
  transform: translate3d(calc(-50% + var(--ql-wake-from, 56px)), 0, 0);
}
.ql-rail__wake::before { inset-block: 11px; }
.ql-rail__wake::after  { inset-block: 6px; filter: blur(6px); }
.ql-rail.is-waking .ql-rail__wake::before,
.ql-rail.is-waking .ql-rail__wake::after { animation: ql-wake 1.5s cubic-bezier(.5, 0, .2, 1) var(--ql-wake-at, .4s) 1 both; }
@keyframes ql-wake {
  0%   { opacity: 0; transform: translate3d(calc(-50% + var(--ql-wake-from, 56px)), 0, 0); }
  24%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ql-rail__wake { display: none; }
}

/* Nav words */
.ql-nav--rail a::after,
.ql-nav--rail button::after { display: none; }
.ql-header .ql-nav--rail { gap: 2px; margin-inline-start: 0; }
.ql-nav--rail .ql-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.012em;
  line-height: 1;
  color: var(--ql-ink-800);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-nav--rail .ql-nav__item:hover,
.ql-nav--rail .ql-nav__item[aria-current="page"],
.ql-nav--rail .ql-nav__item[data-ql-here],
.ql-nav--rail .ql-nav__item[aria-expanded="true"] { color: var(--ql-text-strong); }
.ql-nav__caret,
.ql-nav__out {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  opacity: .55;
  transition: transform var(--ql-d-base) var(--ql-ease-out), opacity var(--ql-d-fast) var(--ql-ease);
}
.ql-nav__out { inline-size: 11px; block-size: 11px; }
.ql-nav__item:hover .ql-nav__caret,
.ql-nav__item:hover .ql-nav__out { opacity: .95; }

.ql-nav__item:hover .ql-nav__out { transform: translate(1.5px, -1.5px); }
.ql-nav__item[aria-expanded="true"] .ql-nav__caret { transform: rotate(180deg); opacity: 1; }

/* Actions */
.ql-header__cta { flex: none; flex-wrap: nowrap; gap: 10px; }
.ql-header__cta .ql-btn { --btn-h: 36px; --btn-px: 16px; font-size: var(--ql-fs-sm); }
.ql-header__cta .ql-btn--primary { --btn-px: 18px; }

@media (max-width: 1279px) {
  .ql-header__sep { display: none; }
  .ql-header .ql-nav--rail { margin-inline-start: 2px; }
  .ql-nav--rail .ql-nav__item { padding: 0 11px; font-size: var(--ql-fs-sm); }
  .ql-header__bar { gap: var(--ql-sp-6); }
}

/* Menu button */
.ql-burger {
  display: none;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--ql-white-rgb) / .05);
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .10);
  color: var(--ql-text-strong);
  cursor: pointer;
  transition: background-color var(--ql-d-fast) var(--ql-ease), box-shadow var(--ql-d-fast) var(--ql-ease);
}
.ql-burger:hover { background: rgb(var(--ql-white-rgb) / .09); box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .16); }
.ql-burger:focus-visible { border-radius: 999px; box-shadow: var(--ql-ring); }
.ql-burger span { position: relative; display: block; inline-size: 16px; block-size: 8px; }
.ql-burger span::before,
.ql-burger span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1.75px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--ql-d-base) var(--ql-ease-out);
}
.ql-burger span::before { inset-block-start: 0; }
.ql-burger span::after  { inset-block-end: 0; }
.ql-burger[aria-expanded="true"] span::before { transform: translateY(3.125px) rotate(45deg); }
.ql-burger[aria-expanded="true"] span::after  { transform: translateY(-3.125px) rotate(-45deg); }

@media (max-width: 1023px) {
  .ql-nav, .ql-header__cta, .ql-header__sep { display: none; }
  .ql-burger { display: grid; margin-inline-start: auto; }
}

/* Mega menu */
.ql-mega {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: var(--ql-z-header);
  background: #09090A;
  box-shadow:
      0 1px 0 0 rgb(var(--ql-white-rgb) / .07),
      0 56px 110px -44px rgb(var(--ql-black-rgb) / .98);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--ql-d-base) var(--ql-ease-out),
              transform var(--ql-d-slow) var(--ql-ease-out),
              visibility 0s linear var(--ql-d-slow);
}
.ql-mega::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 110px;
  background: var(--ql-grad-signature);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
          mask-image: linear-gradient(180deg, #000, transparent);
  opacity: .075;
  pointer-events: none;
}
.ql-mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ql-mega__inner { position: relative; padding-block: var(--ql-sp-8) var(--ql-sp-9); }
.ql-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.28fr);
  gap: var(--ql-sp-5);

  align-items: stretch;
}
@media (max-width: 1279px) {
  .ql-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ql-mega__feature { grid-column: 1 / -1; }
}

.ql-mega__div,
.ql-mega__feature {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border-radius: var(--ql-r-lg);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: background-color var(--ql-d-base) var(--ql-ease),
              box-shadow var(--ql-d-base) var(--ql-ease),
              transform var(--ql-d-base) var(--ql-ease-out);
}

.ql-mega__div {
  --div-wash: color-mix(in srgb, var(--div-stop, #2997FF) 16%, transparent);
  --div-tint: color-mix(in srgb, var(--div-stop, #2997FF) 11%, transparent);
  --div-edge: color-mix(in srgb, var(--div-stop, #2997FF) 40%, transparent);
  gap: var(--ql-sp-3);
  min-block-size: 252px;
  padding: var(--ql-sp-7);
  background-color: #111113;
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .07);
}
.ql-mega__div::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 2px;
  background: var(--div-stop, var(--ql-accent-text));
  box-shadow: 0 0 18px 1px var(--div-stop, var(--ql-accent-text));
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity var(--ql-d-base) var(--ql-ease),
              transform var(--ql-d-slower) var(--ql-ease-out);
}
.ql-mega__div::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(100% 70% at 50% 0%, var(--div-wash, transparent), transparent 72%);
  opacity: 0;
  transition: opacity var(--ql-d-slow) var(--ql-ease);
  pointer-events: none;
}
.ql-mega__div:hover,
.ql-mega__div:focus-visible {
  background-color: #151518;
  box-shadow:
      inset 0 0 0 1px rgb(var(--ql-white-rgb) / .12),
      0 26px 50px -30px rgb(var(--ql-black-rgb) / .9);
  transform: translateY(-2px);
}
.ql-mega__div:focus-visible { box-shadow: var(--ql-ring); }
.ql-mega__div:hover::before,
.ql-mega__div:focus-visible::before { opacity: 1; transform: none; }

.ql-mega__div[aria-current="page"]:not(:hover):not(:focus-visible)::before { opacity: .75; transform: none; box-shadow: none; }
.ql-mega__div:hover::after,
.ql-mega__div:focus-visible::after { opacity: 1; }

.ql-mega__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ql-sp-5);
  margin-block-end: var(--ql-sp-7);
}
.ql-mega__icon {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 13px;
  background: rgb(var(--ql-white-rgb) / .045);
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .09);
  color: var(--ql-ink-800);
  transition: color var(--ql-d-base) var(--ql-ease),
              background-color var(--ql-d-base) var(--ql-ease),
              box-shadow var(--ql-d-base) var(--ql-ease);
}
.ql-mega__icon svg { inline-size: 21px; block-size: 21px; }
.ql-mega__div:hover .ql-mega__icon,
.ql-mega__div:focus-visible .ql-mega__icon {
  color: var(--div-stop, var(--ql-accent-text));
  background: var(--div-tint, rgb(var(--ql-white-rgb) / .06));
  box-shadow: inset 0 0 0 1px var(--div-edge, rgb(var(--ql-white-rgb) / .16));
}
.ql-mega__num {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: .1em;
  color: var(--ql-text-subtle);
}
.ql-mega__eyebrow {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: var(--ql-tr-micro);
  text-transform: uppercase;
  color: var(--div-stop, var(--ql-accent-text));
}
.ql-mega__title {
  font-size: 1.3125rem;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.016em;
  line-height: 1.2;
  color: var(--ql-text-strong);
}
.ql-mega__body {
  flex: 1 1 auto;
  font-size: var(--ql-fs-sm);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-mega__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block-start: var(--ql-sp-6);
  font-size: var(--ql-fs-xs);
  font-weight: var(--ql-fw-semibold);
  color: var(--ql-text-muted);
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-mega__more .ql-btn__arrow { inline-size: 13px; block-size: 13px; margin: 0; }
.ql-mega__div:hover .ql-mega__more,
.ql-mega__div:focus-visible .ql-mega__more { color: var(--ql-text-strong); }

.ql-mega__div:hover .ql-btn__arrow path,
.ql-mega__div:focus-visible .ql-btn__arrow path { transform: translateX(2px); }
.ql-mega__div:hover .ql-btn__arrow .ql-btn__stem,
.ql-mega__div:focus-visible .ql-btn__arrow .ql-btn__stem { transform: translateX(2px) scaleX(1); opacity: 1; }

.ql-mega__feature {
  gap: var(--ql-sp-4);
  padding: var(--ql-sp-8);
  background-color: #0A0D11;
  background-image:
    radial-gradient(130% 95% at 100% 0%, rgb(6 182 212 / .17), transparent 56%),
    radial-gradient(100% 90% at 0% 100%, rgb(var(--ql-accent-rgb) / .16), transparent 62%);
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .10);
}
.ql-mega__feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgb(var(--ql-white-rgb) / .16) 1px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(75% 85% at 100% 0%, #000, transparent 72%);
          mask-image: radial-gradient(75% 85% at 100% 0%, #000, transparent 72%);
  opacity: .55;
  pointer-events: none;
}

.ql-mega__feature > .ql-badge { align-self: flex-start; margin-block-end: auto; }
.ql-mega__name {
  margin-block-start: var(--ql-sp-8);
  font-size: 2.125rem;
  font-weight: var(--ql-fw-heavy);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ql-text-strong);
}
.ql-mega__feature .ql-mega__body { flex: 0 1 auto; max-inline-size: 46ch; color: var(--ql-ink-700); }
.ql-mega__feature .ql-mega__more { margin-block-start: var(--ql-sp-4); color: var(--ql-cyan-bright); }
.ql-mega__out {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  transition: transform var(--ql-d-base) var(--ql-ease-out);
}
.ql-mega__feature:hover,
.ql-mega__feature:focus-visible {
  box-shadow:
      inset 0 0 0 1px rgb(6 182 212 / .34),
      0 30px 64px -36px rgb(6 182 212 / .32);
  transform: translateY(-2px);
}
.ql-mega__feature:focus-visible { box-shadow: var(--ql-ring); }
.ql-mega__feature:hover .ql-mega__out,
.ql-mega__feature:focus-visible .ql-mega__out { transform: translate(2px, -2px); }

@media (max-width: 1279px) {
  .ql-mega__feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--ql-sp-3) var(--ql-sp-9);
    padding-block: var(--ql-sp-7);
  }
  .ql-mega__feature > .ql-badge { grid-column: 1; justify-self: start; margin-block-end: var(--ql-sp-3); }
  .ql-mega__name { grid-column: 1; margin-block-start: 0; }
  .ql-mega__feature .ql-mega__body { grid-column: 1; max-inline-size: 64ch; }
  .ql-mega__feature .ql-mega__more { grid-column: 2; grid-row: 3; margin: 0; }
}

.ql-mega.is-open .ql-mega__grid > * { animation: ql-mega-in .56s var(--ql-ease-out) backwards; }
.ql-mega.is-open .ql-mega__grid > :nth-child(2) { animation-delay: 45ms; }
.ql-mega.is-open .ql-mega__grid > :nth-child(3) { animation-delay: 90ms; }
.ql-mega.is-open .ql-mega__grid > :nth-child(4) { animation-delay: 135ms; }
@keyframes ql-mega-in {
  from { opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .ql-mega, .ql-mega.is-open { transform: none; }
  .ql-mega.is-open .ql-mega__grid > * { animation: none; }
  .ql-mega__div:hover, .ql-mega__div:focus-visible,
  .ql-mega__feature:hover, .ql-mega__feature:focus-visible { transform: none; }
}

/* Division */

.ql-div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ql-sp-4);
  padding-block-start: var(--ql-sp-6);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ql-d-base) var(--ql-ease-out);
}

.ql-div::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 26px;
  border-radius: 2px;
  background: var(--ql-ink-400);
  transition: inline-size var(--ql-d-slow) var(--ql-ease-out),
              background-color var(--ql-d-base) var(--ql-ease),
              box-shadow var(--ql-d-base) var(--ql-ease);
}
.ql-div:hover { transform: translateY(-2px); }
.ql-div:hover::before,
.ql-div:focus-visible::before {
  inline-size: 100%;
  background: var(--div-stop, var(--ql-accent-text));
  box-shadow: 0 0 14px -1px var(--div-stop, var(--ql-accent-text));
}
.ql-div__eyebrow {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: var(--ql-tr-micro);
  text-transform: uppercase;
  color: var(--div-stop, var(--ql-accent-text));
}
.ql-div__title {
  font-size: var(--ql-fs-lg);
  font-weight: var(--ql-fw-bold);
  letter-spacing: var(--ql-tr-lead);
  color: var(--ql-text-strong);
}
.ql-div__body { font-size: var(--ql-fs-sm); line-height: 1.6; color: var(--ql-text-muted); text-wrap: pretty; }
.ql-div__more {
  margin-block-start: var(--ql-sp-2);
  font-size: var(--ql-fs-xs);
  font-weight: var(--ql-fw-semibold);
  color: var(--ql-text-subtle);
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-3);
  transition: color var(--ql-d-fast) var(--ql-ease), gap var(--ql-d-base) var(--ql-ease-out);
}
.ql-div:hover .ql-div__more { color: var(--div-stop, var(--ql-accent-text)); gap: var(--ql-sp-5); }

/* Phone menu */
.ql-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--ql-z-drawer);
  display: flex;
  flex-direction: column;
  background: rgb(5 5 6 / .975);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ql-d-base) var(--ql-ease-out),
              visibility 0s linear var(--ql-d-base);
  overscroll-behavior: contain;
}
.ql-sheet.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.ql-sheet__head {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  box-sizing: border-box;
  block-size: 86px;
  padding-block-end: 2px;
}
@media (max-width: 767px) { .ql-sheet__head { block-size: 70px; } }
.ql-sheet__head::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--ql-grad-signature);
  opacity: .55;
}
.ql-sheet__head .ql-logo { gap: 11px; }
.ql-sheet__head .ql-logo__mark { block-size: 30px; }
.ql-sheet__head .ql-logo__word { font-size: 1.25rem; letter-spacing: .06em; }
.ql-sheet__head .ql-modal__x {
  inline-size: 42px;
  block-size: 42px;
  border-radius: 999px;
  background: rgb(var(--ql-white-rgb) / .05);
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .10);
  color: var(--ql-text-strong);
}
.ql-sheet__head .ql-modal__x:hover { background: rgb(var(--ql-white-rgb) / .09); }
.ql-sheet__head .ql-modal__x:focus-visible { border-radius: 999px; box-shadow: var(--ql-ring); }
.ql-sheet__head .ql-modal__x svg { inline-size: 18px; block-size: 18px; }

.ql-sheet__body { flex: 1 1 auto; overflow-y: auto; padding-block: var(--ql-sp-8) var(--ql-sp-11); }
.ql-sheet__foot {
  flex: none;
  padding-block: var(--ql-sp-6) max(var(--ql-sp-6), env(safe-area-inset-bottom));
  border-block-start: 1px solid rgb(var(--ql-white-rgb) / .07);
}
.ql-sheet__foot .ql-row { flex-wrap: nowrap; gap: var(--ql-sp-4); }
.ql-sheet__foot .ql-btn { --btn-h: 48px; flex: 1 1 0; min-inline-size: 0; font-size: var(--ql-fs-md); }

.ql-sheet__group + .ql-sheet__group { margin-block-start: var(--ql-sp-9); }
.ql-sheet__label {
  display: block;
  margin-block-end: var(--ql-sp-5);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: var(--ql-tr-micro);
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}

.ql-sheet__divs { display: grid; gap: var(--ql-sp-3); }
.ql-sheet__div {
  --div-edge: color-mix(in srgb, var(--div-stop, #2997FF) 46%, transparent);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ql-sp-5);
  min-block-size: 76px;
  padding: var(--ql-sp-5) var(--ql-sp-6) var(--ql-sp-5) var(--ql-sp-5);
  border-radius: var(--ql-r-lg);
  background-color: #111113;
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .07);
  color: var(--ql-text-strong);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ql-sheet__div:active { background-color: #18181B; }
.ql-sheet__div:focus-visible { box-shadow: var(--ql-ring); }

.ql-sheet__div[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--div-edge, rgb(var(--ql-white-rgb) / .22)); }
.ql-sheet__link[aria-current="page"] > span::after {
  content: "";
  display: inline-block;
  inline-size: 7px;
  block-size: 7px;
  margin-inline-start: 12px;
  border-radius: 50%;
  background: var(--ql-accent-text);
  vertical-align: middle;
  transform: translateY(-2px);
}
.ql-sheet__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 13px;
  color: var(--div-stop, var(--ql-accent-text));
  background: rgb(var(--ql-white-rgb) / .045);
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .09);
}
.ql-sheet__icon svg { inline-size: 22px; block-size: 22px; }
.ql-sheet__text {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: 1.1875rem;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.016em;
  line-height: 1.2;
}
.ql-sheet__text small {
  display: block;
  margin-block-start: 4px;
  font-size: var(--ql-fs-xs);
  font-weight: var(--ql-fw-medium);
  letter-spacing: 0;
  color: var(--ql-text-subtle);
}

.ql-sheet__link {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-5);
  min-block-size: 60px;
  font-size: 1.625rem;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.024em;
  line-height: 1.1;
  color: var(--ql-text-strong);
  text-decoration: none;
  border-block-end: 1px solid rgb(var(--ql-white-rgb) / .07);
  -webkit-tap-highlight-color: transparent;
}
.ql-sheet__link > span { flex: 1 1 auto; min-inline-size: 0; }

.ql-sheet__go {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  color: var(--ql-text-subtle);
  transition: transform var(--ql-d-fast) var(--ql-ease-out), color var(--ql-d-fast) var(--ql-ease);
}
.ql-sheet__link .ql-sheet__go { inline-size: 20px; block-size: 20px; }
.ql-sheet__div:active .ql-sheet__go,
.ql-sheet__link:active .ql-sheet__go { color: var(--ql-text-strong); transform: translateX(3px); }
.ql-sheet__link:active .ql-sheet__go--out { transform: translate(2px, -2px); }

.ql-sheet [data-ql-sheet-item] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity var(--ql-d-slow) var(--ql-ease-out),
              transform var(--ql-d-slower) var(--ql-ease-out);
  transition-delay: var(--ql-sheet-delay, 0ms);
}
.ql-sheet.is-open [data-ql-sheet-item] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ql-sheet [data-ql-sheet-item] { opacity: 1; transform: none; transition: none; }
}

/* Site footer */

.ql-footer--site {
  position: relative;
  margin-block-start: 0;
  padding-block-end: 0;
  background: var(--ql-plate-floor);
  box-shadow:
      inset 0 1px 0 0 var(--ql-spec-top),
      inset 0 -1px 0 0 rgb(var(--ql-black-rgb) / .8);
  overflow: clip;
}

.ql-footer--site::before {
  content: "";
  position: absolute;
  inset-block-end: -18%;
  inset-inline-start: -6%;
  inline-size: min(560px, 46%);
  aspect-ratio: 428.6 / 500;
  background: url("../Images/Qlynic-mark.svg") left bottom / contain no-repeat;
  opacity: .055;
  pointer-events: none;
}
@media (max-width: 899px) { .ql-footer--site::before { inline-size: 70%; opacity: .045; } }

.ql-footer__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: var(--ql-sp-10);
  align-items: start;
  padding-block-end: var(--ql-sp-10);

  border-block-end: 1px solid rgb(var(--ql-black-rgb) / .85);
  box-shadow: 0 1px 0 0 var(--ql-spec-top);
}
@media (max-width: 899px) { .ql-footer__lead { grid-template-columns: minmax(0, 1fr); gap: var(--ql-sp-10); } }

.ql-footer__divs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ql-sp-5);
  padding-block: var(--ql-sp-10);
}
.ql-footer__divs .ql-div {
  position: relative;
  gap: var(--ql-sp-5);
  padding: var(--ql-sp-8) var(--ql-sp-7) var(--ql-sp-7);
  border-radius: var(--ql-r-md);
  background: var(--ql-plate);
  box-shadow: var(--ql-lift-2);
  overflow: hidden;
  transition: transform var(--ql-d-base) var(--ql-ease-out),
              box-shadow var(--ql-d-base) var(--ql-ease-out);
}

.ql-footer__divs .ql-div::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;

  inline-size: 100%;
  border-radius: 0;
  block-size: 2px;
  background: var(--ql-ink-400);
  opacity: 1;
  transition: opacity var(--ql-d-base) var(--ql-ease),
              background-color var(--ql-d-base) var(--ql-ease),
              block-size var(--ql-d-base) var(--ql-ease-out);
}
.ql-footer__divs .ql-div:hover::before {
  opacity: 1;
  block-size: 3px;
  background: var(--div-stop, var(--ql-accent-text));
  box-shadow: 0 0 18px 0 var(--div-stop, var(--ql-accent-text));
}
.ql-footer__divs .ql-div:hover {
  transform: translateY(-2px);
  box-shadow: var(--ql-lift-3);
}

.ql-footer__divs .ql-div .ql-div__body { flex: 1 1 auto; font-size: var(--ql-fs-xs); }
.ql-footer__divs .ql-div .ql-div__more { font-size: var(--ql-fs-2xs); }
@media (max-width: 1023px) { .ql-footer__divs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .ql-footer__divs { grid-template-columns: minmax(0, 1fr); } }

.ql-footer__say {
  margin-block-start: var(--ql-sp-8);
  max-inline-size: 22ch;
  font-size: var(--ql-fs-xl);
  font-weight: var(--ql-fw-semibold);
  line-height: var(--ql-lh-head);
  letter-spacing: var(--ql-tr-head);
  color: var(--ql-text-strong);
  text-wrap: balance;
}
@media (max-width: 1023px) { .ql-footer__say { max-inline-size: 30ch; } }

.ql-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: var(--ql-sp-10) var(--ql-sp-12);
  padding-block: var(--ql-sp-10);
  border-block-start: 1px solid rgb(var(--ql-black-rgb) / .85);
  box-shadow: 0 -1px 0 0 var(--ql-spec-top) inset;
}
@media (max-width: 1023px) {
  .ql-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ql-sp-9); }
}
.ql-footer__ident { min-inline-size: 0; }

.ql-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ql-sp-9) var(--ql-sp-8);
}
@media (max-width: 899px) { .ql-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .ql-footer__cols { grid-template-columns: minmax(0, 1fr); } }

.ql-sheet__tail { padding-block-start: var(--ql-sp-4); }
.ql-sheet__tail address {
  font-style: normal;
  font-size: var(--ql-fs-sm);
  line-height: 1.75;
  color: var(--ql-text-muted);
}
.ql-sheet__quiet {
  display: inline-block;
  margin-block-start: var(--ql-sp-5);
  font-size: var(--ql-fs-sm);
  color: var(--ql-text-body);
  text-decoration: none;
}
.ql-sheet__quiet:hover { color: var(--ql-accent-text); }

.ql-signature {
  block-size: 2px;
  inline-size: 100%;
  background: var(--ql-grad-sweep);
  opacity: .85;
}

/* 19 · Subscribe band */

.ql-news {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--ql-sp-10) var(--ql-sp-12);
  padding: clamp(2.5rem, 1.3rem + 4.6vw, 4.25rem) clamp(1.75rem, 0.6rem + 4.2vw, 4rem);
  border: 1px solid transparent;
  border-radius: var(--ql-r-2xl);
  overflow: clip;

  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge) border-box;
}

.ql-news::before { display: none;
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: -20%;
  inline-size: 68%;
  aspect-ratio: 1;
  transform: translateY(-50%);

  background: radial-gradient(closest-side,
      rgb(var(--ql-accent-rgb) / .30),
      rgb(var(--ql-accent-rgb) / .10) 40%,
      rgb(var(--ql-accent-rgb) / 0) 66%);
  pointer-events: none;
}

.ql-news::after { display: none;
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: -14%;
  inline-size: 54%;
  aspect-ratio: 1;
  transform: translateY(50%);
  background: radial-gradient(closest-side,
      rgb(var(--ql-accent-rgb) / .16), rgb(var(--ql-accent-rgb) / 0) 70%);
  pointer-events: none;
}

.ql-news > *:not(.ql-fx):not(.ql-news__corner) { position: relative; z-index: 1; }
.ql-news__copy { min-inline-size: 0; }

.ql-news__corner {
  position: absolute;
  inset-block: -30% -34%;
  inset-inline-end: -6%;
  inline-size: 46%;
  background: url("../Images/Qlynic-mark.svg") right center / contain no-repeat;

  opacity: .16;
  filter: grayscale(1);

  mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .25) 38%, #000 82%),
    linear-gradient(transparent 0%, #000 26%, #000 74%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .25) 38%, #000 82%),
    linear-gradient(transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  pointer-events: none;
}

.ql-news__corner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgb(var(--ql-black-rgb) / 0) 0%,
      rgb(var(--ql-black-rgb) / .18) 30%,
      rgb(var(--ql-black-rgb) / .82) 50%,
      rgb(var(--ql-black-rgb) / .90) 74%,
      rgb(var(--ql-black-rgb) / .86) 100%);
}
@media (max-width: 1239px) {
  .ql-news__corner { inline-size: 40%; inset-inline-end: -12%; }
}
@media (max-width: 1079px) {

  .ql-news__corner { display: none; }
}

.ql-news__eyebrow {
  display: block;
  font-size: var(--ql-fs-3xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-div-1);
  margin-block-end: var(--ql-sp-5);
}

.ql-news__title {
  font-size: var(--ql-fs-2xl);
  line-height: var(--ql-lh-head);
  letter-spacing: var(--ql-tr-head);
  color: var(--ql-text-strong);
  margin: 0;
  text-wrap: balance;
}

.ql-news__sub {
  margin-block-start: var(--ql-sp-5);

  max-inline-size: 64ch;
  font-size: var(--ql-fs-sm);
  line-height: var(--ql-lh-body);
  color: var(--ql-text-muted);
}

/* State stack */
.ql-news__states {
  position: relative;
  display: grid;
  min-inline-size: 0;
}
.ql-news__state {
  grid-area: 1 / 1;
  min-inline-size: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.985);
  filter: blur(6px);
  transition: opacity var(--ql-d-base) var(--ql-ease),
              transform var(--ql-d-slow) var(--ql-ease-out),
              filter var(--ql-d-base) var(--ql-ease),
              visibility 0s linear var(--ql-d-base);
}
.ql-news__state.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition-delay: 0s, 0s, 0s, 0s;
}

/* Field row */
.ql-news__row {
  display: flex;
  gap: var(--ql-sp-5);
  align-items: stretch;
}
.ql-news__row .ql-input-wrap { flex: 1 1 auto; min-inline-size: 0; }

.ql-news__row .ql-btn { flex: 0 0 auto; --btn-h: var(--ql-control-h); }

@media (max-width: 479px) {
  .ql-news__row { flex-direction: column; }
  .ql-news__row .ql-btn { inline-size: 100%; }
}

/* Slit */
.ql-news__slit {
  --slit-w: 120px;
  position: relative;
  block-size: 2px;
  inline-size: 100%;
  margin-block-start: var(--ql-sp-7);
  overflow: hidden;
}
.ql-news__slit::before,
.ql-news__slit::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: var(--slit-w);
  transform: translateX(-50%);
  transition: inline-size var(--ql-d-slower) var(--ql-ease-out),
              opacity var(--ql-d-slow) var(--ql-ease);
}

.ql-news__slit::before {
  background: linear-gradient(90deg,
      rgb(var(--ql-white-rgb) / 0),
      rgb(var(--ql-white-rgb) / .92) 50%,
      rgb(var(--ql-white-rgb) / 0));
  box-shadow: 0 0 12px 1px rgb(var(--ql-white-rgb) / .28);
}

.ql-news__slit::after {
  background: var(--ql-grad-sweep);
  opacity: 0;
}
.ql-news.is-done .ql-news__slit::after {
  box-shadow: 0 0 22px 2px rgb(var(--ql-accent-rgb) / .22);
}
.ql-news:focus-within .ql-news__slit { --slit-w: 46%; }
.ql-news.is-busy   .ql-news__slit { --slit-w: 70%; }
.ql-news.is-done   .ql-news__slit { --slit-w: 100%; }
.ql-news.is-done   .ql-news__slit::after  { opacity: 1; }
.ql-news.is-done   .ql-news__slit::before { opacity: 0; }

.ql-news__fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ql-sp-2) var(--ql-sp-5);
  margin-block-start: var(--ql-sp-5);
  font-size: var(--ql-fs-3xs);
  line-height: 1.65;
  color: var(--ql-text-muted);
}
.ql-news__fine > span { white-space: nowrap; }
.ql-news__fine > span + span { display: flex; align-items: center; gap: var(--ql-sp-5); }
.ql-news__fine > span + span::before {
  content: "";
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

@media (max-width: 599px) {
  .ql-news__fine { flex-direction: column; align-items: flex-start; gap: var(--ql-sp-2); }
  .ql-news__fine > span + span { gap: 0; }
  .ql-news__fine > span + span::before { display: none; }
  .ql-news__fine > span { white-space: normal; }
}

/* Confirmed state */
.ql-news__done {
  display: flex;
  gap: var(--ql-sp-6);
  align-items: flex-start;
}
.ql-news__done img { flex: 0 0 auto; inline-size: 34px; block-size: auto; }
.ql-news__doneTitle {
  font-size: var(--ql-fs-lg);
  line-height: var(--ql-lh-head);
  color: var(--ql-text-strong);
  margin: 0;
}
.ql-news__doneBody {
  margin-block-start: var(--ql-sp-4);
  font-size: var(--ql-fs-sm);
  line-height: var(--ql-lh-body);

  color: var(--ql-text-body);
  max-inline-size: 44ch;
}

.ql-news__hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ql-news .ql-error { margin-block-start: var(--ql-sp-5); }

@media (max-width: 1079px) {
  .ql-news {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--ql-sp-10) var(--ql-sp-9);
  }
  .ql-news::before { inline-size: 92%; inset-block-start: -44%; }
  .ql-news__sub { max-inline-size: 60ch; }
}
@media (max-width: 479px) {
  .ql-news { padding: var(--ql-sp-9) var(--ql-sp-7); border-radius: var(--ql-r-xl); }
  .ql-news__title { font-size: var(--ql-fs-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-news__state,
  .ql-news__slit::before,
  .ql-news__slit::after { transition-duration: 1ms; }
}

.ql-footer__news {
  position: relative;
  padding-block: var(--ql-sp-10) 0;
}

.ql-news { box-shadow: var(--ql-lift-3); }

/* 20 · Touch */

@media (hover: none) {
  .ql-btn--primary:hover,
  .ql-btn--spectral:hover,
  .ql-btn--danger:hover,
  .ql-btn--secondary:hover,
  .ql-btn--outline:hover,
  .ql-btn--ghost:hover,
  .ql-btn--solid:hover        { transform: none; }

  .ql-div:hover,
  .ql-card--interactive:hover,
  .ql-footer__divs .ql-div:hover,
  .ql-mega__div:hover,
  .ql-mega__feature:hover     { transform: none; }
  .ql-nav__item:hover .ql-nav__out { transform: none; }

  .ql-logo:hover .ql-logo__mark { transform: none; filter: none; }

  .ql-div:hover::before       { inline-size: 26px; box-shadow: none; }
  .ql-footer__divs .ql-div:hover::before { inline-size: 100%; block-size: 2px; }

  .ql-btn:active              { transform: translateY(1px); }
}

@media (pointer: coarse) {
  .ql-sheet__body,
  .ql-select__list,
  .ql-table-wrap { overscroll-behavior: contain; }
}

/* 21 · Account menu */

:root {
  --ql-icon-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75'/%3E%3C/svg%3E");
}

.ql-user { position: relative; display: inline-flex; }

/* Trigger */
.ql-user__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-2);
  padding: 4px 10px 4px 4px;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--ql-white-rgb) / .04);
  color: var(--ql-text-body);
  font: inherit;
  font-size: var(--ql-fs-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ql-d-fast) var(--ql-ease),
              color var(--ql-d-fast) var(--ql-ease),
              box-shadow var(--ql-d-fast) var(--ql-ease);
}
.ql-user__trigger:hover { background: rgb(var(--ql-white-rgb) / .08); color: var(--ql-text); }
.ql-user__trigger:focus-visible { outline: 2px solid var(--ql-accent-text); outline-offset: 2px; }
.ql-user__trigger[aria-expanded="true"] { background: rgb(var(--ql-white-rgb) / .10); color: var(--ql-text); }

.ql-user__name {
  max-inline-size: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ql-user__chev {
  inline-size: 14px;
  block-size: 14px;
  opacity: .6;
  transition: transform var(--ql-d-fast) var(--ql-ease), opacity var(--ql-d-fast) var(--ql-ease);
}
.ql-user__trigger[aria-expanded="true"] .ql-user__chev { transform: rotate(180deg); opacity: 1; }

/* Panel */
.ql-user__panel {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 60;
  inline-size: max-content;
  min-inline-size: 264px;
  max-inline-size: min(320px, calc(100vw - 32px));
  padding: var(--ql-sp-2);
  border-radius: var(--ql-r-lg);
  background: var(--ql-overlay);
  box-shadow: var(--ql-lift-3), inset 0 1px 0 rgb(var(--ql-white-rgb) / .06);
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  transform-origin: 100% 0;
  pointer-events: none;
  transition: opacity 160ms var(--ql-ease), transform 160ms var(--ql-ease);
}
.ql-user__panel[hidden] { display: none; }
.ql-user__panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-duration: 220ms;
}

/* Identity */
.ql-user__who {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-3);
  padding: var(--ql-sp-3) var(--ql-sp-3) var(--ql-sp-4);
  margin-block-end: var(--ql-sp-2);
  border-block-end: 1px solid rgb(var(--ql-white-rgb) / .07);
}
.ql-user__id { display: grid; gap: 2px; min-inline-size: 0; }
.ql-user__id strong {
  font-size: var(--ql-fs-sm);
  font-weight: 650;
  color: var(--ql-text);
}
.ql-user__id small {
  font-size: var(--ql-fs-xs);
  color: var(--ql-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rows */
.ql-user__item {
  display: flex;

  align-items: flex-start;
  gap: var(--ql-sp-3);
  padding: var(--ql-sp-3);
  border-radius: var(--ql-r-md);
  color: var(--ql-text-body);
  font-size: var(--ql-fs-sm);
  font-weight: 550;
  text-decoration: none;
  transition: background var(--ql-d-fast) var(--ql-ease), color var(--ql-d-fast) var(--ql-ease);
}

.ql-user__item svg,
.ql-user__item--out::before {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  margin-block-start: 2.5px;
  opacity: .72;
}
.ql-user__item svg { opacity: .72; }
.ql-user__item span { display: grid; gap: 1px; min-inline-size: 0; }
.ql-user__item small {
  font-size: var(--ql-fs-xs);
  font-weight: 450;
  color: var(--ql-text-subtle);
}
.ql-user__item:hover,
.ql-user__item:focus-visible {
  background: rgb(var(--ql-white-rgb) / .06);
  color: var(--ql-text);
  outline: none;
}
.ql-user__item:focus-visible { box-shadow: inset 0 0 0 1px var(--ql-accent-text); }
.ql-user__item:hover svg, .ql-user__item:focus-visible svg { opacity: 1; }

.ql-user__arrow {
  margin-inline-start: auto;
  inline-size: 14px;
  block-size: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--ql-d-fast) var(--ql-ease), transform var(--ql-d-fast) var(--ql-ease);
}
.ql-user__item:hover .ql-user__arrow,
.ql-user__item:focus-visible .ql-user__arrow { opacity: .55; transform: translateX(0); }

.ql-user__item--go svg { color: var(--ql-accent-text); opacity: 1; }
/* Sign-out row */
.ql-user__item--out { color: var(--ql-text-muted); }
.ql-user__item--out:hover { color: var(--ql-text); }
.ql-user__item--out::before {
  content: '';
  display: block;
  background: currentColor;
  -webkit-mask: var(--ql-icon-out) center / contain no-repeat;
          mask: var(--ql-icon-out) center / contain no-repeat;
  transition: opacity var(--ql-d-fast) var(--ql-ease);
}
.ql-user__item--out:hover::before,
.ql-user__item--out:focus-visible::before { opacity: 1; }

.ql-user__rule {
  display: block;
  block-size: 1px;
  margin: var(--ql-sp-2) var(--ql-sp-3);
  background: rgb(var(--ql-white-rgb) / .07);
}

/* Stagger */
.ql-user__panel.is-open > * {
  animation: ql-user-row 260ms var(--ql-ease) backwards;
}
.ql-user__panel.is-open > :nth-child(1) { animation-delay: 30ms; }
.ql-user__panel.is-open > :nth-child(2) { animation-delay: 56ms; }
.ql-user__panel.is-open > :nth-child(3) { animation-delay: 82ms; }
.ql-user__panel.is-open > :nth-child(4) { animation-delay: 108ms; }
.ql-user__panel.is-open > :nth-child(5) { animation-delay: 134ms; }
@keyframes ql-user-row {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ql-user__panel,
  .ql-user__panel.is-open,
  .ql-user__panel.is-open > * { transition-duration: 1ms; animation: none; }
  .ql-user__panel { transform: none; }
  .ql-user__chev { transition: none; }
}

@media (hover: none) {
  .ql-user__trigger:hover { background: rgb(var(--ql-white-rgb) / .04); color: var(--ql-text-body); }
  .ql-user__item:hover { background: transparent; color: var(--ql-text-body); }
  .ql-user__item:hover .ql-user__arrow { opacity: 0; transform: translateX(-4px); }
}

/* 22 · Audio transport */

.ql-trans {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgb(var(--ql-white-rgb) / calc(.03 + var(--ql-sig-low, 0) * .035));
  transform: translateY(calc(var(--ql-sig-low, 0) * -1px));
  transition: background var(--ql-d-fast) var(--ql-ease);
}
.ql-trans[hidden] { display: none; }

.ql-trans__btn {
  display: inline-grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ql-text-subtle);
  cursor: pointer;
  transition: color var(--ql-d-fast) var(--ql-ease),
              background var(--ql-d-fast) var(--ql-ease),
              transform var(--ql-d-fast) var(--ql-ease);
}
.ql-trans__btn svg { inline-size: 13px; block-size: 13px; }
.ql-trans__btn:hover {
  color: var(--ql-text);
  background: rgb(var(--ql-white-rgb) / .08);
}
.ql-trans__btn:active { transform: scale(.9); }
.ql-trans__btn:focus-visible {
  outline: 2px solid var(--ql-accent-text);
  outline-offset: 1px;
  color: var(--ql-text);
}

.ql-sound__label[data-ql-track-name] {
  max-inline-size: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 559px) {
  .ql-trans__btn { display: none; }
  .ql-trans { background: transparent; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ql-trans { transform: none; transition: none; }
  .ql-trans__btn { transition: none; }
}

@media (hover: none) {
  .ql-trans__btn:hover { color: var(--ql-text-subtle); background: transparent; }
}

/* Transport in the phone menu */
.ql-trans--sheet {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--ql-sp-2);
  padding: var(--ql-sp-2);
  background: rgb(var(--ql-white-rgb) / .04);
  transform: none;
}
.ql-trans--sheet .ql-trans__btn {
  display: inline-grid;
  inline-size: 44px;
  block-size: 44px;
  background: rgb(var(--ql-white-rgb) / .05);
}
.ql-trans--sheet .ql-trans__btn svg { inline-size: 16px; block-size: 16px; }
.ql-trans__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ql-sp-2);
  min-block-size: 44px;
  padding: 0 var(--ql-sp-3);
  border: 0;
  border-radius: 999px;
  background: rgb(var(--ql-white-rgb) / .06);
  color: var(--ql-text-body);
  font: inherit;
  font-size: var(--ql-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ql-d-fast) var(--ql-ease), color var(--ql-d-fast) var(--ql-ease);
}
.ql-trans__play:hover { background: rgb(var(--ql-white-rgb) / .10); color: var(--ql-text); }
.ql-trans__play:focus-visible { outline: 2px solid var(--ql-accent-text); outline-offset: 2px; }
.ql-trans__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 23 · Chrome in black glass */

.ql-header .ql-trans {
  gap: 2px;
  box-sizing: border-box;
  block-size: 36px;
  padding: 3px;
  background: rgb(var(--ql-white-rgb) / .035);
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .085);
  transform: none;
  transition: background-color var(--ql-d-fast) var(--ql-ease), box-shadow var(--ql-d-base) var(--ql-ease);
}

.ql-header.is-live .ql-trans {
  background: rgb(var(--ql-white-rgb) / calc(.035 + var(--ql-sig-low, 0) * .035));
  transform: translateY(calc(var(--ql-sig-low, 0) * -1px));
}
.ql-header .ql-trans:has(.ql-sound.is-on) { box-shadow: inset 0 0 0 1px rgb(var(--ql-accent-text-rgb) / .24); }
.ql-header .ql-trans__btn { inline-size: 30px; block-size: 30px; color: var(--ql-text-subtle); }
.ql-header .ql-trans__btn:hover { color: var(--ql-text-strong); background: rgb(var(--ql-white-rgb) / .08); }
.ql-header .ql-trans .ql-sound {
  box-sizing: border-box;
  block-size: 30px;
  padding: 0 12px;
  gap: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ql-text-muted);
}
.ql-header .ql-trans .ql-sound:hover { color: var(--ql-text-strong); background: rgb(var(--ql-white-rgb) / .06); box-shadow: none; }
.ql-header .ql-trans .ql-sound.is-on {
  color: var(--ql-accent-text);
  background: rgb(var(--ql-accent-rgb) / .16);
  box-shadow: inset 0 0 0 1px rgb(var(--ql-accent-text-rgb) / .32);
}
.ql-header .ql-trans .ql-sound:focus-visible { box-shadow: var(--ql-ring); border-radius: 999px; }
@media (max-width: 1279px) {
  .ql-header .ql-trans .ql-sound__label { display: none; }
  .ql-header .ql-trans .ql-sound { padding: 0 10px; }
}

.ql-sheet .ql-trans--sheet {
  padding: 4px;
  background: #111113;
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .07);
}
.ql-sheet .ql-trans--sheet .ql-trans__btn { color: var(--ql-text-body); background: rgb(var(--ql-white-rgb) / .05); }
.ql-sheet .ql-trans--sheet .ql-trans__play { color: var(--ql-text); background: rgb(var(--ql-white-rgb) / .06); }

.ql-header .ql-user__trigger {
  box-sizing: border-box;
  block-size: 36px;
  padding: 3px 12px 3px 3px;
  gap: 8px;
  background: rgb(var(--ql-white-rgb) / .045);
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .09);
  color: var(--ql-text);
}
.ql-header .ql-user__trigger .ql-avatar--sm { inline-size: 30px; block-size: 30px; }
.ql-header .ql-user__trigger:hover { background: rgb(var(--ql-white-rgb) / .08); }
.ql-header .ql-user__trigger[aria-expanded="true"] {
  background: rgb(var(--ql-white-rgb) / .10);
  box-shadow: inset 0 0 0 1px rgb(var(--ql-white-rgb) / .16);
}
.ql-header .ql-user__panel {
  inset-block-start: calc(100% + 14px);
  background: #0E0E10;
  box-shadow:
      inset 0 0 0 1px rgb(var(--ql-white-rgb) / .09),
      0 30px 64px -26px rgb(var(--ql-black-rgb) / .95);
}

@media (hover: none) {
  .ql-header .ql-trans__btn:hover { color: var(--ql-text-subtle); background: transparent; }
  .ql-header .ql-user__trigger:hover { background: rgb(var(--ql-white-rgb) / .045); }
}

/* 24 · Page departure */

.ql-depart {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ql-z-header) - 1);
  background: linear-gradient(180deg, rgb(5 5 6 / .40), rgb(5 5 6 / .62));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ql-d-base) var(--ql-ease), visibility 0s linear var(--ql-d-base);
}
html.is-departing .ql-depart {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--ql-d-slower) var(--ql-ease) .14s, visibility 0s linear 0s;
}

.ql-depart__spark {
  position: fixed;
  left: 0;
  top: 0;
  z-index: calc(var(--ql-z-drawer) + 10);
  inline-size: 44px;
  block-size: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--ql-white-rgb) / .95) 0 7%, rgb(var(--ql-accent-text-rgb) / .55) 22%, rgb(var(--ql-accent-text-rgb) / 0) 62%);
  box-shadow: 0 0 0 1.5px rgb(var(--ql-accent-text-rgb) / .6);
  opacity: 0;
  pointer-events: none;
}
html.is-departing .ql-depart__spark { animation: ql-spark .7s var(--ql-ease-out) forwards; }
@keyframes ql-spark {
  0%   { opacity: 1; transform: scale(.25); }
  100% { opacity: 0; transform: scale(2.6); }
}

.ql-rail__go {
  position: absolute;
  inset-inline: 0;
  inset-block: -10px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ql-rail__go::before,
.ql-rail__go::after {
  content: "";
  position: absolute;
  inline-size: 100%;
}
.ql-rail__go::before {
  inset-inline-start: 0;
  inset-block: 10px;
  background: linear-gradient(90deg, rgb(var(--ql-white-rgb) / .28), rgb(var(--ql-white-rgb) / .6));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.ql-rail__go::after {
  inset-inline-start: -100%;
  inset-block: 4px;
  background: radial-gradient(64px 7px at 100% 50%, rgb(var(--ql-white-rgb) / .95), rgb(var(--ql-white-rgb) / 0));
  transform: translateX(0);
}
html.is-departing .ql-rail__go { opacity: 1; }

html.is-departing .ql-rail__go::before { animation: ql-go-fill 9s linear forwards; }
html.is-departing .ql-rail__go::after  { animation: ql-go-front 9s linear forwards; }
@keyframes ql-go-fill {
  0%    { transform: scaleX(0);   animation-timing-function: cubic-bezier(.3, .7, .5, 1); }
  3.3%  { transform: scaleX(.3);  animation-timing-function: ease-out; }
  11%   { transform: scaleX(.58); animation-timing-function: ease-out; }
  22%   { transform: scaleX(.73); animation-timing-function: ease-out; }
  44%   { transform: scaleX(.84); animation-timing-function: ease-out; }
  100%  { transform: scaleX(.94); }
}
@keyframes ql-go-front {
  0%    { transform: translateX(0);   animation-timing-function: cubic-bezier(.3, .7, .5, 1); }
  3.3%  { transform: translateX(30%); animation-timing-function: ease-out; }
  11%   { transform: translateX(58%); animation-timing-function: ease-out; }
  22%   { transform: translateX(73%); animation-timing-function: ease-out; }
  44%   { transform: translateX(84%); animation-timing-function: ease-out; }
  100%  { transform: translateX(94%); }
}

html.is-departing,
html.is-departing * { cursor: progress; }

html.is-departing .ql-topbar.is-on { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.is-departing .ql-depart__spark { animation: none; }
  html.is-departing .ql-rail__go::before { animation: none; transform: scaleX(.5); }
  html.is-departing .ql-rail__go::after  { animation: none; transform: translateX(50%); }
}
@media print {
  .ql-depart, .ql-depart__spark, .ql-rail__go { display: none; }
}

/* 25 · Qlynic chrome — the menu is the mark */

/* The quadrant glyph: a 2x2 marker showing which corner of the Q a section
   belongs to. Set --div-stop on an ancestor. */
.ql-quad {
  display: inline-grid;
  grid-template-columns: repeat(2, 5px);
  grid-auto-rows: 5px;
  gap: 2px;
  flex: none;
}
.ql-quad i { display: block; border-radius: 1.5px; background: rgb(var(--ql-white-rgb) / .16); }
.ql-quad[data-q="tl"] i:nth-child(1),
.ql-quad[data-q="tr"] i:nth-child(2),
.ql-quad[data-q="bl"] i:nth-child(3),
.ql-quad[data-q="br"] i:nth-child(4) {
  background: var(--div-stop, var(--ql-accent-text));
  box-shadow: 0 0 6px -1px var(--div-stop, var(--ql-accent-text));
}
.ql-mega__eyebrow:has(.ql-quad),
.ql-div__eyebrow:has(.ql-quad) { display: inline-flex; align-items: center; gap: 9px; }

/* Four plates placed where their colours sit in the mark, the platform card
   standing beside them. */
.ql-mega__grid--q { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.05fr); }
.ql-mega__grid--q .ql-mega__feature { grid-column: 3; grid-row: 1 / span 2; }
.ql-mega__grid--q .ql-mega__div {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ql-sp-7);
  min-block-size: 0;
}
.ql-mega__grid--q .ql-mega__icon { flex: none; }
.ql-mega__text {
  display: flex;
  flex-direction: column;
  gap: var(--ql-sp-3);
  flex: 1 1 auto;
  min-inline-size: 0;
}
.ql-mega__grid--q .ql-mega__more { margin-block-start: var(--ql-sp-4); }
@media (max-width: 1279px) {
  .ql-mega__grid--q { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-mega__grid--q .ql-mega__feature { grid-column: 1 / -1; grid-row: auto; }
}

/* The mark inside the platform card, dim at rest. Point at a plate and its
   corner of the Q lights; point at the card and the whole Q does. */
.ql-qmark {
  position: absolute;
  inset-block-start: var(--ql-sp-8);
  inset-inline-end: var(--ql-sp-8);
  inline-size: min(38%, 168px);
  aspect-ratio: 428.6 / 500;
  pointer-events: none;
}
.ql-qmark svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.ql-qmark__q {
  opacity: .16;
  transition: opacity var(--ql-d-slow) var(--ql-ease), filter var(--ql-d-slow) var(--ql-ease);
}
.ql-mega__feature:hover .ql-qmark__q,
.ql-mega__feature:focus-visible .ql-qmark__q { opacity: .92; }
.ql-mega__grid--q:has(.ql-mega__div[data-q="tl"]:is(:hover, :focus-visible)) .ql-qmark__q[data-q="tl"],
.ql-mega__grid--q:has(.ql-mega__div[data-q="tr"]:is(:hover, :focus-visible)) .ql-qmark__q[data-q="tr"],
.ql-mega__grid--q:has(.ql-mega__div[data-q="bl"]:is(:hover, :focus-visible)) .ql-qmark__q[data-q="bl"],
.ql-mega__grid--q:has(.ql-mega__div[data-q="br"]:is(:hover, :focus-visible)) .ql-qmark__q[data-q="br"] {
  opacity: 1;
  filter: drop-shadow(0 0 12px var(--glow, transparent));
}
.ql-mega__grid--q .ql-mega__feature .ql-mega__body { max-inline-size: 52ch; }
@media (max-width: 1279px) {
  .ql-mega__grid--q .ql-qmark { inline-size: auto; block-size: calc(100% - 2 * var(--ql-sp-8)); }
}
@media (prefers-reduced-motion: reduce) { .ql-qmark__q { transition: none; } }

/* The site assistant's launcher floats above every layer; while the phone
   menu is open it would sit on the menu's own buttons. */
body:has(.ql-sheet.is-open) .qc-launch { opacity: 0; visibility: hidden; pointer-events: none; }