/* Z.E.R.O. Reading Tools v1.0.0 — isolated to individual posts. */
.zero-rt,
.zero-rt * { box-sizing: border-box; }

.zero-rt {
  --zr-text: #f1eff9;
  --zr-muted: #aea8c5;
  --zr-purple: #bc91ff;
  --zr-stroke: rgba(163, 116, 228, .39);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 17px 24px;
  width: 100%;
  margin: 26px 0 30px;
  padding: 17px 20px;
  border: 1px solid var(--zr-stroke);
  border-radius: 15px;
  background: linear-gradient(110deg, #071728 0%, #0b1327 46%, #19112b 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .23), inset 0 1px 0 rgba(231, 211, 255, .065);
  color: var(--zr-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
}

.zero-rt::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 330px 145px at 6% 0%, rgba(119, 72, 180, .16), transparent 78%),
              radial-gradient(ellipse 280px 150px at 100% 105%, rgba(118, 63, 178, .12), transparent 80%);
  pointer-events: none;
}

.zero-rt::after {
  content: '';
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204, 157, 255, .65), transparent);
  pointer-events: none;
}

.zero-rt__brand {
  display: flex;
  gap: 11px;
  align-items: center;
  flex: 0 0 auto;
}

.zero-rt__emblem {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1px solid rgba(187, 139, 244, .48);
  border-radius: 12px;
  color: #d5b4ff;
  background: rgba(137, 76, 225, .15);
  box-shadow: inset 0 0 15px rgba(126, 59, 210, .09);
}

.zero-rt__emblem svg,
.zero-rt__clock svg { width: 21px; height: 21px; }

.zero-rt__brand-lines { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.zero-rt__brand-lines strong { font-size: 14px; font-weight: 750; letter-spacing: .015em; color: #f9f6ff; }
.zero-rt__brand-lines > span { font-size: 9px; letter-spacing: .19em; color: #ba96e3; font-weight: 750; }

.zero-rt__readtime {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  color: #e0dbea;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.zero-rt__clock { display: inline-flex; color: #aa81d7; }

.zero-rt__controls { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.zero-rt__size { display: flex; align-items: center; gap: 10px; }
.zero-rt__size-label { white-space: nowrap; color: #c3afd9; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.zero-rt__size-buttons { display: flex; gap: 6px; }

.zero-rt .zero-rt__size-button,
.zero-rt .zero-rt__like {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 42px;
  height: 40px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid rgba(186, 148, 228, .30);
  border-radius: 8px;
  background: rgba(22, 22, 43, .87);
  box-shadow: none;
  color: #eae2f6;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.zero-rt .zero-rt__size-button span { font-size: .75em; vertical-align: 1px; }
.zero-rt .zero-rt__size-button:hover,
.zero-rt .zero-rt__like:hover:not(:disabled) { background: rgba(104, 65, 156, .37); border-color: rgba(196, 145, 255, .75); transform: translateY(-1px); }
.zero-rt .zero-rt__size-button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(150deg, #7647b0, #4e2c87);
  border-color: #ac79ea;
  box-shadow: 0 0 0 1px rgba(193, 142, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .13);
}
.zero-rt .zero-rt__size-button:focus-visible,
.zero-rt .zero-rt__like:focus-visible { outline: 2px solid #e1bcff; outline-offset: 3px; }
.zero-rt .zero-rt__like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  padding: 0 11px;
  font-size: 13px;
  white-space: nowrap;
  border-color: rgba(183, 132, 243, .61);
  background: linear-gradient(135deg, rgba(96, 54, 142, .56), rgba(55, 40, 95, .7));
}
.zero-rt .zero-rt__like[aria-pressed="true"] {
  border-color: #ad79ea;
  background: linear-gradient(125deg, #61388e, #422965);
  color: #fff;
  cursor: default;
}
.zero-rt .zero-rt__like:disabled { opacity: 1; }
.zero-rt__heart { width: 17px; height: 17px; color: #d5aaff; flex: 0 0 17px; }
.zero-rt__like[aria-pressed="true"] .zero-rt__heart { fill: #d1a5ff; }
.zero-rt__like-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .095);
}
.zero-rt__bump { animation: zero-rt-bump .35s ease; }
@keyframes zero-rt-bump { 50% { transform: scale(1.16); } }

.zero-rt__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 1020px) {
  .zero-rt { gap: 15px; }
  .zero-rt__readtime { margin-right: 0; }
  .zero-rt__controls { flex: 1 0 100%; justify-content: space-between; margin-left: 0; padding-top: 12px; border-top: 1px solid rgba(169, 132, 207, .14); }
}

@media (max-width: 530px) {
  .zero-rt { padding: 15px; border-radius: 13px; gap: 14px; }
  .zero-rt__brand-lines strong { font-size: 13px; }
  .zero-rt__brand-lines > span { font-size: 8px; letter-spacing: .11em; }
  .zero-rt__readtime { font-size: 12px; }
  .zero-rt__clock svg { width: 18px; height: 18px; }
  .zero-rt__controls { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
  .zero-rt__size { gap: 7px; }
  .zero-rt__size-label { display: none; }
  .zero-rt .zero-rt__size-button { min-width: 40px; padding: 0 8px; }
  .zero-rt .zero-rt__like { min-width: 98px; padding: 0 7px; }
}

@media (max-width: 355px) {
  .zero-rt__controls { grid-template-columns: 1fr; }
  .zero-rt__size-buttons { width: 100%; }
  .zero-rt .zero-rt__size-button { flex: 1; }
  .zero-rt .zero-rt__like { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .zero-rt .zero-rt__size-button,
  .zero-rt .zero-rt__like { transition: none; }
  .zero-rt__bump { animation: none; }
}

@media print { .zero-rt { display: none !important; } }