body[data-template="reformer"] {
  color: #202024;
  background: #f5f4f2;
}
[data-template="reformer"] header {
  padding-block: 14px;
}
[data-template="reformer"] .edit-link {
  color: #4b4b50;
  margin-right: 0;
}
[data-template="reformer"] .circuit-heading {
  padding: 8px 0 16px;
}
[data-template="reformer"] .circuit-title {
  font-size: clamp(28px, 4vw, 46px);
}
.reformer-bar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: #b61621;
  color: white;
  min-height: 72px;
  padding: 10px clamp(12px, 3vw, 28px);
  border-radius: 10px 10px 0 0;
}
.reformer-bar span { font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.reformer-bar h2 { font-size: clamp(16px, 2vw, 25px); line-height: 1.12; margin: 3px 0 0; }
.reformer-bar #round { justify-self: end; font-size: clamp(10px, 1.3vw, 15px); font-weight: 700; text-align: right; }
.reformer-bar .timer {
  border: 3px solid #fff9;
  border-radius: 50%;
  min-width: 88px;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.reformer-bar .timer strong { font-size: clamp(22px, 3vw, 32px); letter-spacing: -1px; }
.reformer-bar .timer span { color: white; font-size: 8px; letter-spacing: .6px; }
[data-template="reformer"] .player { border-radius: 0 0 10px 10px; max-height: 56vh; }
[data-template="reformer"] .player,
[data-template="reformer"] .video-grid,
[data-template="reformer"] .station { background: #fff; }
[data-template="reformer"] .station video { object-fit: contain; }
[data-template="reformer"] .video-caption { display: none; }
[data-template="reformer"] .bottom { border: 0; padding: 12px 0 0; }
[data-template="reformer"] .next span { color: #a5131b; }
[data-template="reformer"] #reset,
[data-template="reformer"] #skip { color: #46464a; }
[data-template="reformer"] #reset:hover,
[data-template="reformer"] #skip:hover { color: white; }
[data-template="reformer"] #error { color: #a5131b; }
[data-template="reformer"] #transition {
  background: #fff;
  color: #202024;
}
[data-template="reformer"] #transitionLabel,
[data-template="reformer"] #transitionHint,
[data-template="reformer"] .equipment-block > span { color: #46464a; }
[data-template="reformer"] .transition-count { display: none; }
[data-template="reformer"] .equipment-block li { color: #252527; background: #f1efed; }
@media (max-width: 600px) {
  .reformer-bar .timer { min-width: 68px; }
  [data-template="reformer"] .player { max-height: none; }
}

.spring-card {
  display: grid;
  gap: 7px;
  color: #202024;
  background: #fff;
  border: 1px solid #ddd8d6;
  border-left: 4px solid #b61621;
  border-radius: 6px;
  padding: 10px 14px;
  text-align: left;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.spring-card > strong { color: #a5131b; font-size: 13px; }
.spring-card > div { display: grid; gap: 2px; font-size: 12px; }
.station > .spring-card {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  max-width: min(230px, 60%);
}
.transition-copy > .spring-card { margin-top: 12px; }
@media (max-width: 600px) {
  [data-template="reformer"] .player:has(#transition:not([hidden])) {
    aspect-ratio: auto;
    min-height: 360px;
  }
}
.transition-springs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
[data-template="reformer"] #transition { overflow: auto; }
[data-template="reformer"] #transition .transition-copy { margin: auto; }
.player:has(#transition:not([hidden])) .station > .spring-card { display: none; }
.spring-dots { display: flex; flex-wrap: wrap; gap: 5px; padding-block: 2px; }
.spring-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #252527;
  border-radius: 50%;
  background: var(--spring-color);
}
.spring-dot[data-color="red"] { --spring-color: #ea3032; }
.spring-dot[data-color="blue"] { --spring-color: #2366ed; }
.spring-dot[data-color="yellow"] { --spring-color: #ffe347; }
.spring-dot[data-color="green"] { --spring-color: #43ae59; }
.spring-dot[data-color="black"] { --spring-color: #252527; }
.spring-dot[data-color="white"] { --spring-color: #fff; }
.spring-dot[data-color="purple"] { --spring-color: #a469e2; }
.spring-dot[data-color="gray"] { --spring-color: #a4a4a8; }
.spring-dot[data-color="orange"] { --spring-color: #f38b32; }