.trf-temp {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(340px, calc(100vw - 28px));
  min-width: 205px;
  padding: 13px 15px;
  border-radius: 15px;
  background: #13263b;
  border: 1px solid rgba(255,255,255,.14);
  color: #f8fbff;
  box-shadow: 0 7px 24px rgba(10,24,39,.18);
  font: 500 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: left;
  vertical-align: middle;
}
.trf-temp *, .trf-temp *::before, .trf-temp *::after { box-sizing: border-box; }
.trf-temp--light {
  background: #fff;
  color: #1d2c3e;
  border-color: #dfe7f0;
  box-shadow: 0 7px 24px rgba(20,34,51,.12);
}
.trf-temp__icon { font-size: 29px; flex: 0 0 auto; line-height: 1; }
.trf-temp__body { min-width: 0; }
.trf-temp__heading, .trf-temp__reading, .trf-temp__footer { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.trf-temp__heading { margin: 0 0 3px; }
.trf-temp__city { color: inherit; font-size: 12px; font-weight: 650; line-height: 1.4; }
.trf-temp__status { display: none; }
.trf-temp__value { font-size: 27px; line-height: 1.12; font-weight: 800; color: inherit; letter-spacing: -.8px; white-space: nowrap; }
.trf-temp__condition { font-size: 12px; color: #d9e6f4; }
.trf-temp--light .trf-temp__condition { color: #465668; }
.trf-temp__footer { margin-top: 5px; font-size: 10px; color: #b8cadb; }
.trf-temp--light .trf-temp__footer { color: #576c82; }
.trf-temp__source { color: inherit !important; font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.trf-temp__source:hover, .trf-temp__source:focus { color: #fff !important; }
.trf-temp--light .trf-temp__source:hover, .trf-temp--light .trf-temp__source:focus { color: #005eaa !important; }
.trf-temp--floating { position: fixed; z-index: 9997; margin: 0; transition: opacity 350ms ease, transform 350ms ease; }
.trf-temp--floating.trf-temp--dismissing { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .trf-temp--floating { transition: none; } }
.trf-temp--bottom-right { bottom: 20px; right: 20px; }
.trf-temp--bottom-left { bottom: 20px; left: 20px; }
.trf-temp--top-right { top: 20px; right: 20px; }
.trf-temp--top-left { top: 20px; left: 20px; }
.trf-temp--card { width: 100%; min-width: 240px; padding: 22px; gap: 16px; border-radius: 20px; }
.trf-temp--card .trf-temp__icon { font-size: 39px; }
.trf-temp--card .trf-temp__value { font-size: 37px; }
.trf-temp--inline { min-width: 0; max-width: 100%; gap: 7px; padding: 6px 11px; border-radius: 99px; box-shadow: none; }
.trf-temp--inline .trf-temp__icon { font-size: 18px; }
.trf-temp--inline .trf-temp__heading, .trf-temp--inline .trf-temp__footer, .trf-temp--inline .trf-temp__condition { display: none; }
.trf-temp--inline .trf-temp__value { font-size: 16px; letter-spacing: 0; }
.trf-temp--unavailable .trf-temp__value { font-size: 19px; }
@media (max-width: 480px) {
  .trf-temp--floating { max-width: calc(100vw - 24px); min-width: 0; padding: 9px 11px; gap: 9px; border-radius: 12px; }
  .trf-temp--floating.trf-temp--bottom-right { bottom: 12px; right: 12px; }
  .trf-temp--floating.trf-temp--bottom-left { bottom: 12px; left: 12px; }
  .trf-temp--floating.trf-temp--top-right { top: 12px; right: 12px; }
  .trf-temp--floating.trf-temp--top-left { top: 12px; left: 12px; }
  .trf-temp--floating .trf-temp__icon { font-size: 23px; }
  .trf-temp--floating .trf-temp__value { font-size: 23px; }
}
@media print { .trf-temp--floating { display: none !important; } }