.tdv-flux,
.tdv-flux * {
  box-sizing: border-box;
}

.tdv-flux {
  --flux-ink: #0b2d35;
  --flux-ocean: #0c5963;
  --flux-teal: #0aa5a3;
  --flux-sun: #e8df27;
  --flux-paper: #f6f8f4;
  --flux-white: #ffffff;
  --flux-muted: #60757a;
  --flux-line: rgba(11, 45, 53, 0.13);
  width: min(1120px, 100%);
  margin: 34px auto;
  color: var(--flux-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.tdv-flux button,
.tdv-flux input {
  font: inherit;
}

.tdv-flux__hero {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  padding: clamp(34px, 7vw, 78px);
  border-radius: 30px 30px 0 0;
  color: #fff;
  background:
    radial-gradient(circle at 84% 22%, rgba(232, 223, 39, 0.22), transparent 25%),
    radial-gradient(circle at 74% 74%, rgba(10, 165, 163, 0.35), transparent 34%),
    linear-gradient(135deg, #071e24 0%, #0b3e48 58%, #0b6870 100%);
}

.tdv-flux__hero::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -115px;
  top: -125px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
}

.tdv-flux__eyebrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
}

.tdv-flux__eyebrow span {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--flux-sun);
  box-shadow: 0 0 0 6px rgba(232, 223, 39, .14);
}

.tdv-flux__hero h1 {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 7.3vw, 88px);
  line-height: .94;
  letter-spacing: -.045em;
}

.tdv-flux__hero h1 em {
  color: var(--flux-sun);
  font-weight: 400;
}

.tdv-flux__hero p {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 27px 0 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(17px, 2vw, 21px);
}

.tdv-flux__search-shell {
  position: relative;
  z-index: 3;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--flux-line);
  background: #fff;
  box-shadow: 0 22px 55px rgba(11,45,53,.10);
}

.tdv-flux__label {
  display: block;
  margin-bottom: 9px;
  color: var(--flux-ink);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .02em;
}

.tdv-flux__search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.tdv-flux__input {
  width: 100%;
  min-height: 58px;
  padding: 0 19px;
  border: 2px solid #d8e1df;
  border-radius: 12px;
  outline: none;
  color: var(--flux-ink);
  background: #fbfcfa;
  font-size: 17px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.tdv-flux__input:focus {
  border-color: var(--flux-teal);
  box-shadow: 0 0 0 4px rgba(10,165,163,.13);
}

.tdv-flux__submit {
  min-width: 180px;
  min-height: 58px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--flux-ink);
  font-weight: 850;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.tdv-flux__submit:hover {
  transform: translateY(-1px);
  background: var(--flux-ocean);
}

.tdv-flux__submit:disabled {
  opacity: .72;
  cursor: wait;
}

.tdv-flux__suggestions {
  position: absolute;
  z-index: 20;
  left: clamp(24px, 4vw, 42px);
  right: clamp(24px, 4vw, 232px);
  top: 128px;
  overflow: hidden;
  border: 1px solid var(--flux-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(11,45,53,.16);
}

.tdv-flux__suggestions button {
  display: flex;
  width: 100%;
  padding: 14px 17px;
  border: 0;
  border-bottom: 1px solid var(--flux-line);
  text-align: left;
  background: #fff;
  cursor: pointer;
  flex-direction: column;
}

.tdv-flux__suggestions button:hover,
.tdv-flux__suggestions button:focus {
  background: #eff8f6;
}

.tdv-flux__suggestions button strong { color: var(--flux-ink); }
.tdv-flux__suggestions button span { color: var(--flux-muted); font-size: 13px; }
.tdv-flux__suggestions button small {
  align-self: flex-start;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--flux-ocean);
  background: #e9f6f3;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tdv-flux__no-result { padding: 16px; color: var(--flux-muted); }

.tdv-flux__quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tdv-flux__quick > span {
  margin-right: 3px;
  color: var(--flux-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.tdv-flux__quick button {
  padding: 7px 11px;
  border: 1px solid #d9e4e1;
  border-radius: 999px;
  color: var(--flux-ocean);
  background: #f7fbfa;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.tdv-flux__quick button:hover { border-color: var(--flux-teal); }

.tdv-flux__live {
  min-height: 290px;
  border: 1px solid var(--flux-line);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  background: var(--flux-paper);
}

.tdv-flux__empty,
.tdv-flux__loading,
.tdv-flux__error {
  display: grid;
  min-height: 290px;
  padding: 45px 25px;
  place-items: center;
  align-content: center;
  text-align: center;
}

.tdv-flux__empty h2,
.tdv-flux__error strong,
.tdv-flux__loading strong {
  margin: 12px 0 4px;
  color: var(--flux-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
}

.tdv-flux__empty p,
.tdv-flux__error p,
.tdv-flux__loading span { max-width: 590px; margin: 0; color: var(--flux-muted); }

.tdv-flux__radar {
  position: relative;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(10,165,163,.34);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(10,165,163,.07), 0 0 0 24px rgba(10,165,163,.04);
}

.tdv-flux__radar::before,
.tdv-flux__radar::after {
  content: "";
  position: absolute;
  background: rgba(10,165,163,.25);
}

.tdv-flux__radar::before { width: 100%; height: 1px; top: 50%; left: 0; }
.tdv-flux__radar::after { width: 1px; height: 100%; top: 0; left: 50%; }
.tdv-flux__radar i { position: absolute; width: 8px; height: 8px; right: 13px; top: 17px; border-radius: 50%; background: var(--flux-sun); }

.tdv-flux__loading i {
  width: 46px;
  height: 46px;
  border: 4px solid rgba(10,165,163,.15);
  border-top-color: var(--flux-teal);
  border-radius: 50%;
  animation: tdv-flux-spin .8s linear infinite;
}

@keyframes tdv-flux-spin { to { transform: rotate(360deg); } }

.tdv-flux__result { padding: clamp(25px, 5vw, 55px); }

.tdv-flux__result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--flux-line);
}

.tdv-flux__location {
  margin-bottom: 5px;
  color: var(--flux-teal);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tdv-flux__result h2 {
  margin: 0;
  color: var(--flux-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 5vw, 52px);
  line-height: 1.05;
}

.tdv-flux__updated { color: var(--flux-muted); font-size: 13px; white-space: nowrap; }

.tdv-flux__provider-attribution {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 8px;
}

.tdv-flux__google-attribution,
.tdv-flux__suggestions button .tdv-flux__google-attribution {
  color: #5e5e5e;
  font-family: Roboto, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  white-space: nowrap;
}

.tdv-flux__third-party,
.tdv-flux__third-party a,
.tdv-flux__suggestions button .tdv-flux__third-party,
.tdv-flux__suggestions button .tdv-flux__third-party span {
  color: #5e5e5e;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.tdv-flux__reading {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  align-items: center;
  gap: clamp(28px, 6vw, 70px);
  padding: 40px 0;
}

.tdv-flux__gauge {
  --gauge-color: var(--flux-teal);
  display: grid;
  width: min(210px, 100%);
  aspect-ratio: 1;
  padding: 16px;
  border-radius: 50%;
  background: conic-gradient(var(--gauge-color) calc(var(--flux-score) * 1%), #dde7e4 0);
  place-items: center;
}

.tdv-flux__result--busy .tdv-flux__gauge { --gauge-color: #dc9b16; }
.tdv-flux__result--packed .tdv-flux__gauge { --gauge-color: #d6533f; }
.tdv-flux__result--quiet .tdv-flux__gauge { --gauge-color: #4a9b72; }

.tdv-flux__gauge::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--flux-paper);
}

.tdv-flux__gauge > div { position: relative; grid-area: 1 / 1; text-align: center; }
.tdv-flux__gauge strong { color: var(--flux-ink); font-family: Georgia, serif; font-size: clamp(48px, 7vw, 70px); line-height: 1; }
.tdv-flux__gauge span { color: var(--flux-muted); font-weight: 700; }

.tdv-flux__badge {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--flux-ink);
  background: var(--flux-sun);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tdv-flux__verdict > p:last-child { max-width: 620px; margin: 15px 0 0; color: var(--flux-muted); font-size: 17px; }

.tdv-flux__range { margin: 19px 0 0; }
.tdv-flux__range span { display: block; color: var(--flux-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tdv-flux__range strong { display: block; margin-top: 2px; color: var(--flux-ink); font-family: Georgia, serif; font-size: clamp(27px, 4vw, 39px); line-height: 1.13; }

.tdv-flux__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--flux-line);
  border-radius: 16px;
  background: #fff;
}

.tdv-flux__facts div { min-height: 105px; padding: 20px; border-right: 1px solid var(--flux-line); }
.tdv-flux__facts div:last-child { border-right: 0; }
.tdv-flux__facts span { display: block; margin-bottom: 6px; color: var(--flux-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tdv-flux__facts strong { color: var(--flux-ink); font-size: 16px; }

.tdv-flux__weather {
  margin-top: 20px;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid rgba(10,165,163,.24);
  border-radius: 18px;
  background: linear-gradient(135deg, #e9f7f5 0%, #f7fbf7 62%, #fffde8 100%);
}

.tdv-flux__weather--rain,
.tdv-flux__weather--storm { background: linear-gradient(135deg, #e5eef2 0%, #f5f8f7 100%); }
.tdv-flux__weather--snow { background: linear-gradient(135deg, #eef6fa 0%, #fff 100%); }

.tdv-flux__weather-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.tdv-flux__weather-head > div { display: flex; flex-direction: column; }
.tdv-flux__weather-head span,
.tdv-flux__weather-grid span {
  color: var(--flux-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tdv-flux__weather-head strong { color: var(--flux-ink); font-family: Georgia, serif; font-size: clamp(25px, 4vw, 34px); }
.tdv-flux__weather-head a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  background: var(--flux-ocean);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}
.tdv-flux__weather-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 20px; overflow: hidden; border: 1px solid var(--flux-line); border-radius: 12px; background: var(--flux-line); }
.tdv-flux__weather-grid div { padding: 14px 16px; background: rgba(255,255,255,.86); }
.tdv-flux__weather-grid strong { display: block; margin-top: 4px; color: var(--flux-ink); font-size: 17px; }
.tdv-flux__weather-impact { margin: 17px 0 5px; color: var(--flux-ink); font-weight: 750; }
.tdv-flux__weather-source { color: var(--flux-muted); font-size: 11px; }

.tdv-flux__alerts { margin-top: 18px; padding: 14px 18px; border-left: 4px solid #d6533f; background: #fff1ee; }
.tdv-flux__alerts p { margin: 0; color: #74372f; font-weight: 700; }

.tdv-flux__result-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 25px;
  padding-top: 24px;
  border-top: 1px solid var(--flux-line);
}

.tdv-flux__result-foot > div:first-child { display: flex; flex-direction: column; }
.tdv-flux__result-foot strong { color: var(--flux-ink); font-size: 13px; }
.tdv-flux__result-foot span { color: var(--flux-muted); font-size: 13px; }
.tdv-flux__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tdv-flux__actions a,
.tdv-flux__result-foot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--flux-ink);
  border-radius: 999px;
  color: var(--flux-ink);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.tdv-flux__result-foot button:hover,
.tdv-flux__actions a:hover { color: #fff; background: var(--flux-ink); }

.tdv-flux__disclaimer { margin: 22px 0 0; color: var(--flux-muted); font-size: 12px; }

@media (max-width: 820px) {
  .tdv-flux__facts { grid-template-columns: repeat(2, 1fr); }
  .tdv-flux__facts div:nth-child(2) { border-right: 0; }
  .tdv-flux__facts div:nth-child(-n+2) { border-bottom: 1px solid var(--flux-line); }
}

@media (max-width: 640px) {
  .tdv-flux { margin: 20px auto; }
  .tdv-flux__hero { min-height: 310px; border-radius: 20px 20px 0 0; }
  .tdv-flux__hero::after { width: 300px; height: 300px; }
  .tdv-flux__search-row { grid-template-columns: 1fr; }
  .tdv-flux__submit { min-width: 0; }
  .tdv-flux__suggestions { top: 194px; right: 24px; left: 24px; }
  .tdv-flux__live { border-radius: 0 0 20px 20px; }
  .tdv-flux__result-head { flex-direction: column; gap: 8px; }
  .tdv-flux__reading { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tdv-flux__gauge { width: 185px; }
  .tdv-flux__facts { grid-template-columns: 1fr; }
  .tdv-flux__facts div { min-height: 84px; border-right: 0; border-bottom: 1px solid var(--flux-line); }
  .tdv-flux__facts div:last-child { border-bottom: 0; }
  .tdv-flux__result-foot { align-items: flex-start; flex-direction: column; }
	.tdv-flux__weather-head { align-items: flex-start; flex-direction: column; }
	.tdv-flux__weather-head a { width: 100%; }
	.tdv-flux__weather-grid { grid-template-columns: 1fr; }
  .tdv-flux__actions { width: 100%; }
  .tdv-flux__actions a,
  .tdv-flux__actions button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tdv-flux *, .tdv-flux *::before, .tdv-flux *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}