#battery-planner,
.battery-calculator {
--gk-blue: #2563eb;
--gk-amber: #b45309;
--gk-warn: #f59e0b;
--gk-danger: #ef4444;
--gk-ink: #0f172a;
--gk-text: #475569;
--gk-muted: #64748b;
}
.bp-throttles,
.calc-throttles {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
gap: 30px;
padding: 8px 0 4px;
}
.bp-throttles.is-dual,
.calc-throttles.is-dual {
gap: 48px;
}
.bp-throttles.is-dual .gk-throttle,
.calc-throttles.is-dual .gk-throttle {
flex: 1 1 0;
max-width: 420px;
}
.gk-throttle {
position: relative;
flex: 0 1 300px;
min-width: 0;
max-width: 300px;
user-select: none;
-webkit-tap-highlight-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
}
.gk-readout {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
.gk-readout .row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
}
.gk-readout .num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
font-size: 2.4rem;
font-weight: 800;
color: var(--gk-ink);
letter-spacing: -0.03em;
line-height: 1;
transition: color 0.2s ease;
}
.gk-readout .unit {
font-size: 1rem;
font-weight: 700;
color: var(--gk-blue);
transform: translateY(-2px);
transition: color 0.2s ease;
}
.gk-readout .meta {
margin-top: 6px;
display: flex;
align-items: center;
gap: 10px;
font-variant-numeric: tabular-nums;
}
.gk-readout .dir {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
padding: 3px 8px;
border-radius: 999px;
background: #e2e8f0;
color: #475569;
transition: background 0.2s ease, color 0.2s ease;
}
.gk-throttle[data-dir="F"] .gk-readout .dir {
background: rgb(37 99 235 / 0.12);
color: var(--gk-blue);
}
.gk-throttle[data-dir="F"] .gk-readout .num {
color: #0b2454;
}
.gk-throttle[data-dir="F"] .gk-readout .unit {
color: var(--gk-blue);
}
.gk-throttle[data-dir="R"] .gk-readout .dir {
background: rgb(245 158 11 / 0.18);
color: var(--gk-amber);
}
.gk-throttle[data-dir="R"] .gk-readout .num {
color: #6b3a05;
}
.gk-throttle[data-dir="R"] .gk-readout .unit {
color: var(--gk-amber);
}
.gk-readout .kw {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--gk-text);
}
.gk-led {
display: flex;
gap: 3px;
margin: 4px 0 12px;
width: 100%;
max-width: 200px;
}
.gk-led i {
flex: 1 1 0;
min-width: 0;
height: 5px;
border-radius: 2px;
background: #dde3ea;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
transition: background 0.12s ease, box-shadow 0.12s ease;
}
.gk-led i.on {
background: var(--gk-blue);
box-shadow: 0 0 6px rgb(37 99 235 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.4);
}
.gk-led i.warn {
background: var(--gk-warn);
box-shadow: 0 0 6px rgb(245 158 11 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.gk-led i.danger {
background: var(--gk-danger);
box-shadow: 0 0 6px rgb(239 68 68 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.gk-led i.reverse {
background: var(--gk-amber);
box-shadow: 0 0 6px rgb(245 158 11 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.gk-stage {
position: relative;
width: 100%;
aspect-ratio: 360 / 380;
display: flex;
justify-content: center;
align-items: flex-end;
}
.gk-svg {
width: 100%;
height: 100%;
overflow: hidden;
cursor: grab;
touch-action: none;
}
.gk-svg.is-dragging {
cursor: grabbing;
}
.gk-lever {
transform-box: view-box;
transform-origin: 180px 260px;
transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.25, 1);
will-change: transform;
}
.gk-svg.is-dragging .gk-lever {
transition: none;
}
.gk-handle-hit {
fill: transparent;
cursor: grab;
outline: none;
}
.gk-handle-hit:focus,
.gk-handle-hit:focus-visible {
outline: none;
}
.gk-svg.is-dragging .gk-handle-hit {
cursor: grabbing;
}
.gk-handle-focus {
fill: none;
stroke: var(--gk-blue);
stroke-width: 0;
transition: stroke-width 0.15s ease;
}
.gk-throttle.is-focused .gk-handle-focus {
stroke-width: 3;
}
.gk-tick {
transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
.gk-tick.is-active {
stroke: #1d4ed8 !important;
stroke-width: 3 !important;
}
.gk-tick.is-active.is-major {
stroke-width: 3.4 !important;
}
.gk-throttle[data-dir="R"] .gk-tick.is-active {
stroke: #b45309 !important;
}
.gk-name {
margin-top: 14px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gk-muted);
white-space: nowrap;
}
.gk-name strong {
color: var(--gk-ink);
font-weight: 800;
letter-spacing: 0.04em;
}