.gearshift-reward {
    --gearshift-ink: #17212b;
    --gearshift-accent: #d3222a;
    --gearshift-metal: #d7dde5;
    --gearshift-panel: #f7f8fa;
    --gearshift-gate: var(--gearshift-ink);
    --gearshift-label: var(--gearshift-ink);
    --gearshift-slot-fill: #ffffff;
    --gearshift-slot-stroke: var(--gearshift-ink);
    --gearshift-knob-fill: var(--gearshift-metal);
    --gearshift-knob-stroke: var(--gearshift-ink);
    --gearshift-knob-text: var(--gearshift-ink);
    position: relative;
    max-width: 420px;
    margin: 24px auto;
    padding: 20px;
    color: var(--gearshift-ink);
    background: var(--gearshift-panel);
    border: 1px solid #dce1e8;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(23, 33, 43, 0.12);
}

.gearshift-reward__svg {
    display: block;
    width: 100%;
    height: auto;
}

.gearshift-reward__image {
    display: block;
    width: 100%;
    height: auto;
}

.gearshift-reward__gate {
    fill: none;
    stroke: var(--gearshift-gate);
    stroke-width: 18;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
}

.gearshift-reward__slot {
    fill: var(--gearshift-slot-fill);
    stroke: var(--gearshift-slot-stroke);
    stroke-width: 7;
}

.gearshift-reward__labels text,
.gearshift-reward__labels {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-anchor: middle;
    fill: var(--gearshift-label);
}

.gearshift-reward__stick {
    transition: transform 280ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.gearshift-reward__form-hidden {
    display: none !important;
}

.gearshift-reward__knob {
    fill: var(--gearshift-knob-fill);
    stroke: var(--gearshift-knob-stroke);
    stroke-width: 7;
}

.gearshift-reward__knob-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-anchor: middle;
    fill: var(--gearshift-knob-text);
}

.gearshift-reward__badge {
    position: static;
    display: grid;
    gap: 4px;
    margin-top: 16px;
    padding: 14px 16px;
    color: #ffffff;
    background: var(--gearshift-accent);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(211, 34, 42, 0.28);
    text-align: center;
}

.gearshift-reward__badge[hidden] {
    display: none;
}

.gearshift-reward__badge strong,
.gearshift-reward__badge span {
    overflow-wrap: anywhere;
}