/* <gear-shifter> — vertical car gearstick. Theme via custom props. */
gear-shifter{
  --gs-accent:#22d68a;
  --gs-accent-soft:rgba(34,214,138,.16);
  --gs-channel:#070a10;
  --gs-rim:#2b3450;
  --gs-text:#e4e7f0;
  --gs-text-dim:#7c839e;
  --gs-knob-a:#2c3447;
  --gs-knob-b:#0f131d;
  --gs-plate:#11141f;
  --gs-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  display:block;
}
.gs{font-family:var(--gs-mono);user-select:none}

/* header */
.gs-head{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.gs-head-ico{color:var(--gs-accent);font-size:13px;animation:gs-spin 9s linear infinite}
@keyframes gs-spin{to{transform:rotate(360deg)}}
.gs-head-txt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gs-text-dim);font-weight:600}
.gs-head-hint{margin-left:auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gs-accent);opacity:.75}

/* body: labels rail + gate column */
.gs-body{display:flex;gap:20px;align-items:stretch}
.gs-rail{flex:1;display:grid;grid-template-rows:repeat(var(--gs-rows),1fr);min-height:280px}
.gs-gate{position:relative;width:74px;height:280px;flex:none;outline:none;cursor:grab}
.gs-gate:focus-visible{box-shadow:0 0 0 2px var(--gs-accent-soft);border-radius:22px}
.gs.gs-dragging .gs-gate,.gs-gate:active{cursor:grabbing}

/* rail buttons aligned to each detent row */
.gs-pos{display:flex;align-items:center;justify-content:flex-end;gap:14px;background:none;border:0;cursor:pointer;
  padding:0 4px;font-family:var(--gs-mono);position:relative}
.gs-pos-meta{text-align:right}
.gs-pos-label{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--gs-text-dim);transition:.2s;line-height:1.1}
.gs-pos-sub{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gs-text-dim);opacity:.5;margin-top:3px;transition:.2s}
.gs-pos-node{width:11px;height:11px;border-radius:50%;background:#0b0e17;border:1px solid var(--gs-rim);flex:none;display:flex;align-items:center;justify-content:center;transition:.2s}
.gs-pos-node b{display:none}
.gs-pos:hover .gs-pos-label{color:var(--gs-text)}
.gs-pos.on .gs-pos-label{color:var(--gs-accent);text-shadow:0 0 18px var(--gs-accent-soft)}
.gs-pos.on .gs-pos-sub{color:var(--gs-text);opacity:.85}
.gs-pos.on .gs-pos-node{background:var(--gs-accent);border-color:var(--gs-accent);box-shadow:0 0 12px var(--gs-accent-soft)}

/* the gate plate with the vertical slot */
.gs-plate{position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(145deg,var(--gs-plate),#0a0d15);
  border:1px solid var(--gs-rim);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);}
.gs-slot{position:absolute;left:50%;top:16px;bottom:16px;width:20px;transform:translateX(-50%);border-radius:12px;
  background:linear-gradient(180deg,var(--gs-channel),#04060a);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,255,255,.04);}
.gs-slot::after{content:'';position:absolute;left:50%;top:8px;bottom:8px;width:2px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.10) 0 2px,transparent 2px 8px);border-radius:2px}

/* engraved detent seats */
.gs-seats{position:absolute;inset:0}
.gs-seat{position:absolute;left:50%;transform:translate(-50%,-50%);width:30px;height:24px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#0c1019,#06080d);border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.gs-seat b{font-size:11px;font-weight:700;color:var(--gs-text-dim);opacity:.55}

/* the lever (knob + collar) — slides vertically via JS transform */
.gs-lever{position:absolute;left:50%;top:0;width:64px;height:62px;
  transform:translate(-50%,0);transition:transform .42s cubic-bezier(.34,1.4,.5,1);z-index:3}
.gs-collar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#6b7896,#39414f 55%,#1c2230);
  box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.gs-knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;cursor:grab;
  background:radial-gradient(circle at 38% 28%,var(--gs-knob-a),var(--gs-knob-b) 70%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 16px 28px -8px rgba(0,0,0,.85),inset 0 2px 3px rgba(255,255,255,.2),inset 0 -8px 14px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;z-index:2}
.gs.gs-dragging .gs-knob{cursor:grabbing}
.gs-knob-ring{position:absolute;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.10)}
.gs-knob-ring.r2{width:28px;height:28px;border-color:rgba(255,255,255,.07)}
.gs-knob-core{position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--gs-accent),#0c8a52);
  box-shadow:0 0 14px var(--gs-accent-soft),0 0 0 3px rgba(0,0,0,.4)}
.gs-knob-shine{position:absolute;top:9px;left:14px;width:20px;height:11px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);filter:blur(2px);opacity:.7}
.gs-knob.thunk{animation:gs-thunk .42s cubic-bezier(.34,1.4,.5,1)}
@keyframes gs-thunk{0%{transform:translate(-50%,-50%) scale(1.05)}55%{transform:translate(-50%,-50%) scale(.95)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.gs-lever{transition:none}.gs-knob.thunk{animation:none}.gs-head-ico{animation:none}}

/* digital readout */
.gs-readout{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.gs-gear{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gs-text-dim)}
.gs-gear b{color:var(--gs-accent);font-size:15px}
.gs-readout-name{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--gs-text)}
.gs-readout-dots{display:flex;gap:5px;margin-left:auto}
.gs-readout-dots i{width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);transition:.25s}
.gs-readout-dots i.on{background:var(--gs-accent);box-shadow:0 0 8px var(--gs-accent-soft)}