.guide-hero { padding: clamp(46px, 6vw, 84px) 0 clamp(30px, 4vw, 48px); }
.guide-hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.7rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
  text-wrap: balance; max-width: 17ch;
}
.guide-sub { margin-top: 20px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-soft); line-height: 1.55; max-width: 60ch; }

.gtoc { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 9px; }
.gtoc a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px;
  transition: border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.gtoc a:hover { color: var(--accent-deep); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh-1); }
.gtoc a b { color: var(--ink-faint); font-weight: 600; }
.gtoc a:hover b { color: var(--accent); }

.gsec { padding: clamp(40px, 5vw, 64px) 0; }
.gsec + .gsec { border-top: 1px solid var(--line); }
.gsec-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(30px, 4vw, 48px); }
.gsec-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.gsec-head p { flex: 1 1 100%; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; max-width: 64ch; }
.gsec-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; background: var(--accent); border-radius: 6px; padding: 4px 10px;
}

.gstep { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.gstep-text, .gstage { min-width: 0; }
.gstep + .gstep { margin-top: clamp(38px, 5vw, 68px); padding-top: clamp(38px, 5vw, 68px); border-top: 1px dashed var(--line); }
.gstep-n {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--accent-wash); color: var(--accent-deep);
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700;
  margin-bottom: 18px;
}
.gstep h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; }
.gstep-text > p { margin-top: 14px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; max-width: 46ch; }
.gstep-text .key { color: var(--ink); font-weight: 600; }
.gtip { margin-top: 18px; display: flex; gap: 11px; padding: 14px 16px; background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: var(--r-sm); font-size: 0.95rem; line-height: 1.5; color: var(--accent-deep); }
.gtip svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.gstage { margin: 0; }
.gframe {
  position: relative; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  min-height: var(--gh, 330px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-1);
}
.gframe > * { width: 100%; min-width: 0; }
.gcap { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.gcap-t { font-size: 13px; color: var(--ink-faint); font-weight: 500; min-height: 19px; }
.gctl { display: flex; gap: 7px; flex: none; }
.gbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 11px;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.gbtn:hover { color: var(--accent-deep); border-color: var(--accent); }
.gbtn:active { background: var(--accent-wash); }
.gbtn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.gcursor {
  position: absolute; left: 0; top: 0; z-index: 20;
  width: 22px; height: 22px; pointer-events: none;
  opacity: 0; transform: translate(-40px, -40px);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
.gcursor svg { width: 22px; height: 22px; fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(15,28,46,.3)); }
.gcursor.on { opacity: 1; }
.gcursor::after {
  content: ""; position: absolute; left: -7px; top: -7px; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(0.3);
}
.gcursor.tap::after { animation: gtap 520ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes gtap { 0% { opacity: 0.85; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.15); } }

.gwin { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-2); }
.gwin-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--tint); }
.gwin-bar .mark { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gwin-name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; }
.gwin-tag { font-size: 12px; color: var(--ink-soft); }
.gwin-pro {
  margin-left: auto; flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; background: var(--accent); border-radius: 5px; padding: 3px 8px;
  opacity: 0; transform: scale(0.7); transition: opacity 200ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gwin-pro.on { opacity: 1; transform: none; }
.gwin-body { padding: 14px; display: flex; flex-direction: column; gap: 11px; }

.gmenu {
  position: absolute; z-index: 10; top: 58px; right: 26px; width: 236px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--sh-2); padding: 8px; opacity: 0; transform: translateY(-8px) scale(0.97);
  transition: opacity 200ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gmenu.in { opacity: 1; transform: none; }
.gmenu-h { padding: 6px 8px 9px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.gmenu-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; font-size: 13px; color: var(--ink); }
.gmenu-row .mark { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gmenu-row .mark.dim { stroke: var(--line-strong); }
.gmenu-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmenu-row.hot { background: var(--accent-wash); }
.gpin { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--ink-faint); }
.gpin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gpin.on { color: var(--accent); background: var(--accent-wash); }
.gpin.on svg { fill: currentColor; stroke: none; }

.gslot { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px dashed var(--line-strong); }
.gslot.filled { border-color: transparent; }

.gmerge { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.gtrack, .gout { min-width: 0; }
.gtrack {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.gtrack .ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--tint); border: 1px solid var(--line); color: var(--ink-soft); }
.gtrack .ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gtrack .lab { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.gtrack .lab i { display: block; font-style: normal; font-family: var(--ui); font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.gtrack .fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); transition: transform 260ms linear; }
.gtrack.live { border-color: var(--accent-line); background: var(--accent-wash); }
.gmerge-arrow { display: grid; place-items: center; color: var(--ink-faint); opacity: 0; transition: opacity 240ms ease; }
.gmerge-arrow.on { opacity: 1; }
.gmerge-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gout {
  display: flex; align-items: center; gap: 12px; padding: 15px;
  border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--panel);
  opacity: 0.45; transition: opacity 280ms ease, border-color 280ms ease, background 280ms ease, transform 420ms cubic-bezier(0.16,1,0.3,1);
}
.gout.on { opacity: 1; border-color: transparent; background: var(--navy); transform: translateY(-2px); }
.gout.on .lab { color: #fff; }
.gout.on .lab i { color: rgba(255,255,255,.62); }
.gout .ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--tint); border: 1px solid var(--line); color: var(--ink-faint); }
.gout.on .ico { background: var(--accent); border-color: transparent; color: #fff; }
.gname { border: 0; }
.gout .ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gout .lab { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gout .lab i { display: block; font-style: normal; font-family: var(--ui); font-size: 11.5px; font-weight: 400; color: var(--ink-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }

.gpaste { display: flex; flex-direction: column; gap: 9px; }
.gpaste-h { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.gta {
  min-height: 74px; padding: 11px 13px; border-radius: 10px;
  border: 1.5px solid var(--line-strong); background: var(--panel);
  font-family: var(--mono); font-size: 12px; line-height: 1.75; color: var(--ink);
  white-space: pre-wrap; word-break: break-all;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.gta.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.gta:empty::before { content: attr(data-ph); color: var(--ink-faint); }
.gta .car { display: inline-block; width: 1px; height: 13px; vertical-align: -2px; background: var(--accent); animation: gcar 1s steps(1) infinite; }
@keyframes gcar { 50% { opacity: 0; } }

.gactions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gsm {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 8px 13px; white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.gsm.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.gsm.hot { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); }
.gsm.pri.hot { background: var(--accent-deep); color: #fff; }
.gsm.off { color: var(--ink-faint); background: var(--tint); }
.gsm svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gsel {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-soft);
}
.gsel b { font-family: var(--mono); font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 11px; font-variant-numeric: tabular-nums; }
.gsel b.hot { border-color: var(--accent); color: var(--accent-deep); }
.gspacer { flex: 1; }

.gtable { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.gth, .gtr {
  display: grid; grid-template-columns: 1fr 66px 62px 92px;
  align-items: center; gap: 10px; padding: 9px 13px;
}
.gth { background: var(--tint); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.gth span:nth-child(3) { text-align: right; }
.gtr { position: relative; border-top: 1px solid var(--line); overflow: hidden; }
.gtr:first-child { border-top: 0; }
.gtr .src { min-width: 0; }
.gtr .src b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtr .src i { display: block; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.gtr .q, .gtr .sz { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gtr .sz { text-align: right; }
.gbar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); transition: transform 240ms linear; }
.gpill {
  display: inline-flex; align-items: center; gap: 5px; justify-self: start;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
  color: var(--ink-soft); background: var(--tint); border: 1px solid var(--line-strong);
}
.gpill.run { color: var(--accent-deep); background: var(--accent-wash); border-color: var(--accent-line); }
.gpill.done { color: #fff; background: var(--accent); border-color: var(--accent); }
.gpill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.gtr.fresh { animation: gfade 380ms ease both; }
@keyframes gfade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.gtally { padding: 8px 13px; border-top: 1px solid var(--line); background: var(--tint); font-family: var(--mono); font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.grow { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 13px 0; }
.grow + .grow { border-top: 1px solid var(--line); }
.glabel b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.glabel i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; margin-top: 3px; }
.ginput {
  min-width: 128px; padding: 7px 11px; border-radius: 8px;
  border: 1.5px solid var(--line-strong); background: var(--panel);
  font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ginput.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.ginput:empty::before { content: attr(data-ph); color: var(--ink-faint); }
.gseg { display: inline-flex; background: var(--tint); border: 1px solid var(--line-strong); border-radius: 9px; padding: 2px; gap: 2px; }
.gseg span { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink-soft); padding: 5px 10px; border-radius: 7px; transition: background 150ms ease, color 150ms ease; }
.gseg span.on { background: var(--panel); color: var(--accent-deep); box-shadow: 0 1px 2px rgba(15,28,46,.1); }
.gswitch { flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background 200ms ease; }
.gswitch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,28,46,.25); transition: transform 220ms cubic-bezier(0.16,1,0.3,1); }
.gswitch.on { background: var(--accent); }
.gswitch.on::after { transform: translateX(16px); }

.gname {
  margin-top: 4px; padding: 12px 14px; border-radius: 10px;
  background: var(--navy); color: #fff;
  font-family: var(--mono); font-size: 12px; line-height: 1.7; word-break: break-all;
}
.gname .tok { color: #8fb8ff; }
.gname .arrow { display: block; color: rgba(255,255,255,.45); font-size: 11px; margin: 5px 0 3px; }
.gname .res { color: #c9f5e0; }

.gwrow { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.gwrow .u { flex: 1; min-width: 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gwrow .u i { display: block; font-style: normal; font-family: var(--ui); font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.gwrow .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background 200ms ease, box-shadow 200ms ease; }
.gwrow .dot.live { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }

.gkey {
  padding: 10px 12px; border-radius: 9px; border: 1.5px solid var(--line-strong);
  background: var(--panel); font-family: var(--mono); font-size: 11.5px; color: var(--ink);
  word-break: break-all; min-height: 38px; line-height: 1.5;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.gkey.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.gkey:empty::before { content: attr(data-ph); color: var(--ink-faint); }
.gnote {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 10px;
  font-size: 12.5px; font-weight: 500; line-height: 1.45;
  color: var(--accent-deep); background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  opacity: 0; transform: translateY(6px);
  transition: opacity 240ms ease, transform 380ms cubic-bezier(0.16,1,0.3,1);
}
.gnote.on { opacity: 1; transform: none; }
.gnote svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.gskip { opacity: 0.35; transition: opacity 260ms ease; }
.gskip.on { opacity: 1; }

.guide-closer { padding: 0 0 clamp(60px, 8vw, 96px); }

@media (max-width: 940px) {
  .gstep { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .gstep-text > p { max-width: none; }
  .gframe { --gh: 0px; min-height: 0; padding: 16px; }
  .gmenu { right: 16px; top: 52px; width: 210px; }
}

@media (max-width: 620px) {
  .gth, .gtr { grid-template-columns: minmax(0, 1fr) 52px 106px; }
  .gth span:nth-child(3), .gtr .sz { display: none; }
  .gframe { padding: 13px; border-radius: var(--r); }
  .gcap { flex-direction: column; align-items: flex-start; gap: 9px; }
}

@media (max-width: 430px) {
  .grow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .glabel i { max-width: 34ch; }
  .ginput, .gseg, .gswitch { justify-self: start; }
  .gseg span { padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .gcursor { display: none; }
  .gmenu, .gout, .gnote, .gwin-pro, .gmerge-arrow, .gskip { opacity: 1; transform: none; transition: none; }
  .gtr.fresh { animation: none; }
  .gta .car { animation: none; }
  .gbar, .gtrack .fill { transition: none; }
  .gtoc a:hover { transform: none; }
}

.gframe .prow.hot { background: var(--accent-wash); }
.gframe .prow.hot .kind { border-color: var(--accent-line); color: var(--accent-deep); }
.gframe .prow.hot .dl { color: #fff; background: var(--accent); }
.gframe .browser { max-width: none; box-shadow: var(--sh-1); }
.gframe .browser-page { min-height: 0; }
.gframe .pane { max-width: 384px; margin: 0 auto; }
.gframe .pane .pane-list { min-height: 0; }
.gframe .page-playbar i.gplay { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 6s linear; }

.gslot .mark { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.6); transition: opacity 200ms ease, transform 420ms cubic-bezier(0.16,1,0.3,1); }
.gslot .mark.vis { opacity: 1; transform: none; }
.gpuz { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink-soft); }
.gpuz svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gwrow-wrap { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 380ms cubic-bezier(0.16,1,0.3,1), opacity 240ms ease; }
.gwrow-wrap.on { max-height: 110px; opacity: 1; }
.gnote { position: relative; overflow: hidden; }
.gnote-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); transition: transform 200ms linear; }
.gname-out { opacity: 0; transform: translateY(6px); transition: opacity 260ms ease, transform 400ms cubic-bezier(0.16,1,0.3,1); }
.gname-out.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gwrow-wrap { max-height: none; opacity: 1; }
  .gname-out { opacity: 1; transform: none; }
  .gslot .mark { opacity: 1; transform: none; }
  .gframe .page-playbar i.gplay { transform: scaleX(1); transition: none; }
}

.gh-s { --gh: 250px; }
.gh-m { --gh: 318px; }
.gh-l { --gh: 382px; }