.dial-orbit {
  transform-origin: 160px 160px;
  animation: ring-turn 16s linear infinite;
}
.dial-orbit circle {
  fill: var(--warm);
  filter: drop-shadow(0 0 6px var(--warm));
}
.dial-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.dial-value {
  font: 500 clamp(40px, 4.4vw, 60px)/1 Manrope,'IBM Plex Sans',sans-serif;
  letter-spacing: -0.05em;
  color: var(--ink);
  transition:
    opacity 0.3s,
    filter 0.3s;
}
.dial-value small {
  font: 400 0.38em 'IBM Plex Sans';
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 4px;
}
.dial-label {
  font-size: 13px;
  color: var(--muted);
  max-width: 170px;
  line-height: 1.35;
  transition: opacity 0.3s;
}
.sim-dial.swap .dial-value,
.sim-dial.swap .dial-label {
  opacity: 0;
  filter: blur(6px);
}
.sim-dial.done .dial-arc {
  stroke-width: 9;
}
.sim-dial.done .dial-value {
  background: linear-gradient(120deg, var(--ink), var(--accent) 70%, var(--warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sim-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.sim-facts li {
  font-size: 12.5px;
  padding: 6px 13px;
  border-radius: var(--r-btn);
  corner-shape: var(--kx-shape);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink);
}
.diagnostic-page .diagnostic-panel {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--purple) 17%, var(--panel)) 0%,
    color-mix(in srgb, var(--panel) 78%, transparent) 55%,
    color-mix(in srgb, var(--pink) 8%, var(--panel)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--purple) 38%, var(--line));
  box-shadow:
    0 30px 90px color-mix(in srgb, var(--purple) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  border-radius: var(--r-lg);
  corner-shape: var(--kx-shape);
  padding: 34px 34px 30px;
}
[data-theme="light"] .diagnostic-page .diagnostic-panel {
  background: linear-gradient(
    160deg,
    #fff 0%,
    color-mix(in srgb, #fff 80%, transparent) 60%,
    color-mix(in srgb, var(--pink) 7%, #fff) 100%
  );
}
.wizard-top {
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
.wizard-progress {
  height: 4px;
  border-radius: var(--r-bar);
  corner-shape: var(--kx-shape);
  background: color-mix(in srgb, var(--line) 70%, transparent);
  overflow: hidden;
}
.wizard-progress span {
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--warm));
  border-radius: var(--r-bar);
  corner-shape: var(--kx-shape);
  transition: width 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.choice {
  background: color-mix(in srgb, var(--purple) 6%, var(--bg)) !important;
  border-color: color-mix(in srgb, var(--purple) 22%, var(--line));
}
.choice:has(:checked) {
  background: color-mix(in srgb, var(--purple) 20%, var(--bg)) !important;
}
.chip {
  border-color: color-mix(in srgb, var(--purple) 26%, var(--line));
  background: color-mix(in srgb, var(--purple) 6%, transparent);
}
.mode-picker {
  gap: 14px;
}
.mode-card {
  grid-template-columns: 54px 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  corner-shape: var(--kx-shape);
  border-color: color-mix(in srgb, var(--purple) 30%, var(--line));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--purple) 12%, transparent),
    color-mix(in srgb, var(--bg) 60%, transparent)
  );
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mode-card > *:not(.mode-icon) {
  grid-column: 2;
}
.mode-icon {
  grid-column: 1;
  grid-row: 1/4;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  position: relative;
  font: 500 17px Manrope,'IBM Plex Sans',sans-serif;
  color: var(--ink);
}
.mode-icon svg {
  position: absolute;
  inset: 0;
}
.mode-icon circle {
  fill: none;
  stroke-width: 3;
}
.mode-icon .t {
  stroke: var(--line);
}