.solar-demo {
  --solar-ink: var(--text-on-paper, #fff0eb);
  --solar-muted: var(--text-on-paper-muted, #b7aaaa);
  --solar-line: var(--line-on-paper, #fff0eb33);
  --solar-signal: var(--color-signal-red, #f40c3f);
  position: relative;
  min-width: 0;
  margin: 32px 0;
  border: 1px solid var(--solar-line);
  color: var(--solar-ink);
  background: var(--surface-section-paper, #090909);
  isolation: isolate;
  overflow: hidden;
}
.solar-demo *, .solar-demo *::before, .solar-demo *::after { box-sizing: border-box; }
.solar-demo .solar-demo__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 22px; border-bottom: 1px solid var(--solar-line);
  font: 500 10px/1.5 var(--font-mono, monospace); letter-spacing: .07em;
}
.solar-demo .solar-demo__badge { color: var(--solar-signal); }
.solar-demo .solar-demo__badge::before {
  display: inline-block; width: 6px; height: 6px; margin-right: 9px;
  background: currentColor; content: ""; vertical-align: 1px;
}
.solar-demo .solar-demo__serial { color: var(--solar-muted); font-size: 9px; white-space: nowrap; }
.solar-demo .solar-demo__intro {
  position: absolute; top: 66px; left: 24px; z-index: 1;
  display: grid; gap: 5px; max-width: 80%; pointer-events: none;
}
.solar-demo .solar-demo__intro strong {
  color: var(--solar-ink); font: 600 clamp(20px, 2.5vw, 30px)/1.35 var(--font-serif, serif);
  letter-spacing: -.035em;
}
.solar-demo .solar-demo__intro > span { color: var(--solar-muted); font-size: 11px; line-height: 1.6; }
.solar-demo .solar-demo__stage {
  padding-top: 58px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, rgba(244, 12, 63, .065), transparent 58%);
}
.solar-demo .solar-demo__svg { display: block; width: 100%; height: auto; color: var(--solar-ink); user-select: none; }
.solar-demo .solar-demo__guide { stroke: currentColor; stroke-opacity: .16; stroke-width: 1; }
.solar-demo .solar-demo__guide path:first-child { stroke-dasharray: 2 7; }
.solar-demo .solar-demo__guide path:nth-child(2) { stroke-dasharray: 4 6; }
.solar-demo .solar-demo__guide ellipse { stroke-opacity: .07; }
.solar-demo .solar-demo__svg-label {
  fill: var(--solar-muted); font: 500 10px var(--font-mono, monospace); letter-spacing: .08em;
}
.solar-demo .solar-demo__ray { stroke: var(--solar-signal); stroke-width: 1; stroke-dasharray: 5 6; opacity: .56; }
.solar-demo .solar-demo__base { fill: var(--surface-section-paper, #090909); stroke: var(--solar-muted); stroke-width: 1; }
.solar-demo .solar-demo__machining { fill: none; stroke-opacity: .4; }
.solar-demo .solar-demo__panel {
  transform-origin: 350px 260px; transition: transform .26s cubic-bezier(.2, .75, .3, 1);
}
.solar-demo .solar-demo__shaft { fill: none; stroke: var(--solar-muted); stroke-width: 11; }
.solar-demo .solar-demo__plate-side { fill: var(--surface-section-paper, #090909); stroke: var(--solar-muted); stroke-width: 1.2; }
.solar-demo .solar-demo__plate { stroke: var(--solar-ink); stroke-opacity: .76; stroke-width: 1.2; }
.solar-demo .solar-demo__cells { fill: none; stroke: var(--solar-signal); stroke-width: .8; stroke-opacity: .75; }
.solar-demo .solar-demo__plate-seam { stroke: var(--solar-muted); stroke-opacity: .3; }
.solar-demo .solar-demo__sensor-stem { fill: none; stroke: var(--solar-muted); stroke-width: 1.5; }
.solar-demo .solar-demo__sensor { fill: var(--solar-signal); stroke: var(--surface-section-paper, #090909); stroke-width: 2; }
.solar-demo .solar-demo__normal { fill: none; stroke: var(--solar-signal); stroke-width: 1.2; }
.solar-demo .solar-demo__joint { fill: var(--surface-section-paper, #090909); stroke: var(--solar-muted); stroke-width: 1; }
.solar-demo .solar-demo__axis-dot { fill: var(--solar-signal); }
.solar-demo .solar-demo__annotation path { fill: none; stroke: var(--solar-muted); stroke-opacity: .3; stroke-width: .7; }
.solar-demo .solar-demo__sun { color: var(--solar-signal); fill: none; stroke: currentColor; stroke-width: 1.5; cursor: grab; touch-action: none; }
.solar-demo .solar-demo__sun-hit { fill: transparent; stroke: none; pointer-events: all; }
.solar-demo .solar-demo__sun-orbit { stroke-opacity: .22; stroke-dasharray: 3 4; }
.solar-demo .solar-demo__sun-core { fill: currentColor; fill-opacity: .12; }
.solar-demo .solar-demo__sun-center { fill: currentColor; stroke: none; }
.solar-demo.solar-demo--dragging .solar-demo__sun { cursor: grabbing; }
.solar-demo.solar-demo--dragging .solar-demo__sun-orbit { stroke-opacity: .8; }
.solar-demo.solar-demo--dragging .solar-demo__panel { transition: none; }
.solar-demo .solar-demo__readouts {
  display: grid; grid-template-columns: 1fr 1fr 1.4fr;
  border-block: 1px solid var(--solar-line);
}
.solar-demo .solar-demo__readouts > div { display: grid; align-content: start; gap: 9px; padding: 17px 22px; min-width: 0; }
.solar-demo .solar-demo__readouts > div + div { border-left: 1px solid var(--solar-line); }
.solar-demo .solar-demo__readouts span { color: var(--solar-muted); font: 500 9px/1.5 var(--font-mono, monospace); letter-spacing: .06em; }
.solar-demo .solar-demo__readouts output { color: var(--solar-ink); font: 500 clamp(20px, 2.8vw, 29px)/1 var(--font-mono, monospace); }
.solar-demo .solar-demo__status output { display: flex; align-items: center; gap: 7px; font: 500 11px/1.6 var(--font-sans, sans-serif); }
.solar-demo .solar-demo__status output::before { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--solar-signal); content: ""; }
.solar-demo[data-tracking="true"] .solar-demo__status output::before { box-shadow: 0 0 0 3px rgba(244, 12, 63, .15); }
.solar-demo .solar-demo__controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 13px 12px; padding: 18px 22px 17px; }
.solar-demo .solar-demo__controls label { color: var(--solar-ink); font-size: 12px; line-height: 1.5; }
.solar-demo .solar-demo__controls button {
  min-width: 88px; min-height: 44px; padding: 7px 11px;
  border: 1px solid var(--solar-line); border-radius: 0; background: transparent; color: var(--solar-muted);
  font: 500 11px/1.5 var(--font-mono, monospace); cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.solar-demo .solar-demo__controls button:hover { color: var(--solar-signal); border-color: var(--solar-signal); background: rgba(244, 12, 63, .04); }
.solar-demo .solar-demo__controls button:focus-visible, .solar-demo .solar-demo__range:focus-visible { outline: 2px solid var(--solar-signal); outline-offset: 4px; }
.solar-demo .solar-demo__range {
  --solar-range-fill: 73.333%; grid-column: 1 / -1; width: 100%; height: 32px; margin: -1px 0 -10px;
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; cursor: ew-resize;
  background: transparent; accent-color: var(--solar-signal); touch-action: pan-y;
}
.solar-demo .solar-demo__range::-webkit-slider-runnable-track {
  height: 3px; background: linear-gradient(90deg, var(--solar-signal) var(--solar-range-fill), var(--solar-line) var(--solar-range-fill));
}
.solar-demo .solar-demo__range::-moz-range-track { height: 3px; background: var(--solar-line); }
.solar-demo .solar-demo__range::-moz-range-progress { height: 3px; background: var(--solar-signal); }
.solar-demo .solar-demo__range::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -6.5px; -webkit-appearance: none; border: 4px solid var(--solar-signal);
  border-radius: 50%; background: var(--surface-section-paper, #090909); box-shadow: 0 0 0 4px rgba(244, 12, 63, .09);
}
.solar-demo .solar-demo__range::-moz-range-thumb {
  box-sizing: border-box; width: 16px; height: 16px; border: 4px solid var(--solar-signal);
  border-radius: 50%; background: var(--surface-section-paper, #090909); box-shadow: 0 0 0 4px rgba(244, 12, 63, .09);
}
.solar-demo .solar-demo__range-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--solar-muted); font: 400 9px/1.5 var(--font-mono, monospace); }
.solar-demo .solar-demo__foot { padding: 13px 22px 17px; border-top: 1px solid var(--solar-line); }
.solar-demo .solar-demo__foot > span { color: var(--solar-signal); font: 500 10px/1.5 var(--font-mono, monospace); letter-spacing: .07em; }
.solar-demo .solar-demo__foot p { margin: 6px 0 0; max-width: 74ch; color: var(--solar-muted); font-size: 10px; line-height: 1.7; }
@media (max-width: 600px) {
  .solar-demo { margin-block: 24px; }
  .solar-demo .solar-demo__head { padding-inline: 14px; gap: 8px; font-size: 9px; letter-spacing: 0; }
  .solar-demo .solar-demo__serial { font-size: 8px; }
  .solar-demo .solar-demo__intro { top: 63px; left: 15px; }
  .solar-demo .solar-demo__intro strong { font-size: 23px; }
  .solar-demo .solar-demo__intro > span { font-size: 10px; }
  .solar-demo .solar-demo__stage { padding-top: 76px; }
  .solar-demo .solar-demo__svg { width: 120%; max-width: none; margin-inline: -10%; }
  .solar-demo .solar-demo__annotation { opacity: 0; }
  .solar-demo .solar-demo__readouts { grid-template-columns: 1fr 1fr; }
  .solar-demo .solar-demo__readouts > div { padding: 14px; gap: 6px; }
  .solar-demo .solar-demo__readouts > .solar-demo__status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border-left: 0; border-top: 1px solid var(--solar-line); padding-block: 10px; }
  .solar-demo .solar-demo__controls { padding: 14px; }
  .solar-demo .solar-demo__controls button { min-height: 44px; }
  .solar-demo .solar-demo__foot { padding: 12px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .solar-demo .solar-demo__panel, .solar-demo .solar-demo__controls button { transition: none; }
}