@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

.iq40rr {
  --rr-bg: #0b0a07;
  --rr-panel: #1d140c;
  --rr-panel-2: #281c10;
  --rr-panel-3: #312213;
  --rr-line: #3d2e1f;
  --rr-line-strong: #664d34;
  --rr-text: #f2e9d8;
  --rr-muted: #b1a090;
  --rr-ice: #9dfa3f;
  --rr-ice-2: #5fcf12;
  --rr-good: #8de84f;
  --rr-bad: #ff7050;
  --rr-warn: #ffb347;
  --rr-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  --rr-display-font: 'Bangers', 'Impact', 'Arial Black', system-ui, sans-serif;
  --rr-label-font: Impact, 'Arial Black', system-ui, sans-serif;
  color: var(--rr-text);
  font-family: Barlow, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  outline: 0;
  /* Divi's per-module "Text" settings (e.g. .et_pb_text_0 { font-weight:300; font-size:18px })
     cascade by inheritance into every element in the widget that doesn't set its own font-weight,
     which is most of them, making the whole widget read thinner than the other Toolbox tools.
     A plain (non-!important) declaration here already wins over an inherited value, so this alone
     restores the normal baseline weight; headings need extra !important rules further down because
     Divi also targets h1-h4 directly (a same-specificity tie decided by source order). */
  font-weight: 400;
  font-variant: normal;
}

.iq40rr,
.iq40rr * {
  box-sizing: border-box;
}

/* Divi's HTML5 element reset (article/aside/footer/header/hgroup/nav/section {display:block})
   outranks the browser's default [hidden] rule because it is an author-level style. Restore
   the expected show/hide behaviour for every [hidden] element inside the widget explicitly. */
.iq40rr [hidden] {
  display: none !important;
}

.iq40rr button,
.iq40rr input {
  font: inherit;
}

.iq40rr button {
  cursor: pointer;
}

.iq40rr button:focus-visible,
.iq40rr input:focus-visible,
.iq40rr a:focus-visible,
.iq40rr [tabindex="-1"]:focus-visible {
  outline: 3px solid rgba(157, 250, 63, 0.72);
  outline-offset: 3px;
}

.iq40rr__shell {
  position: relative;
  max-width: 1600px;
  margin: 28px auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 0, rgba(95, 207, 18, 0.14), transparent 31%),
    linear-gradient(180deg, #191008 0%, #0f0a05 100%);
  border: 1px solid #342617;
  border-radius: 24px;
  box-shadow: var(--rr-shadow);
}

.iq40rr__shell::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(242, 233, 216, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 233, 216, 0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  mask-image: linear-gradient(to bottom, #000, transparent 58%);
  pointer-events: none;
}

.iq40rr__hero,
.iq40rr__main,
.iq40rr__footer {
  position: relative;
  z-index: 1;
}

.iq40rr__hero {
  padding: 44px 48px 30px;
  border-bottom: 1px solid var(--rr-line);
}

.iq40rr__eyebrow,
.iq40rr__kicker {
  color: var(--rr-ice);
  font-family: var(--rr-label-font);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.iq40rr__logo {
  display: block;
  /* Artwork is a wide 3:2 lockup (character + wordmark), not a square icon — constrain by
     height and let width follow so it isn't squashed into a square. */
  width: auto;
  height: 112px;
  max-width: 100%;
  margin: 0 0 10px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

.iq40rr__status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background: var(--rr-good);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--rr-good);
}

.iq40rr__hero h2 {
  max-width: 900px;
  margin: 12px 0 14px;
  color: #f2e9d8;
  font-family: var(--rr-display-font);
  /* Divi's per-module heading rule (.et_pb_text_0 h2 { font-weight:300; font-variant:small-caps;
     font-size:50px }) ties our selector on specificity, so without !important it can win on
     source order and render the title thin/small/small-caps instead of the bold poster look the
     other Toolbox tools (e.g. Mission Mixxa's H2 at 800 weight) use. */
  font-weight: 800 !important;
  font-variant: normal !important;
  font-size: clamp(38px, 5vw, 76px) !important;
  line-height: 1;
  letter-spacing: 0.02em !important;
}

.iq40rr__hero h2 span {
  color: var(--rr-ice);
}

.iq40rr__hero > p {
  max-width: 700px;
  margin: 0 0 24px;
  color: var(--rr-muted);
  font-size: 16px;
}

.iq40rr__release {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -10px 0 18px;
  color: #968370;
  font-size: 11px;
}

.iq40rr__release strong {
  padding: 4px 8px;
  color: #d9f5b8;
  border: 1px solid #4e3b28;
  border-radius: 999px;
}

.iq40rr__data-state {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 8px;
  margin: 0 0 13px;
  padding: 7px 10px;
  color: #c6b7a8;
  background: rgba(242, 233, 216, 0.025);
  border: 1px solid #473624;
  border-radius: 9px;
  font-size: 11px;
}

.iq40rr__data-state[hidden] {
  display: none;
}

.iq40rr__data-state [data-data-state-icon] {
  color: var(--rr-muted);
  font-size: 8px;
}

.iq40rr__data-state.is-online [data-data-state-icon] {
  color: var(--rr-good);
}

.iq40rr__data-state.is-warning [data-data-state-icon] {
  color: var(--rr-warn);
}

.iq40rr__data-state.is-error [data-data-state-icon] {
  color: var(--rr-bad);
}

.iq40rr__data-state button {
  min-height: 36px;
  padding: 7px 10px;
  color: var(--rr-ice);
  background: transparent;
  border: 1px solid #604a34;
  border-radius: 6px;
  font-size: 10px;
}

.iq40rr__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 780px;
}

.iq40rr__search {
  width: 100%;
  min-height: 54px;
  padding: 15px 48px 15px 46px;
  color: #f2e9d8;
  background: #22170c;
  border: 1px solid #4e3b28;
  border-radius: 14px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.iq40rr__search::placeholder {
  color: #938270;
}

.iq40rr__search:focus {
  border-color: var(--rr-ice-2);
  box-shadow: 0 0 0 3px rgba(95, 207, 18, 0.13);
}

.iq40rr__search-icon {
  position: absolute;
  left: 17px;
  color: var(--rr-ice);
  font-size: 22px;
  pointer-events: none;
}

.iq40rr__search-wrap > kbd {
  position: absolute;
  right: 14px;
  padding: 2px 8px;
  color: #af9e8e;
  background: #2d2013;
  border: 1px solid #554432;
  border-radius: 6px;
}

.iq40rr__quick,
.iq40rr__type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.iq40rr__quick {
  margin-top: 12px;
}

.iq40rr__quick button,
.iq40rr__type-filter button,
.iq40rr__ghost {
  min-height: 40px;
  padding: 7px 10px;
  color: #cfc2b6;
  background: transparent;
  border: 1px solid #453525;
  border-radius: 9px;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.iq40rr__quick button:hover,
.iq40rr__quick button.is-active,
.iq40rr__type-filter button:hover,
.iq40rr__type-filter button.is-active,
.iq40rr__ghost:hover {
  color: #f2e9d8;
  background: rgba(157, 250, 63, 0.07);
  border-color: var(--rr-ice-2);
}

.iq40rr__main {
  min-height: 430px;
  padding: 32px 48px 42px;
}

.iq40rr__section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.iq40rr__section-head h3 {
  margin: 4px 0 0;
  font-family: var(--rr-display-font);
  /* Same Divi tie as the hero h2 (.et_pb_text_0 h3 { font-size:35px; color:green !important }),
     plus its color rule carries !important, so beating it needs matching !important + higher
     specificity, not just !important alone. */
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  font-size: clamp(28px, 3vw, 36px) !important;
}

.iq40rr .iq40rr__section-head h3 {
  color: #f2e9d8 !important;
}

.iq40rr__result-count {
  display: inline-block;
  margin-top: 4px;
  color: #938270;
  font-size: 12px;
}

.iq40rr__type-filter {
  margin: 0 0 12px;
}

.iq40rr__type-filter button {
  padding: 8px 11px;
  font-size: 12px;
}

.iq40rr__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.iq40rr__categories button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  color: #b1a090;
  background: #1d140c;
  border: 1px solid #3b2c1c;
  border-radius: 999px;
}

.iq40rr__categories button small {
  display: inline-grid;
  min-width: 20px;
  min-height: 20px;
  place-items: center;
  padding: 0 5px;
  color: #938270;
  background: #2c1f12;
  border-radius: 999px;
  font-size: 10px;
}

.iq40rr__categories button:hover,
.iq40rr__categories button.is-active {
  color: #e8ffce;
  background: rgba(157, 250, 63, 0.1);
  border-color: var(--rr-ice-2);
}

.iq40rr__categories button.is-active small {
  color: #e8ffce;
  background: rgba(95, 207, 18, 0.22);
}

.iq40rr__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* The shell now goes as wide as the other Toolbox tools (up to 1600px); without a wider grid
   step the 189-card library would just stretch two columns very wide with a lot of empty space
   inside each card instead of using the room the way a dense reference tool should. */
@media (min-width: 1320px) {
  .iq40rr__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.iq40rr__rule {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  align-items: center;
  width: 100%;
  min-height: 122px;
  gap: 14px;
  padding: 17px;
  color: var(--rr-text);
  text-align: left;
  appearance: none;
  background: linear-gradient(145deg, #22170c, #19120a);
  border: 1px solid #3b2b1b;
  border-radius: 15px;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.iq40rr__rule:hover {
  background: linear-gradient(145deg, #2b1d0f, #1e140b);
  border-color: #785939;
  transform: translateY(-2px);
}

.iq40rr__rule.is-featured {
  border-color: rgba(95, 207, 18, 0.45);
  box-shadow: inset 0 0 0 1px rgba(95, 207, 18, 0.08);
}

.iq40rr__rule-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  background: #2b1d0f;
  border: 1px solid #4e3a27;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 800;
}

.iq40rr__rule-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.iq40rr__rule-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--rr-ice);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.iq40rr__kind {
  padding: 2px 5px;
  color: #c8b7a6;
  background: #2e2013;
  border: 1px solid #4a3825;
  border-radius: 5px;
  font-size: 8px;
  letter-spacing: 0.06em;
}

.iq40rr__kind.is-resolver {
  color: #d8ffb0;
  background: rgba(95, 207, 18, 0.11);
  border-color: rgba(95, 207, 18, 0.35);
}

.iq40rr__verified {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  margin-left: 2px;
  color: var(--rr-good);
  background: rgba(141, 232, 79, 0.12);
  border-radius: 50%;
  font-size: 9px;
}

.iq40rr__rule-body strong {
  margin: 4px 0 3px;
  color: #f2e9d8;
  font-size: 17px;
  line-height: 1.2;
}

.iq40rr__rule-body small {
  color: var(--rr-muted);
  font-size: 12px;
  line-height: 1.38;
}

.iq40rr__rule-side {
  color: #9d8a77;
  font-size: 21px;
  text-align: center;
}

.iq40rr__empty,
.iq40rr__error {
  grid-column: 1 / -1;
  padding: 34px;
  color: var(--rr-muted);
  text-align: center;
  border: 1px dashed #4e3b28;
  border-radius: 14px;
}

.iq40rr__empty strong,
.iq40rr__empty span,
.iq40rr__error strong,
.iq40rr__error span {
  display: block;
}

.iq40rr__empty button,
.iq40rr__error button {
  margin-top: 14px;
  padding: 8px 12px;
  color: #e8ffce;
  background: #312212;
  border: 1px solid #684d32;
  border-radius: 9px;
}

.iq40rr__loading {
  display: flex;
  grid-column: 1 / -1;
  justify-content: center;
  gap: 7px;
  padding: 40px;
}

.iq40rr__loading span {
  width: 8px;
  height: 8px;
  background: var(--rr-ice);
  border-radius: 50%;
  animation: iq40rrPulse 1s infinite alternate;
}

.iq40rr__loading span:nth-child(2) {
  animation-delay: 0.2s;
}

.iq40rr__loading span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes iq40rrPulse {
  to {
    opacity: 0.2;
    transform: translateY(-6px);
  }
}

.iq40rr__runner {
  max-width: 840px;
  margin: 0 auto;
}

.iq40rr__runner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.iq40rr__runner-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.iq40rr__back,
.iq40rr__share,
.iq40rr__favorite {
  min-height: 40px;
  padding: 8px 10px;
  color: #c6b7a8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
}

.iq40rr__back:hover,
.iq40rr__share:hover,
.iq40rr__favorite:hover {
  color: #f2e9d8;
  background: rgba(242, 233, 216, 0.035);
  border-color: #533f2b;
}

.iq40rr__share {
  font-size: 12px;
}

.iq40rr__favorite {
  min-width: 42px;
  color: var(--rr-warn);
  font-size: 24px;
  line-height: 1;
}

.iq40rr__progress {
  height: 3px;
  overflow: hidden;
  background: #2e2013;
  border-radius: 2px;
}

.iq40rr__progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--rr-ice-2), var(--rr-ice));
  transition: width 0.25s ease;
}

.iq40rr__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 10px;
  color: #92806e;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.iq40rr__path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 14px;
  color: #938270;
  font-size: 11px;
}

.iq40rr__path[hidden] {
  display: none;
}

.iq40rr__path button {
  padding: 3px 7px;
  color: #d7cbbe;
  background: #261a0f;
  border: 1px solid #473625;
  border-radius: 7px;
  font-size: 11px;
}

.iq40rr__path button:hover {
  color: #f2e9d8;
  border-color: var(--rr-ice-2);
}

.iq40rr__card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  background: linear-gradient(160deg, #251a0e, #191109);
  border: 1px solid #40301f;
  border-radius: 18px;
}

.iq40rr__card::before {
  position: absolute;
  top: -90px;
  right: -70px;
  width: 220px;
  height: 220px;
  background: rgba(95, 207, 18, 0.07);
  border-radius: 50%;
  content: "";
  filter: blur(4px);
  pointer-events: none;
}

.iq40rr__card-content,
.iq40rr__question-mark,
.iq40rr__result-mark {
  position: relative;
  z-index: 1;
}

.iq40rr__question-mark,
.iq40rr__result-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 20px;
  color: var(--rr-ice);
  background: #2e1e0f;
  border: 1px solid #5b432b;
  border-radius: 14px;
  font-size: 27px;
  font-weight: 950;
}

.iq40rr__result-mark.is-yes {
  color: var(--rr-good);
  background: rgba(141, 232, 79, 0.1);
  border-color: rgba(141, 232, 79, 0.45);
}

.iq40rr__result-mark.is-no {
  color: var(--rr-bad);
  background: rgba(255, 112, 80, 0.1);
  border-color: rgba(255, 112, 80, 0.45);
}

.iq40rr__result-mark.is-warning {
  color: var(--rr-warn);
  background: rgba(255, 179, 71, 0.1);
  border-color: rgba(255, 179, 71, 0.45);
}

.iq40rr__overline {
  color: var(--rr-ice);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.iq40rr__card h3 {
  margin: 7px 0 13px;
  font-family: var(--rr-display-font);
  font-weight: 700 !important;
  font-size: clamp(27px, 4vw, 42px) !important;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.iq40rr .iq40rr__card h3 {
  color: #f2e9d8 !important;
}

.iq40rr__text {
  max-width: 710px;
  color: #d7cbbe;
  font-size: 16px;
}

.iq40rr__text p:first-child,
.iq40rr__text ul:first-child,
.iq40rr__text ol:first-child {
  margin-top: 0;
}

.iq40rr__text p:last-child,
.iq40rr__text ul:last-child,
.iq40rr__text ol:last-child {
  margin-bottom: 0;
}

.iq40rr__text strong,
.iq40rr__text b {
  color: #f2e9d8;
}

.iq40rr__text ul,
.iq40rr__text ol {
  padding-left: 21px;
}

.iq40rr__text li {
  margin: 5px 0;
}

.iq40rr__text code {
  padding: 1px 5px;
  color: #e8ffce;
  background: #312212;
  border: 1px solid #4d3a26;
  border-radius: 5px;
  font-size: 0.92em;
}

.iq40rr__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  color: #c8b8a8;
  background: rgba(95, 207, 18, 0.06);
  border-left: 3px solid var(--rr-ice-2);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
}

.iq40rr__answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.iq40rr__answer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 12px;
  padding: 13px 15px;
  color: #f2e9d8;
  text-align: left;
  background: #2b1e10;
  border: 1px solid #543f29;
  border-radius: 12px;
  font-weight: 800;
}

.iq40rr__answer:hover {
  background: #362413;
  border-color: var(--rr-ice-2);
}

.iq40rr__answer.is-yes {
  border-color: rgba(141, 232, 79, 0.35);
}

.iq40rr__answer.is-no {
  border-color: rgba(255, 112, 80, 0.3);
}

.iq40rr__answer.is-warning {
  border-color: rgba(255, 179, 71, 0.32);
}

.iq40rr__answer kbd {
  flex: 0 0 auto;
  padding: 1px 6px;
  color: #978470;
  border: 1px solid #533f2a;
  border-radius: 5px;
  font-weight: 500;
}

.iq40rr__restart {
  margin-top: 22px;
  padding: 10px 13px;
  color: #d2c5b8;
  background: transparent;
  border: 1px solid #543f29;
  border-radius: 10px;
}

.iq40rr__restart:hover {
  color: #f2e9d8;
  border-color: var(--rr-ice-2);
}

.iq40rr__source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
  padding-top: 17px;
  border-top: 1px solid #3c2c1d;
}

.iq40rr__source-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.iq40rr__source-info > span {
  color: #95816d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.iq40rr__source-info strong {
  color: #e8ded5;
  font-size: 13px;
}

.iq40rr__source-info small {
  color: #8a7867;
  font-size: 11px;
}

.iq40rr__source-links {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.iq40rr__source-links a {
  padding: 8px 11px;
  color: var(--rr-ice);
  text-decoration: none;
  border: 1px solid #5f4428;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.2;
}

.iq40rr__source-links a:hover {
  color: #f2e9d8;
  background: rgba(157, 250, 63, 0.06);
  border-color: var(--rr-ice-2);
}

.iq40rr__footer {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 17px 48px;
  color: #81705e;
  border-top: 1px solid var(--rr-line);
  font-size: 10px;
}

.iq40rr__toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  max-width: min(420px, calc(100vw - 40px));
  padding: 11px 14px;
  color: #f1ffe0;
  background: #2d1f11;
  border: 1px solid #765839;
  border-radius: 10px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.iq40rr__toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.iq40rr__noscript {
  max-width: 1080px;
  margin: 10px auto;
  padding: 12px;
  color: #4c1010;
  background: #f7ecc9;
  border: 1px solid #cdb984;
  border-radius: 8px;
}

@media (max-width: 760px) {
  .iq40rr__shell {
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .iq40rr__hero {
    padding: 28px 20px 22px;
  }

  .iq40rr__release,
  .iq40rr__data-state {
    align-items: flex-start;
    flex-direction: column;
  }

  .iq40rr__data-state {
    width: 100%;
  }

  .iq40rr__main {
    padding: 24px 16px 30px;
  }

  .iq40rr__section-head {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .iq40rr__ghost {
    align-self: flex-start;
    min-height: 40px;
    padding: 9px 12px;
  }

  .iq40rr__grid,
  .iq40rr__answers {
    grid-template-columns: 1fr;
  }

  .iq40rr__rule {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    min-height: 116px;
    gap: 11px;
    padding: 14px;
  }

  .iq40rr__rule-icon {
    width: 40px;
    height: 40px;
  }

  .iq40rr__runner-actions {
    gap: 2px;
  }

  .iq40rr__share {
    font-size: 11px;
  }

  .iq40rr__card {
    padding: 22px;
  }

  .iq40rr__source {
    align-items: flex-start;
    flex-direction: column;
  }

  .iq40rr__source-links {
    justify-content: flex-start;
  }

  .iq40rr__footer {
    flex-direction: column;
    padding: 15px 20px;
  }
}

@media (max-width: 430px) {
  .iq40rr__hero h2 {
    font-size: 38px;
  }

  .iq40rr__quick button,
  .iq40rr__type-filter button {
    flex: 1 1 auto;
  }

  .iq40rr__search-wrap > kbd {
    display: none;
  }

  .iq40rr__search {
    padding-right: 16px;
  }

  .iq40rr__runner-top {
    align-items: flex-start;
  }

  .iq40rr__runner-actions {
    align-items: flex-end;
    flex-direction: column-reverse;
  }

  .iq40rr__share {
    min-height: 30px;
    padding: 4px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iq40rr *,
  .iq40rr *::before,
  .iq40rr *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .iq40rr__hero,
  .iq40rr__footer,
  .iq40rr__runner-top,
  .iq40rr__progress,
  .iq40rr__path,
  .iq40rr__restart {
    display: none !important;
  }

  .iq40rr__shell,
  .iq40rr__card {
    color: #000;
    background: #f2e9d8;
    border: 1px solid #a89a7c;
    box-shadow: none;
  }

  .iq40rr__main {
    padding: 0;
  }

  .iq40rr__card h3,
  .iq40rr__text strong,
  .iq40rr__source-info strong {
    color: #000;
  }

  .iq40rr__text,
  .iq40rr__source-info small {
    color: #1c1712;
  }
}