.thermometer { container-type: inline-size; min-width: 0 }
.thermo-empty { padding-block: 8px; margin: 0 }
.thermometer[hidden] * { animation-play-state: paused !important }
.thermo-particles { position: absolute; left: 0; top: 7px }
.thermo-particles b { position: absolute; width: 3px; height: 3px; background: #df933d; border-radius: 50%; opacity: 0 }
.thermo-improved .thermo-particles b { animation: thermo-burst .9s ease-out both; animation-delay: calc(var(--i) * 35ms) }
.display-settings summary { color: var(--muted); cursor: pointer; padding-block: 5px; font-size: .875rem }
.display-settings .check { margin-top: 8px }
.display-settings .dependent-setting { margin-left: 22px; font-size: .8125rem }
.thermo-layout-setting { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px }
.thermo-layout-setting select { width: auto; max-width: 100%; min-height: 44px }
.thermo-scales { display: grid; gap: 24px; color: var(--muted); font-size: .6875rem; margin-bottom: 12px }
.thermo-scales > div { display: flex; justify-content: space-between }
.thermo-scales > div + div { display: none }
.thermo-players { display: grid; gap: 18px 24px; padding: 0; margin: 0; list-style: none }
.thermo-player { min-width: 0 }
.thermo-player-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .8125rem; margin-bottom: 6px }
.thermo-name { flex: 1; min-width: 0; overflow-wrap: anywhere }
.thermo-self .thermo-name { font-weight: 600 }
.thermo-current { color: var(--muted); font-size: .75rem; white-space: nowrap }
.thermo-value { font-weight: 500; white-space: nowrap }
.thermo-track { height: 26px; position: relative; margin-inline: 5px }
.thermo-glass { position: absolute; inset: 0 0 10px; overflow: hidden; border: 1px solid var(--control); border-radius: 5px; background: var(--surface) }
.thermo-fill { position: absolute; inset: 0; background: linear-gradient(90deg,#719ead,#a3b59c 35%,#eab566 70%,#ff9a52); opacity: .65; transition: clip-path .65s cubic-bezier(.2,.75,.25,1) }
.thermo-best,.thermo-latest { position: absolute; top: 7px; transition: left .65s cubic-bezier(.2,.75,.25,1) }
.thermo-best > i { display: block; position: absolute; width: 8px; height: 8px; left: -4px; top: -4px; background: var(--player-color); border: 1px solid #514538; border-radius: 1px; transform: rotate(45deg); box-shadow: 0 0 9px #edb66b66 }
.thermo-latest { top: 22px }
.thermo-latest > i { display: block; position: absolute; width: 7px; height: 7px; left: -4px; top: -4px; background: var(--page); border: 2px solid var(--player-color); border-radius: 50% }
.thermo-best .thermo-particles { top: 0 }
.thermo-shimmer { position: absolute; inset: 0; opacity: 0; background: linear-gradient(110deg,transparent 30%,#fff6,transparent 70%); pointer-events: none }
.thermo-improved .thermo-shimmer { animation: thermo-shimmer 1.2s ease-out }
.thermo-snapshot * { transition: none !important }
.thermo-single .thermo-track { height: 34px }
.thermo-single .thermo-glass { bottom: 12px }
.thermo-single .thermo-best { top: 10px }
.thermo-single .thermo-latest { top: 28px }
.visuals { min-width: 0; display: grid; gap: 16px; container: progress / inline-size }
.visuals > .map-replay { margin: 0 }
.thermo-shared { padding-top: 2px }
.shared-labels { display: flex; flex-wrap: wrap; gap: 4px 16px; max-width: 520px; margin: 0 auto 36px; font-size: .75rem }
.shared-labels i { font-style: normal }
.shared-plot { position: relative; height: 22rem; max-width: 520px; margin: 0 auto 18px; isolation: isolate }
.shared-tube { position: absolute; left: calc(var(--axis, 50%) - 5px); top: 0; bottom: 0; width: 10px; background: var(--surface); border: 1px solid var(--control); border-radius: 8px }
.shared-mercury { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#ff9a52,#eab566 30%,#a3b59c 65%,#719ead); transition: clip-path .65s ease; box-shadow: 0 0 16px #efb36335 }
.shared-tube::after { content: ''; position: absolute; bottom: -6px; left: -4px; width: 16px; height: 16px; background: #719ead; border: 1px solid var(--control); border-radius: 50% }
.shared-fire { position: absolute; width: 32px; height: 32px; top: -42px; left: -12px; filter: drop-shadow(0 0 6px #ef963d55) }
.shared-fire svg { width: 100%; height: 100% }
.shared-ticks { position: absolute; inset: 0; pointer-events: none; font-size: .6875rem; color: var(--muted) }
.shared-ticks span { position: absolute; right: calc(100% - var(--axis, 50%) + 10px); transform: translateY(-50%); line-height: 1.2; z-index: 2 }
.shared-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
.shared-leaders path { fill: none; stroke: var(--control); opacity: .45; stroke-width: 1 }
.shared-group { position: absolute; top: 0; left: calc(var(--axis, 50%) + 32px); width: calc(100% - var(--axis, 50%) - 32px); display: flex; align-items: baseline; gap: 8px; min-height: 36px; padding: 8px 4px; border: 0; border-radius: 4px; background: transparent; text-align: left; font-size: .8125rem; line-height: 1.3; font-weight: 400 }
.shared-group-name { min-width: 0; flex: 1; overflow-wrap: anywhere }
.shared-group-value { color: var(--muted); font-size: .75rem; white-space: nowrap }
.shared-group.shared-own .shared-group-name { font-weight: 600 }
.shared-group[aria-expanded=true] { background: var(--hover) }
.shared-mark { position: absolute; top: 0; width: 0; height: 0; pointer-events: none; transition: transform .65s cubic-bezier(.2,.75,.25,1),opacity .2s; z-index: 3 }
.shared-mark > i { display: block; position: absolute; width: 7px; height: 7px; top: -4px; left: -4px; border: 1px solid #514538; border-radius: 1px; transform: rotate(45deg); background: var(--player-color); box-shadow: 0 0 9px #edb66b66 }
.shared-mark[data-field=latest] > i { border-radius: 50%; transform: none; background: var(--page); border: 2px solid var(--player-color); box-shadow: none }
.shared-mark .thermo-particles { top: 0 }
.shared-mark.shared-muted { opacity: .2 }
.shared-snapshot { transition: none }
.shared-still * { transition: none !important }
.shared-waiting { margin-top: 8px }
.shared-inspection { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px }
.shared-inspection-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.shared-inspection ul { padding: 0; margin: 8px 0 0; list-style: none; display: grid; gap: 8px }
.shared-inspection li { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: .8125rem; overflow-wrap: anywhere }
.shared-inspection li > :last-child { color: var(--muted) }
@container (min-width: 600px) {
  .shared-inspection ul { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px }
  .thermo-dense .thermo-players,.thermo-dense .thermo-scales { grid-template-columns: repeat(2,minmax(0,1fr)) }
  .thermo-dense .thermo-scales > div + div { display: flex }
}
@keyframes thermo-shimmer { 0% { opacity: 0; transform: translateX(-100%) } 25% { opacity: .7 } 100% { opacity: 0; transform: translateX(100%) } }
@keyframes thermo-burst { 0% { opacity: .9; transform: translate(0,0) } 100% { opacity: 0; transform: translate(calc((var(--i) - 2) * 8px),calc(-18px - var(--i) * 4px)) scale(.25) } }
@media (prefers-reduced-motion: reduce) {
  .thermometer * { animation: none !important; transition: none !important }
  .thermo-particles { display: none }
}
@media (forced-colors: active) {
  .shared-mark > i { background: Highlight; border-color: CanvasText }
  .thermo-best > i,.thermo-latest > i { background: Highlight; border-color: CanvasText }
}