.reveal .solar-twist { font-size: 27px; color: #dde6ee; }
.reveal .solar-twist .st-controls { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 0 0 6px; }
.reveal .solar-twist .st-slider { display: inline-flex; align-items: center; gap: 10px; }
.reveal .solar-twist .st-slider b { color: #ffd166; min-width: 4.4em; }
.reveal .solar-twist .st-slider input { width: 230px; }
.reveal .solar-twist .st-seg { display: inline-flex; gap: 6px; }
.reveal .solar-twist button { font: inherit; font-size: 25px; padding: 4px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: #111a24; color: #dde6ee; cursor: pointer; }
.reveal .solar-twist button.on { background: #73c7ff; color: #04121f; border-color: #73c7ff; }
.reveal .solar-twist button[data-act="play"] { background: #ffd166; color: #04121f; border-color: #ffd166; font-weight: 600; }
.reveal .solar-twist .st-status { font-size: 32px; min-height: 2.2em; margin: 2px 0 6px; color: #eef3f7; line-height: 1.3; }
.reveal .solar-twist svg { width: 100%; height: auto; display: block; background: rgba(10, 16, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; }
.reveal .solar-twist svg text { fill: #c9d3dd; font-family: inherit; }
.reveal .solar-twist .st-sub { font-size: 0.7em; }
.reveal .solar-twist .st-ring { fill: none; stroke: #273340; stroke-width: 2; }
.reveal .solar-twist .st-fl { stroke: #8a96a3; stroke-width: 2; }
.reveal .solar-twist .st-fl-t { font-size: 36px; fill: #c9d3dd; }
.reveal .solar-twist .st-m1 { stroke: #73c7ff; stroke-width: 3; stroke-dasharray: 10 6; }
.reveal .solar-twist .st-m2 { stroke: #7ee2ae; stroke-width: 3; stroke-dasharray: 10 6; }
.reveal .solar-twist .st-m1-t { font-size: 36px; fill: #73c7ff; }
.reveal .solar-twist .st-m2-t { font-size: 36px; fill: #7ee2ae; }
.reveal .solar-twist .st-state { stroke: #ffd166; stroke-width: 7; }
.reveal .solar-twist .st-state-dot { fill: #ffd166; }
.reveal .solar-twist .st-blur { stroke: rgba(255, 209, 102, 0.35); stroke-width: 14; stroke-linecap: round; }
.reveal .solar-twist .st-mark { stroke: #eef3f7; stroke-width: 4; }
.reveal .solar-twist .st-tick { font-size: 26px; }
.reveal .solar-twist .st-lab { font-size: 30px; fill: #eef3f7; }
.reveal .solar-twist .st-num { font-size: 30px; fill: #eef3f7; }
.reveal .solar-twist .st-track { fill: #1c2632; }
.reveal .solar-twist .st-b1 { fill: #73c7ff; }
.reveal .solar-twist .st-b2 { fill: #7ee2ae; }
.reveal .solar-twist .st-be { fill: #ffd166; }
.reveal .solar-twist .st-axis { stroke: #8a96a3; stroke-width: 1.6; }
.reveal .solar-twist .st-grid { stroke: #8a96a3; stroke-width: 1.2; stroke-dasharray: 4 6; }
.reveal .solar-twist .st-curve { fill: none; stroke: #7ee2ae; stroke-width: 3; }
.reveal .solar-twist .st-pt { fill: #ffd166; }
.reveal .solar-twist .st-blur-key { fill: rgba(255, 209, 102, 0.35); }
.reveal .solar-twist .st-key { font-size: 24px; fill: #c9d3dd; }