.gpe {
  --blue: #4e7df1;
  --blue-d: #3a63c9;
  --blue-l: #eaf0ff;
  --navy: #232b46;
  --accent: #ff6635;
  --accent-d: #e8541f;
  --green: #43c16d;
  --green-l: #e7f7ee;
  --ink: #232b46;
  --muted: #5b6178;
  --line: #e5e9f2;
  --soft: #f3f5fb;
  --radius: 14px;
  --gpe-stick: 200px;

  --gpe-fs-code: 28px;
  --gpe-fs-h: 26px;
  --gpe-fs-step: 17px;
  --gpe-fs-lead: 15px;
  --gpe-fs-base: 14px;
  --gpe-fs-sm: 13px;
  --gpe-fs-xs: 12px;
  --gpe-fs-eye: 11px;
  --gpe-fs-field: 16px;

  --gpe-1: 4px;
  --gpe-2: 8px;
  --gpe-3: 12px;
  --gpe-4: 16px;
  --gpe-5: 20px;
  --gpe-6: 24px;
  --gpe-7: 32px;

  --gpe-r-sm: 8px;
  --gpe-r-md: 12px;
  --gpe-r-lg: 16px;
  --gpe-r-xl: 999px;

  --gpe-bw-hair: 1px;
  --gpe-bw-ctl: 1.5px;

  --gpe-ink-1: #232b46;
  --gpe-ink-2: #3d4560;
  --gpe-ink-3: #5b6178;

  --gpe-bg-1: #fafbfe;
  --gpe-tint: #f4f7ff;

  --gpe-bd-rest: #dde3f0;
  --gpe-bd-hover: #b9c6e8;
  --gpe-bd-on: #4e7df1;
  --gpe-bd-dim: #8b93aa;
  --gpe-bd-focus: #3a63c9;

  --gpe-chip-bg: #3a63c9;
  --gpe-blue-t: #2f56b8;

  --gpe-warn-bg: #fff4ef;
  --gpe-warn-line: #e0662d;
  --gpe-warn-ink: #9a3412;
  --gpe-ok-ink: #2a7d4d;

  --gpe-ch-1: #4e7df1;
  --gpe-ch-2: #0093ab;
  --gpe-ch-3: #6a5ff0;
  --gpe-ch-4: #2b8f4c;
  --gpe-ch-5: #b0561f;
  --gpe-ch-6: #6d4bb8;

  --gpe-ease: cubic-bezier(.2, .8, .2, 1);
  --gpe-t-fwd: 240ms;
  --gpe-t-back: 190ms;
  --gpe-t-fx: 160ms;

  --gpe-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas,
              'Liberation Mono', Menlo, monospace;

  --gpe-ctl: 36px;
  --gpe-tile-h: calc(96px + var(--gpe-ctl));

  --gpe-dk: #1a2242;
  --gpe-dk-2: #232c52;
  --gpe-dk-line: rgba(255, 255, 255, .14);
  --gpe-dk-ink: #fff;
  --gpe-dk-dim: #a8b2d4;
  --gpe-dk-eye: #8e9ac4;
  --gpe-dk-warn: #ffb27a;
  --gpe-dk-ok: #6ee7a8;

  --gpe-sh-1: 0 1px 2px rgba(35, 43, 70, .05);
  --gpe-sh-2: 0 1px 2px rgba(35, 43, 70, .05), 0 10px 22px -14px rgba(35, 43, 70, .38);
  --gpe-sh-3: 0 18px 38px -22px rgba(20, 28, 56, .55);
  --gpe-sh-dk: 0 20px 40px -26px rgba(12, 18, 44, .85);

  margin: 26px 0 0;
  border: var(--gpe-bw-hair) solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--gpe-ink-1);
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(35, 43, 70, .04);
  overflow: hidden;
  overflow: clip;
}

.gpe__code,
.gpe__meter-t,
.gpe__step input,
.gpe__prog-n,
.gpe__prog-m,
.gpe__cnt,
.gpe__bus-legend { font-variant-numeric: tabular-nums; }


.gpe__head {
  position: relative;
  padding: var(--gpe-7) var(--gpe-6) var(--gpe-6);
  border-bottom: var(--gpe-bw-hair) solid var(--line);
  background:
    radial-gradient(120% 140% at 0% 0%, #eef3ff 0%, rgba(238, 243, 255, 0) 58%),
    linear-gradient(180deg, #fbfcff, #fff);
}
.gpe__head::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, #6a8cf5 42%, var(--accent) 100%);
}

.gpe__h {
  margin: 0 0 var(--gpe-3);
  font-size: var(--gpe-fs-h);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}

.gpe__lead {
  margin: 0;
  font-size: var(--gpe-fs-lead);
  line-height: 1.6;
  color: var(--gpe-ink-2);
}

.gpe__tzline {
  display: flex;
  align-items: center;
  gap: var(--gpe-4);
  margin: var(--gpe-4) 0 0;
}
.gpe__tzline::before,
.gpe__tzline::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--gpe-dk-line);
}

.gpe__tz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gpe-2);
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--gpe-5);
  border: var(--gpe-bw-ctl) solid var(--gpe-dk-line);
  border-radius: var(--gpe-r-xl);
  background: rgba(255, 255, 255, .07);
  color: var(--gpe-dk-ink);
  font: inherit;
  font-size: var(--gpe-fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--gpe-t-fx) var(--gpe-ease),
              background-color var(--gpe-t-fx) var(--gpe-ease),
              color var(--gpe-t-fx) var(--gpe-ease);
}
.gpe__tz:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .14); color: var(--gpe-dk-ink); }
.gpe__tz[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .14);
  color: var(--gpe-dk-ink);
}
.gpe__tz-i {
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  opacity: .75;
  background:
    linear-gradient(currentColor, currentColor) 4px 5px / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 8px / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 11px / 6px 1.5px no-repeat;
}
.gpe__tz-t { text-decoration: none; }
.gpe__tz::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: 2px;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--gpe-t-fx) var(--gpe-ease);
}
.gpe__tz[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

.gpe__tzbox {
  margin: var(--gpe-3) 0 0;
  padding: var(--gpe-4);
  border: var(--gpe-bw-hair) solid var(--gpe-dk-line);
  border-radius: var(--gpe-r-md);
  background: rgba(9, 14, 34, .42);
}
.gpe__tzbox[hidden] { display: none; }
.gpe__tzlab {
  display: block;
  margin-bottom: var(--gpe-2);
  font-size: var(--gpe-fs-sm);
  line-height: 1.4;
  color: var(--gpe-dk-dim);
}
.gpe__tzrow { display: flex; gap: var(--gpe-2); flex-wrap: wrap; }

.gpe__tzin {
  flex: 1 1 280px;
  min-width: 0;
  height: 44px;
  padding: 0 var(--gpe-3);
  border: var(--gpe-bw-ctl) solid var(--gpe-dk-line);
  border-radius: var(--gpe-r-md);
  background: rgba(255, 255, 255, .06);
  font: inherit;
  font-size: var(--gpe-fs-field);
  color: var(--gpe-dk-ink);
}
.gpe__tzin::placeholder { color: var(--gpe-dk-eye); }
.gpe__tzin:hover { border-color: rgba(255, 255, 255, .34); }

.gpe__tzgo {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 var(--gpe-5);
  border: var(--gpe-bw-ctl) solid transparent;
  border-radius: var(--gpe-r-md);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: var(--gpe-fs-base);
  font-weight: 600;
  cursor: pointer;
}
.gpe__tzgo:hover { background: var(--blue-d); }

.gpe__tzmsg:empty { display: none; }
.gpe__tzmsg {
  margin: var(--gpe-3) 0 0;
  font-size: var(--gpe-fs-sm);
  line-height: 1.5;
  color: var(--gpe-dk-dim);
}
.gpe__tzmsg.is-bad { color: var(--gpe-dk-warn); }
.gpe__tzmsg.is-ok { color: var(--gpe-dk-ok); }

.gpe__tzraw {
  margin: var(--gpe-3) 0 0;
  padding: 10px var(--gpe-4);
  border: var(--gpe-bw-ctl) solid var(--gpe-dk-line);
  border-radius: var(--gpe-r-md);
  background: rgba(255, 255, 255, .08);
  color: var(--gpe-dk-ink);
  font: inherit;
  font-size: var(--gpe-fs-base);
  font-weight: 500;
  cursor: pointer;
}
.gpe__tzraw:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .15); }


.gpe__sent { height: 1px; margin: 0; }

.gpe__state {
  position: sticky;
  top: var(--gpe-top, 72px);
  z-index: 20;
  padding: var(--gpe-5) var(--gpe-6) var(--gpe-4);
  color: var(--gpe-dk-ink);
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 22px 100%,
    radial-gradient(120% 130% at 88% 0%, #2c3766 0%, rgba(44, 55, 102, 0) 62%),
    linear-gradient(180deg, var(--gpe-dk-2), var(--gpe-dk));
  transition: box-shadow var(--gpe-t-fx) var(--gpe-ease);
}
.gpe__state.is-stuck { box-shadow: var(--gpe-sh-dk); }

.gpe__code-row {
  display: flex;
  align-items: stretch;
  gap: var(--gpe-3);
  flex-wrap: wrap;
}

.gpe__code-w {
  flex: 1 1 320px;
  min-width: 0;
  padding: var(--gpe-3) var(--gpe-4) var(--gpe-4);
  border: var(--gpe-bw-hair) solid var(--gpe-dk-line);
  border-radius: var(--gpe-r-lg);
  background: rgba(9, 14, 34, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.gpe__code-lab {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: var(--gpe-2);
  font-size: var(--gpe-fs-eye);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gpe-dk-eye);
}
.gpe__code-lab::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gpe-dk-ok);
  box-shadow: 0 0 0 3px rgba(110, 231, 168, .16);
}

.gpe__code {
  display: block;
  min-height: 1.22em;
  font-size: var(--gpe-fs-code);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .02em;
  color: var(--gpe-dk-ink);
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
.gpe__code > span { display: inline-block; }
.gpe__code-tech { font-family: var(--gpe-mono); font-size: .94em; letter-spacing: .01em; }
.gpe__code-fam { color: var(--gpe-dk-ink); }
.gpe__code-sep { color: var(--gpe-dk-eye); font-weight: 400; }
.gpe__code-suf { color: var(--gpe-dk-dim); font-weight: 500; font-size: .72em; }
.gpe__code-gap { white-space: pre; }

@keyframes gpe-bump {
  from { opacity: .3; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
.gpe__code .is-bump { animation: gpe-bump 180ms var(--gpe-ease); }

.gpe__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gpe-2);
  min-width: 190px;
  align-self: stretch;
  padding: 0 var(--gpe-5);
  flex-direction: column;
  border: var(--gpe-bw-ctl) solid var(--gpe-dk-line);
  border-radius: var(--gpe-r-md);
  background: rgba(255, 255, 255, .08);
  color: var(--gpe-dk-ink);
  font: inherit;
  font-size: var(--gpe-fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--gpe-t-fx) var(--gpe-ease),
              background-color var(--gpe-t-fx) var(--gpe-ease),
              color var(--gpe-t-fx) var(--gpe-ease),
              transform 120ms var(--gpe-ease);
}
.gpe__copy-i {
  width: 15px;
  height: 15px;
  border: var(--gpe-bw-ctl) solid currentColor;
  border-radius: 4px;
  box-shadow: 3px -3px 0 -1.5px var(--gpe-dk-2), 4.5px -4.5px 0 0 currentColor;
  opacity: .8;
}
.gpe__copy:hover {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .15);
}
.gpe__copy.is-done {
  border-color: var(--gpe-dk-ok);
  color: var(--gpe-dk-ok);
  background: rgba(110, 231, 168, .12);
}

.gpe__bus-w { margin: var(--gpe-5) 0 0; }

.gpe__bus { display: flex; gap: 3px; align-items: stretch; }

.gpe__cell {
  position: relative;
  flex: 1 1 0;
  max-width: 64px;
  height: 26px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09),
              inset 0 2px 4px rgba(0, 0, 0, .28);
  transform-origin: bottom;
  transition: background-color var(--gpe-t-fx) var(--gpe-ease),
              box-shadow var(--gpe-t-fx) var(--gpe-ease);
}
.gpe__cell.is-on {
  background: var(--t, var(--blue));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28),
              inset 0 -3px 6px -3px rgba(0, 0, 0, .35),
              0 0 12px -2px color-mix(in srgb, var(--t, #4e7df1) 55%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .gpe__cell.is-on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
}
.gpe__cell.is-on::after {
  content: "";
  position: absolute;
  left: 30%; right: 30%; top: 4px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .5);
}
.gpe__cell.is-edge { margin-right: 12px; }
.gpe__cell.is-none { display: none; }

@keyframes gpe-cell-in {
  0%   { transform: scaleY(.3); }
  62%  { transform: scaleY(1.06); }
  100% { transform: scaleY(1); }
}
.gpe__cell.is-lit {
  animation: gpe-cell-in 260ms var(--gpe-ease) both;
  animation-delay: calc(var(--d, 0) * 26ms);
}

.gpe__bus-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gpe-2);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--gpe-fs-sm);
  line-height: 1.4;
  color: var(--gpe-dk-dim);
}
.gpe__leg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 7px;
  border-radius: var(--gpe-r-xl);
  background: rgba(255, 255, 255, .07);
}
.gpe__sw {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--t, var(--line));
}

.gpe__over {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--gpe-3);
  border-radius: var(--gpe-r-xl);
  background: rgba(255, 178, 122, .16);
  color: var(--gpe-dk-warn);
  font-weight: 500;
}

.gpe__bus-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gpe-4);
  margin: var(--gpe-3) 0 0;
}
.gpe__bus-w.is-nobus .gpe__bus,
.gpe__bus-w.is-nobus .gpe__bus-legend { display: none; }
.gpe__bus-w.is-nobus .gpe__bus-row { margin-top: 0; justify-content: flex-start; }

.gpe__meter {
  display: flex;
  align-items: center;
  gap: var(--gpe-2);
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
}

.gpe__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-l);
}
.gpe__dot {
  background: var(--gpe-dk-ok);
  box-shadow: 0 0 0 3px rgba(110, 231, 168, .16);
}
.gpe__dot.is-warn {
  background: var(--gpe-dk-warn);
  box-shadow: 0 0 0 3px rgba(255, 178, 122, .18);
}
.gpe__meter-t { font-size: var(--gpe-fs-base); line-height: 1.4; color: var(--gpe-dk-dim); }

.gpe__limit {
  display: flex;
  align-items: center;
  margin: var(--gpe-4) 0 0;
  padding: 10px var(--gpe-4);
  border: var(--gpe-bw-hair) solid var(--gpe-dk-line);
  border-radius: var(--gpe-r-md);
  background: rgba(9, 14, 34, .34);
  font-size: var(--gpe-fs-sm);
  line-height: 1.5;
  color: var(--gpe-dk-dim);
  transition: border-color var(--gpe-t-fx) var(--gpe-ease),
              background-color var(--gpe-t-fx) var(--gpe-ease),
              color var(--gpe-t-fx) var(--gpe-ease);
}
.gpe__limit.is-warn {
  border-color: rgba(255, 178, 122, .55);
  background: rgba(255, 178, 122, .13);
  color: var(--gpe-dk-warn);
}
.gpe__limit b { font-weight: 700; }

.gpe__fix {
  margin-left: 6px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}


.gpe__wiz {
  padding: var(--gpe-6);
  scroll-margin-top: var(--gpe-stick);
}

.gpe__prog {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--gpe-6);
}
.gpe__prog-list { order: 1; }
.gpe__prog-rail { order: 2; margin-top: var(--gpe-3); }
.gpe__prog-m { order: 3; }

.gpe__prog-rail {
  height: 4px;
  border-radius: 3px;
  background: var(--line-2, #eef1f8);
  overflow: hidden;
}
.gpe__prog-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue-d), var(--blue));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--gpe-t-fwd) var(--gpe-ease);
}
.gpe[data-dir="back"] .gpe__prog-fill { transition-duration: var(--gpe-t-back); }

.gpe__prog-list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gpe-2);
}

.gpe__prog-i {
  display: flex;
  align-items: center;
  gap: var(--gpe-2);
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gpe__prog-n {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: var(--gpe-bw-ctl) solid var(--gpe-bd-rest);
  border-radius: var(--gpe-r-xl);
  background: #fff;
  color: var(--gpe-ink-3);
  font-size: var(--gpe-fs-xs);
  font-weight: 700;
  line-height: 1;
  transition: background-color var(--gpe-t-fx) var(--gpe-ease),
              border-color var(--gpe-t-fx) var(--gpe-ease),
              color var(--gpe-t-fx) var(--gpe-ease);
}
.gpe__prog-t {
  min-width: 0;
  font-size: var(--gpe-fs-sm);
  font-weight: 500;
  line-height: 1.25;
  color: var(--gpe-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gpe__prog-i.is-now .gpe__prog-n {
  border-color: var(--blue-d);
  background: var(--blue-d);
  color: #fff;
}
.gpe__prog-i.is-now .gpe__prog-t { color: var(--gpe-ink-1); font-weight: 700; }
.gpe__prog-i.is-done .gpe__prog-n {
  border-color: var(--gpe-ok-ink);
  background: var(--gpe-ok-ink) center / 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4 6.6 11.5 12.5 5'/%3E%3C/svg%3E");
  color: transparent;
}
.gpe__prog-i.is-done .gpe__prog-t { color: var(--gpe-ink-2); }
.gpe__prog-i:hover .gpe__prog-t { color: var(--gpe-ink-1); }
.gpe__prog-i:hover .gpe__prog-n { border-color: var(--gpe-bd-hover); }
.gpe__prog-i.is-now:hover .gpe__prog-n,
.gpe__prog-i.is-done:hover .gpe__prog-n { border-color: currentColor; }

.gpe__prog-m {
  display: none;
  margin: var(--gpe-3) 0 0;
  font-size: var(--gpe-fs-sm);
  font-weight: 500;
  color: var(--gpe-ink-2);
}


.gpe__wview {
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
  transition: height var(--gpe-t-fwd) var(--gpe-ease);
}
.gpe[data-dir="back"] .gpe__wview { transition-duration: var(--gpe-t-back); }

.gpe__wtrack {
  display: flex;
  align-items: flex-start;
  will-change: transform;
  transition: transform var(--gpe-t-fwd) var(--gpe-ease);
}
.gpe[data-dir="back"] .gpe__wtrack { transition-duration: var(--gpe-t-back); }

.gpe__wstep { flex: 0 0 100%; min-width: 0; }
.gpe__wstep[hidden] { display: none; }

.gpe__wtrack.is-measure { transition: none !important; }
.gpe__wtrack.is-measure .gpe__wstep { height: auto; }
.gpe__wtrack.is-measure .gpe__st {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.gpe__wstep-h {
  margin: 0 0 6px;
  font-size: var(--gpe-fs-step);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy);
}
.gpe__wstep-h:focus { outline: none; }
.gpe__wstep-sub {
  margin: 0 0 var(--gpe-4);
  font-size: var(--gpe-fs-base);
  line-height: 1.55;
  color: var(--gpe-ink-3);
}

.gpe__st {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--gpe-t-fx) var(--gpe-ease),
              transform var(--gpe-t-fx) var(--gpe-ease);
}
.gpe[data-dir="back"] .gpe__st { transform: translateY(-6px); }
.gpe__wstep.is-now .gpe__st {
  opacity: 1;
  transform: none;
  transition-delay: calc(40ms + var(--i, 0) * 26ms);
}


.gpe__wnav {
  display: flex;
  align-items: center;
  gap: var(--gpe-3);
  margin: var(--gpe-6) 0 0;
  padding: var(--gpe-5) 0 0;
  border-top: var(--gpe-bw-hair) solid var(--line);
}
.gpe__wnav-x { flex: 1 1 auto; }

.gpe__wnav-b {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 var(--gpe-5);
  border: var(--gpe-bw-ctl) solid var(--gpe-bd-rest);
  border-radius: var(--gpe-r-md);
  background: #fff;
  color: var(--gpe-ink-1);
  font: inherit;
  font-size: var(--gpe-fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--gpe-t-fx) var(--gpe-ease),
              background-color var(--gpe-t-fx) var(--gpe-ease),
              transform 120ms var(--gpe-ease);
}
.gpe__wnav-b:hover:not([disabled]):not(.gpe__wnav-b--next) {
  border-color: var(--gpe-bd-hover);
  background: var(--gpe-bg-1);
}
.gpe__wnav-b[disabled] { opacity: .4; cursor: default; }
.gpe__wnav-b--next {
  border-color: var(--blue-d);
  background: var(--blue-d);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(58, 99, 201, .8);
}
.gpe__wnav-b--next:hover {
  box-shadow: 0 12px 26px -10px rgba(58, 99, 201, .95), 0 0 0 4px rgba(78, 125, 241, .16);
  transform: translateY(-1px);
}
.gpe__wnav-b[hidden] { display: none; }

.gpe__wnav-note {
  margin: var(--gpe-3) 0 0;
  font-size: var(--gpe-fs-xs);
  line-height: 1.5;
  color: var(--gpe-ink-3);
}
.gpe__wnav-note[hidden] { display: none; }


.gpe__builds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gpe-3); }

.gpe__build,
.gpe__opt,
.gpe__gas {
  position: relative;
  border: var(--gpe-bw-ctl) solid var(--gpe-bd-rest);
  border-radius: var(--gpe-r-md);
  background: #fff;
  transition: border-color var(--gpe-t-fx) var(--gpe-ease),
              background-color var(--gpe-t-fx) var(--gpe-ease),
              box-shadow var(--gpe-t-fx) var(--gpe-ease),
              transform 120ms var(--gpe-ease);
}
.gpe__build:hover,
.gpe__opt:not([disabled]):hover,
.gpe__gas:not(.is-dim):hover {
  border-color: var(--gpe-bd-hover);
  background: #fff;
  box-shadow: var(--gpe-sh-2);
  transform: translateY(-1px);
}

.gpe__gas-t[disabled],
.gpe__opt[disabled] { cursor: default; }
.gpe__gas.is-dim,
.gpe__opt[disabled] { box-shadow: none; }
.gpe__gas.is-dim:not(.is-on)::before { content: none; }
.gpe__gas.is-dim .gpe__gas-mark { display: none; }
.gpe__gas.is-dim::after,
.gpe__opt[disabled]::after { display: none; }

.gpe__build[aria-pressed="true"],
.gpe__opt[aria-pressed="true"],
.gpe__gas.is-on {
  border-color: var(--gpe-bd-on);
  background: var(--gpe-tint);
  box-shadow: inset 0 0 0 1px var(--gpe-bd-on);
}
.gpe__gas.is-on {
  border-color: var(--t, var(--gpe-bd-on));
  box-shadow: inset 0 0 0 1px var(--t, var(--gpe-bd-on));
  background: #fff;
}
.gpe__build[aria-pressed="true"]:hover,
.gpe__opt[aria-pressed="true"]:hover { border-color: var(--blue-d); background: #eef3ff; }
.gpe__gas.is-on:hover { box-shadow: inset 0 0 0 1px var(--t, var(--gpe-bd-on)), var(--gpe-sh-2); }

.gpe__build {
  padding: var(--gpe-5) var(--gpe-5) var(--gpe-5);
  font: inherit;
  text-align: left;
  color: var(--gpe-ink-1);
  cursor: pointer;
}
.gpe__build-top {
  display: block;
  margin-bottom: var(--gpe-4);
  color: var(--gpe-bd-dim);
  transition: color var(--gpe-t-fx) var(--gpe-ease);
}
.gpe__build[aria-pressed="true"] .gpe__build-top { color: var(--gpe-bd-on); }
.gpe__bsvg { display: block; width: 84px; height: 44px; }

.gpe__build-k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  margin-right: var(--gpe-2);
  padding: 0 8px;
  border-radius: var(--gpe-r-xl);
  background: var(--line);
  color: var(--gpe-ink-2);
  font-family: var(--gpe-mono);
  font-size: var(--gpe-fs-xs);
  font-weight: 700;
  line-height: 1;
  vertical-align: 2px;
}
.gpe__build[aria-pressed="true"] .gpe__build-k { background: var(--gpe-chip-bg); color: #fff; }

.gpe__build b {
  display: block;
  padding-right: 30px;
  font-size: var(--gpe-fs-lead);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}
.gpe__build-s,
.gpe__build-d {
  display: block;
  font-size: var(--gpe-fs-sm);
  line-height: 1.5;
}
.gpe__build-s { margin-top: var(--gpe-1); font-weight: 500; color: var(--gpe-ink-2); }
.gpe__build-d { margin-top: var(--gpe-2); color: var(--gpe-ink-3); }

.gpe__mark {
  position: absolute;
  top: var(--gpe-4);
  right: var(--gpe-4);
  width: 20px;
  height: 20px;
  border: var(--gpe-bw-ctl) solid var(--gpe-bd-rest);
  border-radius: 50%;
  background: #fff;
  transition: background-color var(--gpe-t-fx) var(--gpe-ease),
              border-color var(--gpe-t-fx) var(--gpe-ease);
}
.gpe__gas.is-on .gpe__gas-mark {
  border-color: var(--t, var(--gpe-bd-on));
  background: var(--t, var(--gpe-bd-on)) center / 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4 6.6 11.5 12.5 5'/%3E%3C/svg%3E");
}
.gpe__build[aria-pressed="true"] .gpe__mark,
.gpe__opt[aria-pressed="true"] .gpe__mark {
  border-color: var(--gpe-bd-on);
  background: var(--gpe-bd-on) center / 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4 6.6 11.5 12.5 5'/%3E%3C/svg%3E");
}


.gpe__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gpe-3); }

.gpe__opt {
  padding: var(--gpe-4) 44px var(--gpe-4) var(--gpe-4);
  font: inherit;
  font-size: var(--gpe-fs-base);
  text-align: left;
  color: var(--gpe-ink-1);
  cursor: pointer;
}
.gpe__opt b { display: block; font-weight: 700; line-height: 1.25; color: var(--navy); }
.gpe__opt.is-dim { background: var(--gpe-bg-1); border-color: var(--line); }
.gpe__opt.is-dim b,
.gpe__opt.is-dim small { color: var(--gpe-ink-3); }
.gpe__opt.is-dim .gpe__opt-k { background: var(--line); color: var(--gpe-bd-dim); }
.gpe__opt.is-dim .gpe__mark { border-color: var(--line); background: var(--gpe-bg-1); }
.gpe__opt-u {
  display: block;
  margin-top: var(--gpe-2);
  font-size: var(--gpe-fs-xs);
  line-height: 1.4;
  color: var(--gpe-ink-3);
}
.gpe__opt.is-dim .gpe__opt-u { color: var(--gpe-bd-dim); }

.gpe__opt-x {
  display: block;
  margin-top: var(--gpe-2);
  padding-top: var(--gpe-2);
  border-top: var(--gpe-bw-hair) solid var(--line);
  font-size: var(--gpe-fs-xs);
  line-height: 1.4;
  color: var(--gpe-blue-t);
}
.gpe__opt-x[hidden] { display: none; }
.gpe__opt.is-dim .gpe__opt-x { color: var(--gpe-ink-3); }
.gpe__opt small {
  display: block;
  margin-top: var(--gpe-1);
  font-size: var(--gpe-fs-xs);
  line-height: 1.45;
  color: var(--gpe-ink-3);
}
.gpe__opt-k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-right: var(--gpe-2);
  padding: 0 6px;
  border-radius: var(--gpe-r-xl);
  background: var(--line);
  color: var(--gpe-ink-2);
  font-family: var(--gpe-mono);
  font-size: var(--gpe-fs-xs);
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.gpe__opt[aria-pressed="true"] .gpe__opt-k { background: var(--gpe-chip-bg); color: #fff; }


.gpe__gases {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gpe-3);
}

.gpe__gas {
  display: flex;
  flex-direction: column;
  min-height: var(--gpe-tile-h);
}
.gpe__gas.is-dim {
  border-style: dashed;
  border-color: var(--gpe-bd-dim);
  background: var(--gpe-bg-1);
  box-shadow: none;
}

.gpe__gas-t {
  position: relative;
  display: block;
  width: 100%;
  flex: 1 1 auto;
  padding: var(--gpe-4) 44px 0 var(--gpe-4);
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.gpe__gas-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--t, var(--blue));
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t, #4e7df1) 16%, transparent);
  transition: transform 140ms var(--gpe-ease), box-shadow var(--gpe-t-fx) var(--gpe-ease);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .gpe__gas-b { box-shadow: none; }
}
.gpe__gas:hover .gpe__gas-b { transform: translateY(-1px) scale(1.03); }

.gpe__gas-f {
  font-size: var(--gpe-fs-step);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: inherit;
}
.gpe__gas-tx { display: block; margin-top: var(--gpe-3); }
.gpe__gas-name {
  display: block;
  font-size: var(--gpe-fs-base);
  font-weight: 500;
  line-height: 1.25;
  color: var(--gpe-ink-1);
}
.gpe__gas-r {
  display: block;
  margin-top: 3px;
  font-size: var(--gpe-fs-xs);
  line-height: 1.35;
  color: var(--gpe-ink-3);
  font-variant-numeric: tabular-nums;
}

.gpe__gas-note {
  padding: 0 var(--gpe-4);
  font-size: var(--gpe-fs-xs);
  line-height: 1.3;
  color: var(--gpe-ink-3);
}
.gpe__gas-note:empty { display: none; }

.gpe__gas.is-off { background: var(--gpe-bg-1); border-style: solid; border-color: var(--line); }
.gpe__gas.is-off .gpe__gas-b { background: #b9c0d2; box-shadow: none; }
.gpe__gas.is-off .gpe__gas-name,
.gpe__gas.is-off .gpe__gas-r { color: var(--gpe-bd-dim); }
.gpe__gas.is-off .gpe__gas-mark { display: none; }
.gpe__gas.is-off::before { display: none; }
.gpe__gas.is-off .gpe__gas-note { color: var(--gpe-ink-3); }

.gpe__gas.is-lock .gpe__step { visibility: hidden; }
.gpe__gas.is-lock::before { display: none; }
.gpe__gas-mark {
  position: absolute;
  top: var(--gpe-4);
  right: var(--gpe-4);
  width: 20px;
  height: 20px;
  border: var(--gpe-bw-ctl) solid var(--gpe-bd-rest);
  border-radius: 50%;
  background: #fff;
  transition: background-color var(--gpe-t-fx) var(--gpe-ease),
              border-color var(--gpe-t-fx) var(--gpe-ease);
}

.gpe__here {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px #e4ecff;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

.gpe__gas:not(.is-on)::before {
  content: "Добавить";
  position: absolute;
  left: var(--gpe-4);
  right: var(--gpe-4);
  bottom: var(--gpe-4);
  height: var(--gpe-ctl);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d3daea;
  border-radius: var(--gpe-r-sm);
  font-size: var(--gpe-fs-xs);
  color: #9aa3ba;
  pointer-events: none;
  transition: border-color var(--gpe-t-fx) var(--gpe-ease),
              color var(--gpe-t-fx) var(--gpe-ease);
}
.gpe__gas:not(.is-on):hover::before { border-color: var(--t, var(--gpe-bd-hover)); color: var(--gpe-ink-3); }
.gpe__gas.is-off::before { content: none; }

.gpe__step {
  display: flex;
  align-items: center;
  gap: var(--gpe-2);
  padding: var(--gpe-3) var(--gpe-4) var(--gpe-4);
  visibility: hidden;
}
.gpe__gas.is-on .gpe__step { visibility: visible; }

.gpe__step button {
  flex: 0 0 auto;
  width: var(--gpe-ctl);
  height: var(--gpe-ctl);
  border: var(--gpe-bw-ctl) solid var(--gpe-bd-rest);
  border-radius: var(--gpe-r-sm);
  background: #fff;
  color: var(--gpe-ink-1);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--gpe-t-fx) var(--gpe-ease),
              color var(--gpe-t-fx) var(--gpe-ease),
              transform 120ms var(--gpe-ease);
}
.gpe__step button:hover:not([disabled]) { border-color: var(--gpe-bd-hover); color: var(--blue-d); }
.gpe__step button[disabled] { opacity: .38; cursor: not-allowed; }

.gpe__step input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--gpe-ctl);
  padding: 0 var(--gpe-1);
  border: var(--gpe-bw-ctl) solid var(--gpe-bd-rest);
  border-radius: var(--gpe-r-sm);
  background: #fff;
  font: inherit;
  font-size: var(--gpe-fs-field);
  font-weight: 700;
  text-align: center;
  color: var(--gpe-ink-1);
  -moz-appearance: textfield;
}
.gpe__step input::-webkit-outer-spin-button,
.gpe__step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


.gpe__sum {
  border: var(--gpe-bw-hair) solid var(--line);
  border-radius: var(--gpe-r-lg);
  background: #fff;
  box-shadow: var(--gpe-sh-1);
  overflow: hidden;
}
.gpe__row {
  display: flex;
  gap: var(--gpe-4);
  padding: var(--gpe-3) var(--gpe-5);
  border-bottom: var(--gpe-bw-hair) solid var(--line);
  font-size: var(--gpe-fs-base);
  line-height: 1.5;
}
.gpe__row:last-child { border-bottom: 0; }
.gpe__row:nth-child(odd) { background: var(--gpe-bg-1); }
.gpe__row b { flex: 0 0 236px; font-weight: 500; color: var(--gpe-ink-3); }
.gpe__row span { flex: 1 1 auto; color: var(--gpe-ink-1); }

.gpe__cable {
  margin: var(--gpe-3) 0 0;
  font-size: var(--gpe-fs-xs);
  line-height: 1.6;
  color: var(--gpe-ink-3);
}

.gpe__act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gpe-3);
  margin: var(--gpe-5) 0 0;
}

.gpe__cta {
  min-height: 54px;
  padding: 0 var(--gpe-7);
  border: var(--gpe-bw-ctl) solid transparent;
  border-radius: var(--gpe-r-md);
  background: linear-gradient(180deg, #ff7648, var(--accent));
  color: #fff;
  font: inherit;
  font-size: var(--gpe-fs-lead);
  font-weight: 700;
  letter-spacing: .005em;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(232, 84, 31, .85);
  transition: background-color var(--gpe-t-fx) var(--gpe-ease),
              box-shadow var(--gpe-t-fx) var(--gpe-ease),
              transform 120ms var(--gpe-ease);
}
.gpe__cta:hover {
  background: var(--accent-d);
  box-shadow: 0 14px 28px -12px rgba(232, 84, 31, .95);
  transform: translateY(-1px);
}

.gpe__edit {
  min-height: 54px;
  padding: 0 var(--gpe-7);
  border: var(--gpe-bw-ctl) solid transparent;
  border-radius: var(--gpe-r-md);
  background: var(--blue-d);
  color: #fff;
  font: inherit;
  font-size: var(--gpe-fs-lead);
  font-weight: 700;
  letter-spacing: .005em;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(58, 99, 201, .85);
  transition: background-color var(--gpe-t-fx) var(--gpe-ease),
              box-shadow var(--gpe-t-fx) var(--gpe-ease),
              transform 120ms var(--gpe-ease);
}
.gpe__edit:hover {
  background: #33589f;
  box-shadow: 0 14px 28px -12px rgba(58, 99, 201, .95);
  transform: translateY(-1px);
}

.gpe__act-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--gpe-fs-xs);
  line-height: 1.6;
  color: var(--gpe-ink-3);
}


.gpe :focus-visible {
  outline: 2px solid var(--gpe-bd-focus);
  outline-offset: 2px;
}
.gpe__gas:focus-within { border-color: var(--gpe-bd-focus); }

.gpe__gas-t,
.gpe__build,
.gpe__opt,
.gpe__step button,
.gpe__step input,
.gpe__copy,
.gpe__tz,
.gpe__tzin,
.gpe__tzgo,
.gpe__prog-i,
.gpe__wnav-b,
.gpe__edit,
.gpe__cta { scroll-margin-top: var(--gpe-stick); }

.gpe__say {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


@media (prefers-reduced-motion: no-preference) {
  .gpe__gas-t:active,
  .gpe__build:active,
  .gpe__opt:active,
  .gpe__cta:active,
  .gpe__copy:active,
  .gpe__wnav-b:active:not([disabled]),
  .gpe__step button:active:not([disabled]) { transform: scale(.978); }
}

@keyframes gpe-ring {
  from { opacity: .45; transform: scale(1); }
  to { opacity: 0; transform: scale(1.04); }
}
.gpe__gas::after,
.gpe__build::after,
.gpe__opt::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  border: 2px solid var(--blue);
  opacity: 0;
  pointer-events: none;
}
.gpe__gas.is-pick::after,
.gpe__build.is-pick::after,
.gpe__opt.is-pick::after { animation: gpe-ring 260ms var(--gpe-ease); }


@media (max-width: 960px) {
  .gpe__gases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gpe__row b { flex: 0 0 190px; }
}

@media (max-width: 700px) {
  .gpe__head, .gpe__state, .gpe__wiz { padding-left: var(--gpe-5); padding-right: var(--gpe-5); }
  .gpe__gases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gpe__builds { grid-template-columns: 1fr; }
  .gpe__opts { grid-template-columns: 1fr; }
  .gpe__row { flex-direction: column; gap: 2px; }
  .gpe__row b { flex: none; }
  .gpe__hints { grid-template-columns: 1fr; }
  .gpe__build { padding: var(--gpe-4); }
  .gpe__build-top { margin-bottom: var(--gpe-3); }
  .gpe__prog-t { display: none; }
  .gpe__prog-list { grid-auto-columns: auto; justify-content: space-between; }
  .gpe__prog-m { display: block; }
}

@media (max-width: 560px) {
  .gpe { --gpe-stick: 0px; }
  .gpe__state { position: static; }
  .gpe__state.is-stuck { box-shadow: none; }
  .gpe__head, .gpe__state, .gpe__wiz { padding-left: var(--gpe-4); padding-right: var(--gpe-4); }
  .gpe__h { font-size: 19px; }
  .gpe__code { font-size: 22px; }
  .gpe__state { padding-top: var(--gpe-4); padding-bottom: var(--gpe-4); }
  .gpe__cell { height: 22px; }
  .gpe__bus-row { flex-direction: column; align-items: flex-start; gap: var(--gpe-2); }
  .gpe__meter { text-align: left; }
  .gpe__copy { align-self: auto; min-height: 48px; flex-direction: row; }
  .gpe__code-w { flex: 1 1 100%; }
  .gpe__copy { flex: 1 1 100%; min-width: 0; }
  .gpe__gases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gpe__bus-legend { font-size: var(--gpe-fs-xs); }
  .gpe__cell.is-edge { margin-right: 6px; }
  .gpe__wnav-b { flex: 1 1 0; padding: 0 var(--gpe-3); }
  .gpe__wnav-x { display: none; }
  .gpe__cta { width: 100%; }
  .gpe__edit { width: 100%; }
  .gpe__limit { min-height: 84px; align-items: flex-start; }
}

@media (max-width: 460px) {
  .gpe__gases { grid-template-columns: 1fr; gap: var(--gpe-2); }
  .gpe__gas {
    flex-direction: row;
    align-items: center;
    min-height: calc(var(--gpe-ctl) + 20px);
    padding-right: 28px;
  }
  .gpe__gas-t { position: static; }
  .gpe__gas-mark { top: 50%; right: 8px; margin-top: -10px; }
  .gpe__here { top: 8px; left: 8px; }

  .gpe__gas-t {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    padding: 10px 0 10px var(--gpe-3);
  }
  .gpe__gas-b { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; flex: none; }
  .gpe__gas-f { font-size: 15px; }
  .gpe__gas-tx {
    margin-top: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .gpe__gas-name { font-size: var(--gpe-fs-sm); }
  .gpe__gas-r { display: none; }
  .gpe__gas.is-dim .gpe__step,
  .gpe__gas.is-lock .gpe__step { display: none; }
  .gpe__gas-note {
    flex: 0 1 auto;
    padding: 0 var(--gpe-3) 0 var(--gpe-2);
    text-align: right;
  }

  .gpe__gas:not(.is-on)::before { display: none; }

  .gpe__step { flex: 0 0 auto; gap: 4px; padding: 0 var(--gpe-2) 0 0; }
  .gpe__step button { width: 38px; }
  .gpe__step input { flex: 0 0 40px; width: 40px; }

  .gpe__hints { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .gpe { --gpe-ctl: 44px; }
}


@media (prefers-reduced-motion: reduce) {

  .gpe *, .gpe *::before, .gpe *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .gpe__wtrack, .gpe__wview, .gpe__prog-fill { transition: none !important; }

  .gpe__st {
    transform: none !important;
    transition: opacity 140ms linear !important;
    transition-delay: 0s !important;
  }
  .gpe__wstep.is-now .gpe__st { opacity: 1; }

  .gpe__gas::after, .gpe__build::after, .gpe__opt::after { display: none; }
  .gpe__gas-t:active, .gpe__build:active, .gpe__opt:active, .gpe__cta:active,
  .gpe__copy:active, .gpe__wnav-b:active, .gpe__step button:active { transform: none !important; }
  .gpe__cell { transform: none !important; animation: none !important; }
  .gpe__code .is-bump { animation: none !important; }
}