/* Guitar page: full-bleed media, pinned scroll sequences, the product bar. Loaded by the home page (/) and the 404. */
.gh { --ink: #0b0c0e; --ink2: #111315; --paper: #f9f9fb; --plum: #773b96; --lilac: #b98ad6; --teal: #31a49b; --ease: cubic-bezier(0.22, 1, 0.36, 1); }
.gh-dark { background: var(--ink); color: #fff; }
.gh-dark2 { background: var(--ink2); color: #fff; }
.gh-eyebrow { font-family: 'Public Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.gh-eyebrow.lilac { color: var(--lilac); }
.gh-eyebrow.plum { color: var(--plum); }
.gh-h { font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -0.025em; line-height: 1.02; }

/* ---------- product bar ---------- */
.gh-bar { position: sticky; top: 0; z-index: 50; background: rgba(11, 12, 14, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #fff; }
.gh-bar-in { margin: 0 auto; max-width: 80rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 16px; }
@media (min-width: 768px) { .gh-bar-in { height: 68px; padding: 0 48px; } }
.gh-bar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gh-bar-brand img { height: 26px; width: auto; }
.gh-bar-brand span { font-family: 'Newsreader', Georgia, serif; font-size: 1.25rem; color: #d7d4de; white-space: nowrap; }
.gh-foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.gh-foot-brand img { height: 28px; width: auto; }
.gh-foot-brand span { font-family: 'Newsreader', Georgia, serif; font-size: 1.375rem; color: #111315; white-space: nowrap; }
.gh-bar-nav { display: none; gap: 2px; }
@media (min-width: 1100px) { .gh-bar-nav { display: flex; } }
.gh-bar-nav a { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.62); padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.gh-bar-nav a:hover { color: #fff; }
.gh-bar-nav a.is-active { color: #fff; background: rgba(255, 255, 255, 0.1); }
.gh-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--plum); color: #fff; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 999px; white-space: nowrap; transition: background 0.15s; }
.gh-cta:hover { background: #8a48ad; }
.gh-cta svg { width: 16px; height: 16px; }

/* ---------- hero (v6): the real guitar against the amp, static ----------
   Phones and portrait screens: stacked, the photo on top (fading into ink at its foot), the copy under it.
   Landscape 768px and up: the photo full-bleed, the copy low-left over the dark amp, like the plugged-in section. */
.gh-hero { position: relative; display: flex; flex-direction: column; min-height: max(calc(100svh - 60px), 680px); overflow: hidden; isolation: isolate; background: var(--ink); }
.gh-hero .gh-hero-media { display: none; }
.gh-hero-phone { order: -1; position: relative; flex: 1 1 0; min-height: 300px; margin: 0; padding: 0; }
.gh-hero-phone picture { position: absolute; inset: 0; display: block; }
.gh-hero-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.gh-hero-phone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 12, 14, 0) 72%, var(--ink) 100%); }
.gh-hero-copy { position: relative; width: 100%; max-width: 80rem; margin: 0 auto; padding: 8px 16px 28px; }
.gh-hero h1 { font-size: clamp(2.9rem, 12vw, 4.4rem); margin: 10px 0 0; }
.gh-hero p { max-width: 34rem; font-size: 1.05rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); margin: 16px 0 0; }
.gh-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media (max-width: 767px) { .gh-hero-btns .gh-btn { padding: 13px 18px; font-size: 14px; } .gh-hero-btns { gap: 8px; } }
@media (min-width: 768px) {
  .gh-hero { min-height: calc(100svh - 68px); }
  .gh-hero-copy { padding: 8px 48px 64px; }
  .gh-hero h1 { font-size: clamp(3.2rem, 6.6vw, 6rem); max-width: 10ch; }
  .gh-hero p { font-size: clamp(1.05rem, 1.3vw, 1.25rem); margin-top: 20px; }
  .gh-hero-btns { gap: 12px; margin-top: 30px; }
}
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .gh-hero { display: grid; grid-template-rows: 1fr; align-items: end; }
  .gh-hero .gh-hero-media { display: block; position: absolute; inset: 0; z-index: -1; }
  .gh-hero .gh-hero-media picture { position: absolute; inset: 0; display: block; }
  .gh-hero .gh-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .gh-hero .gh-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 12, 14, 0.1) 0%, rgba(11, 12, 14, 0) 36%, rgba(11, 12, 14, 0.88) 100%), linear-gradient(90deg, rgba(11, 12, 14, 0.55) 0%, rgba(11, 12, 14, 0) 50%); }
  .gh-hero-copy { padding: 48px 48px 72px; }
  .gh-hero h1 { max-width: 14ch; font-size: clamp(3.2rem, 6vw, 5.6rem); }
  .gh-hero p { max-width: min(34rem, 42%); }
  .gh-hero-phone { display: none; }
}
.gh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 15px 28px; font-weight: 600; font-size: 15px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.gh-btn-paper { background: #fff; color: #111315; }
.gh-btn-paper:hover { background: var(--plum); color: #fff; }
.gh-btn-line { border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; }
.gh-btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.gh-btn-ink { background: #111315; color: #fff; }
.gh-btn-ink:hover { background: var(--plum); }
.gh-btn svg { width: 18px; height: 18px; }

/* ---------- the big sentence: on screen from the first pixel, giant and cropped by the viewport, then it shrinks into place
   (like bambulab.com/h3c), holds, then Dive In slides over it. The text is set at 2.8x its final size and only ever scaled DOWN,
   so it stays sharp. Timeline in screens of scroll: shrink 0.6, hold 0.3, covered 1.0 (290svh = 0.9 + 2 screens).
   While it is giant it also sits lower (--y, set by the script) so at least a fifth of a screen of dark separates it from the hero. ---------- */
.gh-kinetic { position: relative; height: 290svh; }
/* the next section slides up over the pinned sentence (it overlaps the sentence's last screen); the sentence blurs and dims under it */
.gh-kinetic + .gh-dive { margin-top: -100svh; }
.gh-kinetic-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.gh-kinetic p { --s: 0.3571; position: absolute; left: 50%; top: 50%; width: 15ch; margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; text-align: center;
  font-size: clamp(6.25rem, 18.48vw, 17.92rem); color: #fff; transform: translate(-50%, calc(-50% + var(--y, 0px))) scale(var(--s)); transform-origin: 50% 50%; opacity: var(--o, 1); filter: blur(var(--b, 0px)); will-change: transform, opacity, filter; }
.gh-kinetic p em { font-style: normal; color: var(--lilac); }
.gh-kinetic-sub { position: absolute; left: 16px; right: 16px; bottom: 12svh; text-align: center; color: rgba(255, 255, 255, 0.55); font-size: 15px; opacity: var(--o, 0); }

/* ---------- dive in: pinned, full-bleed renders that cross-fade with each step ---------- */
.gh-dive { position: relative; z-index: 1; height: 480svh; }
.gh-dive-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.gh-dive-media { position: absolute; inset: 0; background: #050506; }
.gh-media { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 0.6s var(--ease), transform 1.1s var(--ease); }
.gh-media.is-on { opacity: 1; transform: none; }
.gh-media img, .gh-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.gh-dive-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 12, 14, 0.35) 0%, rgba(11, 12, 14, 0) 30%, rgba(11, 12, 14, 0) 50%, rgba(11, 12, 14, 0.9) 100%); pointer-events: none; }
@media (min-width: 900px) { .gh-dive-shade { background: linear-gradient(90deg, rgba(11, 12, 14, 0.85) 0%, rgba(11, 12, 14, 0.5) 34%, rgba(11, 12, 14, 0) 56%), linear-gradient(180deg, rgba(11, 12, 14, 0.3), rgba(11, 12, 14, 0) 30%); } }
.gh-rail { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; margin: 0; padding: 10px 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5); width: 28px; }
@media (min-width: 768px) { .gh-rail { left: 48px; } }
@media (max-width: 767px) { .gh-rail { display: none; } .gh-dive-copy { left: 16px; } }
.gh-rail li { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.35); transition: color 0.3s; font-variant-numeric: tabular-nums; }
.gh-rail li.is-on { color: #fff; }
.gh-dive-copy { position: absolute; left: 60px; right: 16px; bottom: 36px; }
@media (min-width: 768px) { .gh-dive-copy { left: 110px; right: 48px; bottom: 56px; } }
@media (min-width: 900px) { .gh-dive-copy { left: 120px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: min(31vw, 30rem); } }
.gh-step { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(14px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); pointer-events: none; }
@media (min-width: 900px) { .gh-step { bottom: auto; top: 50%; transform: translateY(calc(-50% + 14px)); } .gh-step.is-on { transform: translateY(-50%); } }
.gh-step.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gh-step h3 { font-size: clamp(2rem, 4.6vw, 3.6rem); margin: 6px 0 0; }
.gh-step p { margin: 14px 0 0; max-width: 32rem; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }
@media (min-width: 768px) { .gh-step p { font-size: 17px; } }
.gh-dive-static { display: none; }

/* ---------- behind the scenes: a strip you flick through ---------- */
.gh-scenes { padding-bottom: 56px; }
@media (min-width: 768px) { .gh-scenes { padding-bottom: 88px; } }
.gh-strip-wrap { margin-top: -8px; }
.gh-strip { display: flex; gap: 12px; margin: 0; padding: 0 16px 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gh-strip::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .gh-strip { gap: 16px; padding: 0 max(48px, calc((100vw - 80rem) / 2 + 48px)) 20px; } }
.gh-bts { flex: 0 0 auto; width: min(72vw, 300px); scroll-snap-align: start; }
@media (min-width: 768px) { .gh-bts { width: 320px; } }
.gh-bts img, .gh-bts video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; background: #16181d; }
.gh-bts p { margin: 10px 2px 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); }

/* ---------- plugged in ---------- */
.gh-play { position: relative; min-height: 88svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.gh-play .gh-hero-media { position: absolute; inset: 0; z-index: -1; }
.gh-play .gh-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.gh-play .gh-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 12, 14, 0.1) 0%, rgba(11, 12, 14, 0) 40%, rgba(11, 12, 14, 0.9) 100%); }
.gh-play-copy { position: relative; width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 16px 56px; }
@media (min-width: 768px) {
  .gh-play-copy { padding: 0 48px 80px; }
  .gh-play .gh-play-copy p { max-width: 30rem; }
  /* darken where the copy sits (left, low), keep the guitar on the right bright */
  .gh-play .gh-hero-media::after { background: linear-gradient(90deg, rgba(11, 12, 14, 0.84) 0%, rgba(11, 12, 14, 0.55) 36%, rgba(11, 12, 14, 0) 60%), linear-gradient(180deg, rgba(11, 12, 14, 0) 62%, rgba(11, 12, 14, 0.55) 100%); }
}
/* phones: the photo as a square above the copy (the logo would sit under the text in an overlay) */
@media (max-width: 767px) {
  .gh-play { display: block; min-height: 0; }
  .gh-play .gh-hero-media { position: relative; inset: auto; z-index: auto; aspect-ratio: 1 / 1; }
  .gh-play .gh-hero-media::after { background: linear-gradient(180deg, rgba(17, 19, 21, 0) 70%, var(--ink2) 100%); }
  .gh-play-copy { padding: 4px 16px 56px; }
}
.gh-play h2 { font-size: clamp(2.6rem, 6vw, 5rem); margin: 8px 0 0; max-width: 12ch; }
.gh-play p { max-width: 36rem; margin-top: 16px; color: rgba(255, 255, 255, 0.78); font-size: 17px; line-height: 1.55; }
.gh-play video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- showcase ---------- */
.gh-section { padding: 72px 16px; }
@media (min-width: 768px) { .gh-section { padding: 110px 48px; } }
.gh-wrap { max-width: 80rem; margin: 0 auto; }
.gh-head { max-width: 40rem; margin-bottom: 36px; }
@media (min-width: 768px) { .gh-head { margin-bottom: 52px; } }
.gh-head h2 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); margin: 8px 0 0; }
.gh-head p { margin-top: 14px; font-size: 18px; line-height: 1.5; color: #5a5d66; }
.gh-dark .gh-head p, .gh-dark2 .gh-head p { color: rgba(255, 255, 255, 0.7); }
.gh-bento { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .gh-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gh-bento { grid-template-columns: repeat(3, 1fr); gap: 18px; } .gh-bento .is-wide { grid-column: span 2; } }
.gh-card { position: relative; display: block; overflow: hidden; border-radius: 22px; background: #111315; aspect-ratio: 4 / 3; color: #fff; isolation: isolate; opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.gh-card.is-in { opacity: 1; transform: none; }
.gh-bento .is-wide.gh-card { aspect-ratio: auto; }
@media (min-width: 1024px) { .gh-bento .is-wide.gh-card { aspect-ratio: 8 / 3; } }
.gh-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.gh-card:hover img { transform: scale(1.035); }
.gh-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 12, 14, 0) 55%, rgba(11, 12, 14, 0.85) 100%); }
.gh-card-copy { position: absolute; left: 22px; right: 70px; bottom: 20px; z-index: 1; }
.gh-card-copy b { display: block; font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 1.55rem; letter-spacing: -0.015em; line-height: 1.1; }
.gh-card-copy span { display: block; margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.gh-plus { position: absolute; right: 18px; bottom: 18px; z-index: 1; width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.85); display: grid; place-items: center; color: #fff; transition: background 0.15s, color 0.15s; }
.gh-card:hover .gh-plus { background: #fff; color: #111315; }
.gh-plus svg { width: 18px; height: 18px; }
.gh-card-cta { display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; background: radial-gradient(90% 90% at 100% 0%, rgba(119, 59, 150, 0.6), rgba(17, 19, 21, 0) 60%), radial-gradient(70% 70% at 0% 100%, rgba(49, 164, 155, 0.35), rgba(17, 19, 21, 0) 60%), #111315; }
.gh-card-cta::after { display: none; }
.gh-card-cta h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 0; }
.gh-card-cta p { margin: 12px 0 0; color: rgba(255, 255, 255, 0.75); font-size: 15px; line-height: 1.5; max-width: 30rem; }
.gh-card-cta .gh-btn { margin-top: 22px; align-self: flex-start; }
.gh-note { margin-top: 20px; font-size: 13.5px; color: #6b6e78; }

/* ---------- the first one: real photos ---------- */
.gh-gallery { --gcols: 2; --ggap: 12px; --gw: calc(100vw - 32px); display: grid; grid-template-columns: repeat(var(--gcols), 1fr); gap: var(--ggap); grid-auto-flow: dense;
  /* rows are sized from the column width so a 3:4 card is one row and a full-length shot is two, whatever lands beside it */
  grid-auto-rows: calc((var(--gw) - (var(--gcols) - 1) * var(--ggap)) / var(--gcols) * 4 / 3); }
@media (min-width: 768px) { .gh-gallery { --gw: min(calc(100vw - 96px), 80rem); } }
@media (min-width: 1024px) { .gh-gallery { --gcols: 4; --ggap: 16px; } }
.gh-shot { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: #e9e8ee; }
.gh-shot.is-tall { grid-row: span 2; }
.gh-shot.is-wide { grid-column: span 2; }
.gh-shot img, .gh-shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gh-shot.is-wide img { object-position: 68% 50%; }
.gh-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font-size: 13px; line-height: 1.35; color: #fff; background: linear-gradient(180deg, rgba(11, 12, 14, 0), rgba(11, 12, 14, 0.75)); }
@media (min-width: 768px) { .gh-shot { border-radius: 22px; } .gh-shot figcaption { font-size: 14px; padding: 48px 18px 16px; } }

/* ---------- numbers ---------- */
.gh-numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 20px; overflow: hidden; }
@media (min-width: 768px) { .gh-numbers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gh-numbers { grid-template-columns: repeat(6, 1fr); } }
.gh-num { background: var(--ink2); padding: 26px 20px; }
.gh-num b { display: block; font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1; }
.gh-num b small { font-size: 0.5em; letter-spacing: 0; color: rgba(255, 255, 255, 0.7); margin-left: 4px; }
.gh-num span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.65); }

/* ---------- how it works ---------- */
.gh-steps { display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: s; }
@media (min-width: 768px) { .gh-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gh-steps { grid-template-columns: repeat(4, 1fr); } }
.gh-stepcard { padding: 26px 24px; border-radius: 20px; background: #fff; border: 1px solid rgba(17, 19, 21, 0.08); }
.gh-stepcard i { display: block; font-style: normal; font-family: 'Newsreader', Georgia, serif; font-size: 2rem; color: var(--plum); line-height: 1; }
.gh-stepcard h3 { font-size: 1.15rem; font-weight: 600; margin: 18px 0 8px; color: #111315; }
.gh-stepcard p { margin: 0; font-size: 15px; line-height: 1.55; color: #5a5d66; }

.gh-h-static { font-size: 2rem; }

/* ---------- reveal ---------- */
.gh-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.gh-reveal.is-in { opacity: 1; transform: none; }

/* ---------- reduced motion: nothing pins, nothing scrubs ---------- */
@media (prefers-reduced-motion: reduce) {
  .gh-kinetic { height: auto; padding: 120px 16px; }
  .gh-kinetic-sticky { position: static; height: auto; overflow: visible; }
  .gh-kinetic p { position: static; width: auto; max-width: 15ch; margin: 0 auto; transform: none; opacity: 1; filter: none; will-change: auto; font-size: clamp(2.5rem, 6.6vw, 6.4rem); }
  .gh-kinetic + .gh-dive { margin-top: 0; }
  .gh-kinetic-sub { position: static; display: block; margin-top: 28px; opacity: 1; }
  .gh-dive { height: auto; }
  .gh-dive-sticky { position: static; height: 60svh; }
  .gh-dive-copy, .gh-rail { display: none; }
  .gh-dive-static { display: grid; gap: 28px; padding: 40px 16px 56px; max-width: 80rem; margin: 0 auto; }
  @media (min-width: 768px) { .gh-dive-static { grid-template-columns: repeat(2, 1fr); padding: 48px 48px 72px; } }
  .gh-card, .gh-reveal, .gh-media { opacity: 1; transform: none; transition: none; }
  .gh-media:not(.is-on) { display: none; }
}

/* ---------- "Watch it play": the 21 s Short in a dialog, sound on, opened by a tap ---------- */
.gh-play-btn { margin-top: 28px; }
.gh-play-len { opacity: 0.6; font-weight: 500; }
.gh-short { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.gh-short::backdrop { background: rgba(5, 6, 8, 0.86); }
.gh-short video { display: block; height: min(86svh, calc((100vw - 32px) * 16 / 9)); width: auto; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; }
.gh-short-close { position: absolute; z-index: 2; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 999px; background: #fff; color: #111315; font-size: 24px; line-height: 40px; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
@media (max-width: 767px) { .gh-short-close { top: 8px; right: 8px; } }