/** Shopify CDN: Minification failed

Line 492:0 Unexpected "}"

**/
/* Owner's guide pages — styled in the site's own language: near-black ground,
   lifted panels, green mono captions, amber key chips, under-glow accents.
   Shared by sections/glide-guide-playing.liquid and glide-guide-updating.liquid.
   Content mirrors support/guides/*.html in the firmware repo (the printed box
   sheets); the WORDS stay in step with those, the look belongs to the site.
   Var names date from the paper-styled first pass; --ink is now the LIGHT
   foreground and --paper the dark ground. Kept so section markup didn't churn. */

.acgd {
  --paper: #0C0F0D;
  --panel: #151A16;
  --rule: rgba(233, 239, 231, 0.14);
  --ink: #E9EFE7;
  --ink-soft: rgba(233, 239, 231, 0.72);
  --ink-faint: rgba(233, 239, 231, 0.45);
  --green: #57E389;
  --amber: #F5A83C;
  --amber-bright: #FFAE00;
  --phosphor: #00FF00;
  --phosphor-dim: #2E9E5B;
  --steel: #7FA6C9;
  --red: #FF5A5A;
  --screen: #050705;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--paper);
  color: var(--ink);
}
.acgd img { height: auto; }
.acgd a { color: var(--ink); text-decoration-color: rgba(87, 227, 137, 0.5); text-underline-offset: 2px; }
.acgd a:hover { color: var(--green); }
.acgd a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.acgd-col { max-width: 76rem; margin: 0 auto; padding: 0 2rem; }

/* ---------- masthead: pure black, the splash's home ---------- */
.acgd-mast { background: #000; padding: 5.2rem 0 4rem; position: relative; }
.acgd-mast::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--amber-bright) 0%, var(--amber-bright) 22%, var(--green) 22%, var(--green) 30%, transparent 30%);
}
.acgd-mast img { width: 30rem; max-width: 72%; display: block; }
.acgd-kicker {
  font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--green); margin-top: 1.8rem;
}
.acgd-mast h1 {
  font-size: clamp(3.2rem, 6vw, 4.6rem); line-height: 1.05; font-weight: 700;
  letter-spacing: -0.02em; color: #fff; margin: 1rem 0 0;
}
.acgd-mast .acgd-sub { color: rgba(233, 239, 231, 0.6); font-size: 1.6rem; line-height: 1.5; margin: 1.4rem 0 0; max-width: 56rem; }
@media (prefers-reduced-motion: no-preference) {
  .acgd-mast > .acgd-col > * {
    animation: acgd-focus 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }
  .acgd-mast .acgd-kicker { animation-delay: 0.1s; }
  .acgd-mast h1 { animation-delay: 0.22s; }
  .acgd-mast .acgd-sub { animation-delay: 0.34s; }
}
@keyframes acgd-focus {
  from { opacity: 0; transform: translateY(8px); filter: blur(7px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------- contents strip ---------- */
.acgd-toc {
  display: flex; flex-wrap: wrap; gap: 0.8rem 2.4rem; align-items: baseline;
  padding: 1.6rem 0; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 1.2rem; letter-spacing: 0.08em;
}
.acgd-toc .t { color: var(--green); text-transform: uppercase; letter-spacing: 0.2em; font-size: 1.05rem; }
.acgd-toc a { text-decoration: none; color: var(--ink-soft); }
.acgd-toc a:hover { color: var(--amber); }

/* ---------- the download block: under-lit, version stamped live ---------- */
.acgd-dl {
  display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 1.6rem;
  padding: 2.2rem 2.6rem; margin: 2.8rem 0 0.6rem;
  box-shadow: 0 22px 55px -20px rgba(87, 227, 137, 0.3), 0 14px 36px rgba(0, 0, 0, 0.3);
}
.acgd-dl-words { flex: 1; min-width: 24rem; }
.acgd-dl-cap {
  font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--green); margin: 0 0 0.5rem;
}
.acgd-dl-ver { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; color: var(--ink); margin: 0; }
.acgd-dl-note { font-size: 1.35rem; color: var(--ink-faint); margin: 0.6rem 0 0; }
.acgd a.acgd-dl-btn {
  display: inline-block; flex: 0 0 auto;
  background: var(--green); color: #0C0F0D; font-weight: 700; font-size: 1.5rem;
  padding: 1.3rem 2.6rem; border-radius: 0.4rem; text-decoration: none;
}
.acgd a.acgd-dl-btn:hover { background: #6FF09C; color: #0C0F0D; box-shadow: 0 10px 28px -8px rgba(87, 227, 137, 0.5); }
.acgd a.acgd-dl-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media screen and (max-width: 749px) {
  .acgd-dl { padding: 2rem; }
  .acgd-dl-btn { width: 100%; text-align: center; }
}

/* ---------- body rhythm ---------- */
.acgd-body { padding: 1rem 0 4.4rem; }
.acgd-body p { font-size: 1.5rem; line-height: 1.6; color: var(--ink-soft); max-width: 68rem; }
.acgd-body p strong, .acgd-body p b { color: var(--ink); font-weight: 600; }
.acgd-part { scroll-margin-top: 10rem; }

/* the site's scroll-driven rise, same tuning as the shop sections */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes acgd-rise {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: none; }
    }
    .acgd-part {
      animation: acgd-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 40%;
    }
  }
}

/* part bar — the big section openers */
.acgd-partbar { display: flex; align-items: baseline; gap: 1.4rem; margin: 4.8rem 0 1.6rem; flex-wrap: wrap; }
.acgd-partbar .tag {
  font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: #0C0F0D; background: var(--amber); padding: 0.5rem 1rem;
}
.acgd-partbar h2 { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.acgd-partbar .note { margin-left: auto; font-family: var(--mono); font-size: 1.1rem; color: var(--ink-faint); letter-spacing: 0.08em; }

/* section rule — the small captions, green like everywhere on the site */
.acgd-sechead {
  font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--green); margin: 3.6rem 0 1.2rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule);
}

/* ---------- panels ----------
   Each role borrows a different motif from the shop, so nothing leans on
   the stock left-accent stripe:
   assurance  -> the spec plate's riveted corners
   callouts   -> the glow card's status-dot label
   gestures   -> the feature lattice's dashed border + fading graph paper
   power band -> the plate's light seam, in warning red */

.acgd-assure {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 1.2rem;
  padding: 2rem 2.4rem; margin: 2.4rem 0;
  background-image:
    radial-gradient(circle at 35% 35%, rgba(233, 239, 231, 0.3), rgba(233, 239, 231, 0.06) 55%, transparent 62%),
    radial-gradient(circle at 35% 35%, rgba(233, 239, 231, 0.3), rgba(233, 239, 231, 0.06) 55%, transparent 62%),
    radial-gradient(circle at 35% 35%, rgba(233, 239, 231, 0.3), rgba(233, 239, 231, 0.06) 55%, transparent 62%),
    radial-gradient(circle at 35% 35%, rgba(233, 239, 231, 0.3), rgba(233, 239, 231, 0.06) 55%, transparent 62%);
  background-repeat: no-repeat;
  background-size: 0.9rem 0.9rem;
  background-position: 1rem 1rem, calc(100% - 1rem) 1rem, 1rem calc(100% - 1rem), calc(100% - 1rem) calc(100% - 1rem);
}
.acgd-assure h3 { font-size: 1.8rem; font-weight: 700; margin: 0 0 0.6rem; color: var(--ink); }
.acgd-assure p { margin: 0; }

.acgd-call { background: var(--panel); border: 1px solid var(--rule); padding: 1.4rem 1.8rem; margin: 2rem 0; }
.acgd-call h4 {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 0.6rem;
}
.acgd-call h4::before {
  content: ""; flex: 0 0 auto; width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px 1px;
}
.acgd-call.warn h4 { color: var(--red); }
.acgd-call.info h4 { color: var(--steel); }
.acgd-call.good h4 { color: var(--green); }
.acgd-call p { margin: 0; font-size: 1.45rem; }
.acgd-call p + p { margin-top: 0.6rem; }

/* the red power band — the one warning that outranks everything */
.acgd-power { position: relative; background: #000; color: var(--ink-soft); border: 1px solid rgba(255, 90, 90, 0.3); padding: 1.8rem 2.2rem; margin: 2.4rem 0 3rem; display: flex; gap: 2rem; align-items: flex-start; }
.acgd-power::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 90, 0.85), transparent);
  box-shadow: 0 6px 26px 2px rgba(255, 90, 90, 0.3);
}
.acgd-power .pbtag { flex: 0 0 9rem; font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); padding-top: 0.4rem; line-height: 1.35; }
.acgd-power .pbbig { font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1.25; }
.acgd-power .pbbig em { font-style: normal; color: var(--amber-bright); }
.acgd-power .pbsub { font-size: 1.4rem; color: var(--ink-faint); margin-top: 0.8rem; line-height: 1.5; }

/* ---------- keys and chips: the site's amber key language ---------- */
.acgd kbd {
  font-family: var(--mono); font-size: 1.25rem; white-space: nowrap;
  padding: 0.1rem 0.7rem; border: 1px solid rgba(233, 239, 231, 0.25);
  border-radius: 0.5rem; background: rgba(233, 239, 231, 0.05);
  color: var(--amber);
}
.acgd code { font-family: var(--mono); font-size: 1.3rem; background: rgba(233, 239, 231, 0.07); padding: 0.1rem 0.6rem; color: var(--ink); }

/* the four string rows */
.acgd-rows { margin: 1.6rem 0 0; overflow-x: auto; padding-bottom: 0.4rem; }
.acgd-row2 { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 0.7rem; min-width: 52rem; }
.acgd-row2 .tagl { flex: 0 0 11rem; font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.acgd-row2 .keys { display: flex; gap: 0.5rem; }
.acgd-row2 .keys span {
  width: 3rem; height: 3rem; border: 1px solid var(--rule); background: rgba(233, 239, 231, 0.04);
  font-family: var(--mono); font-size: 1.3rem; display: flex; align-items: center;
  justify-content: center; color: var(--ink);
}
.acgd-row2.hi .keys span { border-color: rgba(87, 227, 137, 0.45); }
.acgd-row2.jam .keys span { border-color: rgba(245, 168, 60, 0.6); color: var(--amber); }
.acgd-row2 .aside { font-size: 1.2rem; color: var(--ink-faint); font-family: var(--mono); letter-spacing: 0.06em; white-space: nowrap; }

/* gestures — lattice cells: dashed border over fading graph paper */
.acgd-ges { position: relative; overflow: hidden; background: var(--panel); border: 1px dashed rgba(233, 239, 231, 0.22); padding: 1.6rem 2rem; margin: 0 0 1.4rem; }
.acgd-ges::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(233, 239, 231, 0.055) 0 1px, transparent 1px 2.2rem),
    repeating-linear-gradient(90deg, rgba(233, 239, 231, 0.055) 0 1px, transparent 1px 2.2rem);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
}
.acgd-ges > * { position: relative; }
.acgd-ges.amber {
  border-color: rgba(245, 168, 60, 0.45);
  box-shadow: 0 16px 36px -18px rgba(245, 168, 60, 0.3);
}
.acgd-ges .keysline { font-family: var(--mono); font-size: 1.15rem; color: var(--amber); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; }
.acgd-ges h4 { font-size: 1.7rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--ink); }
.acgd-ges p { margin: 0; font-size: 1.45rem; }

/* two-up */
.acgd-twocol { display: flex; gap: 3.2rem; margin: 1.4rem 0 0; }
.acgd-twocol > * { flex: 1; min-width: 0; }

/* reference table */
.acgd-ref { width: 100%; border-collapse: collapse; margin-top: 0.6rem; }
.acgd-ref td { padding: 0.55rem 0; border-top: 1px solid var(--rule); vertical-align: top; font-size: 1.4rem; line-height: 1.5; color: var(--ink-soft); }
.acgd-ref td.k { width: 13.5rem; font-family: var(--mono); font-size: 1.25rem; color: var(--ink); padding-right: 1.2rem; }
.acgd-ref tr:first-child td { border-top: none; }
.acgd-ref td b { color: var(--ink); font-weight: 600; }

/* tick list */
.acgd-tick { list-style: none; margin: 0; padding: 0; }
.acgd-tick li { position: relative; padding-left: 1.8rem; margin-bottom: 0.7rem; font-size: 1.45rem; color: var(--ink-soft); }
.acgd-tick li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.8rem; height: 2px; background: var(--green); }
.acgd-tick li b { color: var(--ink); font-weight: 600; }

/* ---------- the step sequence ---------- */
.acgd-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 1.2rem 0 0; }
.acgd-map > div { border: 1px solid var(--rule); background: var(--panel); padding: 0.9rem 1.2rem; }
.acgd-map .n { font-family: var(--mono); font-size: 1.1rem; color: var(--amber); font-weight: 700; letter-spacing: 0.1em; }
.acgd-map .t { font-size: 1.35rem; line-height: 1.35; margin-top: 0.4rem; color: var(--ink); }
.acgd-map > div.p2 { border-color: rgba(127, 166, 201, 0.4); }
.acgd-map > div.p2 .n { color: var(--steel); }

.acgd-step { display: flex; gap: 2rem; margin: 0 0 2.6rem; }
.acgd-step .num { flex: 0 0 4rem; height: 4rem; border: 1px solid rgba(245, 168, 60, 0.6); font-family: var(--mono); font-weight: 700; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; color: var(--amber); }
.acgd-step .body { flex: 1; min-width: 0; }
.acgd-step h3 { font-size: 1.8rem; font-weight: 600; line-height: 1.3; margin: 0.6rem 0 0.5rem; color: var(--ink); }
.acgd-step p { margin: 0; }
.acgd-step p + p { margin-top: 0.7rem; }
.acgd-step .why { font-size: 1.35rem; color: var(--ink-faint); font-style: italic; margin-top: 0.6rem; }
.acgd a.acgd-url {
  font-family: var(--mono); font-size: 1.3rem; color: var(--green);
  background: var(--panel); border: 1px dashed rgba(245, 168, 60, 0.4);
  padding: 1rem 1.4rem; margin-top: 1rem; word-break: break-all; line-height: 1.45;
  display: block; text-decoration: none;
}
.acgd a.acgd-url:hover { color: var(--amber-bright); }

/* menu path */
.acgd-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 1.2rem; font-family: var(--mono); font-size: 1.2rem; }
.acgd-path span { background: var(--panel); border: 1px solid var(--rule); padding: 0.5rem 0.9rem; color: var(--ink-soft); }
.acgd-path span + span::before { content: "\2192"; color: var(--amber); margin-right: 0.9rem; margin-left: -0.2rem; }
.acgd-path .end { background: var(--green); border-color: var(--green); color: #0C0F0D; font-weight: 700; }

/* the two triggers */
.acgd-edge { display: flex; gap: 3rem; margin-top: 1.2rem; }
.acgd-edge > div { flex: 1; min-width: 0; }
.acgd-edge .lbl { font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.5rem; }
.acgd-edge .lbl.l { color: var(--red); }
.acgd-edge .lbl.r { color: var(--steel); }
.acgd-edge p { font-size: 1.4rem; }

/* troubleshooting rows */
.acgd-tr { border-top: 1px solid var(--rule); padding: 1rem 0; }
.acgd-tr h4 { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.3rem; color: var(--ink); }
.acgd-tr h4::before { content: "\25B8  "; color: var(--amber); }
.acgd-tr p { margin: 0; font-size: 1.4rem; }

/* ---------- device screens: powered-on hardware, under-lit like the site ---------- */
.acgd-lsc {
  background: #000; border: 1px solid rgba(233, 239, 231, 0.18); padding: 1rem 1.3rem 0.9rem;
  max-width: 40rem; font-family: var(--mono); color: #DDE4F2; margin-top: 1.2rem;
  box-shadow: 0 16px 40px -16px rgba(87, 227, 137, 0.25);
}
.acgd-lsc .lbar { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; color: #9AA3B8; }
.acgd-lsc .batt { display: inline-block; width: 1.5rem; height: 0.8rem; border: 1px solid #9AA3B8; margin-left: 0.5rem; position: relative; vertical-align: -1px; }
.acgd-lsc .batt i { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 32%; background: #DDE4F2; }
.acgd-lsc .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.9rem 0 0.8rem; }
.acgd-lsc .tile { border: 1px solid #DDE4F2; border-radius: 5px; text-align: center; padding: 0.45rem 0 0.5rem; font-size: 1.2rem; }
.acgd-lsc .tile.sel { background: #EDF2FB; color: #000; border-color: #fff; font-weight: 700; }
.acgd-lsc .tile.app { border-color: #FF6A45; color: #FF6A45; grid-column: 2; text-shadow: 0 0 8px rgba(255, 106, 69, 0.5); }
.acgd-lsc .hint { text-align: center; font-size: 1rem; color: #9AA3B8; }

.acgd-splash { background: #000; border: 1px solid rgba(233, 239, 231, 0.18); padding: 1rem 1.3rem 0.8rem; margin-top: 1.2rem; position: relative; font-family: var(--mono); max-width: 34rem; box-shadow: 0 16px 40px -16px rgba(87, 227, 137, 0.25); }
.acgd-splash .ver { position: absolute; top: 0.7rem; right: 1.2rem; font-size: 1rem; color: #8A8A8A; }
.acgd-splash img { display: block; width: 55%; margin: 0.6rem auto; }
.acgd-splash .credit { text-align: center; font-size: 0.95rem; color: #6A696A; }

.acgd-caption { font-family: var(--mono); font-size: 1.05rem; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.7rem; }

/* ---------- closing: the glow-card treatment ---------- */
.acgd-close { padding: 2rem 0 6rem; }
.acgd-close .inner {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 2rem;
  padding: 3.2rem 3.2rem 3.6rem; max-width: 62rem; margin: 0 auto;
  box-shadow: 0 24px 60px -18px rgba(87, 227, 137, 0.2), 0 18px 44px rgba(0, 0, 0, 0.35);
}
.acgd-close h3 { color: var(--ink); font-size: 2.2rem; font-weight: 700; margin: 0 0 1rem; }
.acgd-close p { color: var(--ink-soft); font-size: 1.5rem; line-height: 1.55; margin: 0; }
.acgd-close .links { margin-top: 1.6rem; font-family: var(--mono); font-size: 1.35rem; line-height: 2; overflow-wrap: anywhere; }
.acgd-close .links a { color: var(--amber); text-decoration: none; }
.acgd-close .links a:hover { color: var(--amber-bright); }
.acgd-close .links a:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 2px; }

/* cross-link to the other guide */
.acgd-next { display: block; margin-top: 2.4rem; border: 1px solid var(--rule); border-radius: 1.2rem; padding: 1.6rem 2rem; text-decoration: none; }
.acgd-next .k { font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); }
.acgd-next .t { color: var(--ink); font-size: 1.8rem; font-weight: 700; margin-top: 0.5rem; }
.acgd-next .s { color: var(--ink-faint); font-size: 1.35rem; margin-top: 0.4rem; }
@media (hover: hover) and (pointer: fine) {
  .acgd-next { transition: border-color 180ms ease, transform 180ms ease; }
  .acgd-next:hover { border-color: rgba(245, 168, 60, 0.5); transform: translateY(-2px); }
  .acgd-next:hover .t { color: var(--amber); }
}
@media (prefers-reduced-motion: reduce) {
  .acgd-next:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media screen and (max-width: 749px) {
  .acgd-mast { padding: 3.6rem 0 3rem; }
  .acgd-twocol { flex-direction: column; gap: 0.4rem; }
  .acgd-edge { flex-direction: column; gap: 1.6rem; }
  .acgd-map { grid-template-columns: 1fr 1fr; }
  .acgd-power { flex-direction: column; gap: 0.8rem; padding: 1.5rem 1.8rem; }
  .acgd-power .pbtag { flex: none; }
  .acgd-step { gap: 1.4rem; margin-bottom: 2.2rem; }
  .acgd-step .num { flex-basis: 3.4rem; height: 3.4rem; font-size: 1.5rem; }
  .acgd-partbar { margin-top: 3.6rem; }
  .acgd-partbar .note { display: none; }
  .acgd-row2 .tagl { flex-basis: 9rem; }
  .acgd-close .inner { padding: 2.4rem 2rem 2.8rem; }
}

/* ====================================================================
   Second pass: the pieces the guide hub, the library and the reference
   pages needed on top of the two original guides. Same palette, same
   motifs. Nothing above this line changed.
   ==================================================================== */

/* ---------- diagrams (the firmware repo's animated SVGs, drawn on a black panel) ---------- */
.acgd-fig { margin: 2rem 0 0; background: #000; border: 1px solid var(--rule); border-radius: 1.2rem; padding: 1.4rem 1.6rem 1.2rem; }
.acgd-fig img { display: block; width: 100%; height: auto; }
.acgd-fig figcaption { font-family: var(--mono); font-size: 1.05rem; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1rem; }
.acgd-fig.tight { padding: 0.8rem 1rem 0.9rem; }

/* ---------- the two shorts, side by side, portrait ---------- */
.acgd-watch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin: 2.4rem 0 0; max-width: 54rem; }
.acgd-watch .frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 1.2rem;
  background: #000; border: 1px solid var(--rule);
  box-shadow: 0 18px 44px -18px rgba(87, 227, 137, 0.25);
}
.acgd-watch iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.acgd-watch .cap { font-family: var(--mono); font-size: 1.05rem; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.8rem; }
@media screen and (max-width: 749px) { .acgd-watch { gap: 1rem; } }

/* ---------- the guide hub: every guide but this one, as cards ---------- */
.acgd-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 1.2rem; margin-top: 2.4rem; }
.acgd-hub .acgd-next { margin-top: 0; height: 100%; box-sizing: border-box; }
.acgd-hub-lead a { color: var(--amber); text-decoration: none; letter-spacing: 0.12em; }
.acgd-hub-lead a:hover { color: var(--amber-bright); }
.acgd-hub-lead { font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin: 2.4rem 0 -1.2rem; }

/* ---------- the sound library cards ---------- */
.acgd-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.acgd-lib .card {
  position: relative; overflow: hidden; background: var(--panel); border: 1px dashed rgba(233, 239, 231, 0.22);
  padding: 1.4rem 1.6rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.acgd-lib .card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(233, 239, 231, 0.05) 0 1px, transparent 1px 2.2rem),
    repeating-linear-gradient(90deg, rgba(233, 239, 231, 0.05) 0 1px, transparent 1px 2.2rem);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
}
.acgd-lib .card > * { position: relative; }
.acgd-lib .card.bank { border-style: solid; border-color: rgba(245, 168, 60, 0.4); }
.acgd-lib .name { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.7rem; font-weight: 700; color: var(--ink); margin: 0; }
.acgd-lib .slot { flex: 0 0 auto; font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(245, 168, 60, 0.5); padding: 0.2rem 0.7rem; }
.acgd-lib .slot.none { color: var(--ink-faint); border-color: var(--rule); }
.acgd-lib .desc { font-size: 1.35rem; line-height: 1.5; color: var(--ink-soft); margin: 0; flex: 1; }
.acgd-lib a.dl { align-self: flex-start; font-family: var(--mono); font-size: 1.2rem; letter-spacing: 0.06em; color: var(--green); text-decoration: none; margin-top: 0.5rem; }
.acgd-lib a.dl::before { content: "\2193 "; }
.acgd-lib a.dl:hover { color: var(--amber-bright); }

/* ---------- wide reference tables scroll inside themselves ---------- */
.acgd-scroll { overflow-x: auto; margin-top: 0.6rem; -webkit-overflow-scrolling: touch; }
.acgd-ref.wide { min-width: 66rem; }
.acgd-ref.wide td.k { width: 17rem; }
.acgd-ref th { text-align: left; font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); font-weight: 400; padding: 0 1.2rem 0.6rem 0; }
.acgd-ref td.v { font-family: var(--mono); font-size: 1.2rem; color: var(--ink); padding-right: 1.2rem; white-space: nowrap; }
.acgd-ref td.d { font-family: var(--mono); font-size: 1.2rem; color: var(--amber); padding-right: 1.2rem; white-space: nowrap; }
.acgd-ref td.w { font-size: 1.25rem; color: var(--ink-faint); }

/* ---------- plain-text keymap ---------- */
.acgd-pre {
  background: #000; border: 1px solid var(--rule); padding: 1.4rem 1.6rem; margin: 1.2rem 0 0;
  font-family: var(--mono); font-size: 1.2rem; line-height: 1.65; color: var(--ink-soft);
  overflow-x: auto; white-space: pre; tab-size: 4;
}
.acgd-pre b { color: var(--amber); font-weight: 400; }

/* ---------- settings tree ---------- */
.acgd-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.acgd-tree > div { background: var(--panel); border: 1px solid var(--rule); padding: 1.2rem 1.4rem; }
.acgd-tree .h { font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); }
.acgd-tree ul { list-style: none; margin: 0.7rem 0 0; padding: 0; font-size: 1.35rem; line-height: 1.75; color: var(--ink-soft); }
.acgd-tree li b { color: var(--ink); font-weight: 600; }
.acgd-tree li i { color: var(--ink-faint); font-style: normal; }

/* ---------- the character pool ---------- */
.acgd-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.9rem; margin-top: 1.4rem; }
.acgd-chars > div { border: 1px dashed rgba(233, 239, 231, 0.22); background: var(--panel); padding: 1.1rem 1.3rem; }
.acgd-chars > div.new { border-color: rgba(87, 227, 137, 0.45); }
.acgd-chars .n { font-weight: 700; font-size: 1.5rem; color: var(--ink); display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.acgd-chars .n i { font-family: var(--mono); font-style: normal; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.acgd-chars .d { font-size: 1.3rem; line-height: 1.45; color: var(--ink-soft); margin-top: 0.4rem; }

/* ---------- recipes (mod matrix) ---------- */
.acgd-recipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.acgd-recipe > div { background: var(--panel); border: 1px solid var(--rule); padding: 1.1rem 1.4rem; }
.acgd-recipe .r { font-family: var(--mono); font-size: 1.15rem; color: var(--amber); letter-spacing: 0.06em; }
.acgd-recipe .r em { font-style: normal; color: var(--ink-faint); }
.acgd-recipe .t { font-weight: 700; font-size: 1.5rem; color: var(--ink); margin-top: 0.4rem; }
.acgd-recipe .d { font-size: 1.3rem; color: var(--ink-soft); margin-top: 0.3rem; line-height: 1.45; }

/* ---------- the "ask" strip on the help page reuses the download block ---------- */
.acgd-dl.ask { margin-top: 2.4rem; }
.acgd-dl.ask .acgd-dl-note a { color: var(--amber); text-decoration: none; }
.acgd-dl.ask .acgd-dl-note a:hover { color: var(--amber-bright); }

@media screen and (max-width: 749px) {
  .acgd-fig { padding: 1rem 1rem 0.9rem; border-radius: 0.9rem; }
  .acgd-lib { grid-template-columns: 1fr; }
  .acgd-tree, .acgd-recipe { grid-template-columns: 1fr; }
}

/* ---------- desktop: the contents strip sticks and lights the current section ---------- */
.acgd-toc a { position: relative; padding-bottom: 0.3rem; transition: color 180ms ease; }
.acgd-toc a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--amber); transition: right 260ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media screen and (min-width: 990px) {
  /* the wrapper sticks (it's the toc's parent, so the toc alone has nothing to stick within) */
  .acgd-tocwrap {
    position: sticky; top: var(--acgd-top, 0px); z-index: 2; /* under the header (z 3) so its dropdown covers the strip */
    max-width: none; padding: 0;
    background: rgba(12, 15, 13, 0.82);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: top 200ms ease, box-shadow 260ms ease;
  }
  .acgd-tocwrap .acgd-toc { max-width: 76rem; margin: 0 auto; padding: 1.4rem 2rem; box-sizing: border-box; }
  .acgd-tocwrap.is-stuck {
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(87, 227, 137, 0.08);
  }
  .acgd-toc a.is-current { color: var(--ink); }
  .acgd-toc a.is-current::after { right: 0; }
  .acgd-toc a:hover::after { right: 0; background: var(--amber-bright); }
  .acgd-part { scroll-margin-top: calc(var(--acgd-top, 0px) + 8rem); }
}
}
@media (prefers-reduced-motion: reduce) {
  .acgd-tocwrap, .acgd-toc a, .acgd-toc a::after { transition: none; }
}

/* ---------- desktop masthead: the GLIDE mark sits left of the words ---------- */
@media screen and (min-width: 990px) {
  .acgd-mast { padding: 4.4rem 0 3.8rem; }
  .acgd-mast > .acgd-col {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
    column-gap: 4.8rem; align-items: center; align-content: center;
  }
  .acgd-mast > .acgd-col > img { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 24rem; max-width: none; margin: 0; }
  .acgd-mast .acgd-kicker, .acgd-mast h1, .acgd-mast .acgd-sub { grid-column: 2; }
  .acgd-mast .acgd-kicker { margin-top: 0; align-self: end; }
  .acgd-mast h1 { margin-top: 0.8rem; }
  .acgd-mast .acgd-sub { margin-top: 1.2rem; align-self: start; }
}

/* ---------- the support index: every guide as a card ---------- */
.acgi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin-top: 2.4rem; }
.acgi-grid--people { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.4rem; }
.acgd a.acgi-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 1.6rem;
  text-decoration: none; color: var(--ink);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 220ms ease, box-shadow 260ms ease;
}
.acgd a.acgi-card::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(87, 227, 137, 0.75), transparent);
  opacity: 0; transition: opacity 260ms ease;
}
.acgi-card--wide { grid-column: 1 / -1; flex-direction: row; }
.acgi-card--wide .art { flex: 0 0 46%; }
.acgi-card--wide .words { flex: 1; padding: 3rem 3.2rem; display: flex; flex-direction: column; justify-content: center; }
.acgi-card .art {
  background: #000; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: center;
  min-height: 15rem; padding: 1.4rem 1.6rem; overflow: hidden;
}
.acgi-card--wide .art { border-bottom: 0; border-right: 1px solid var(--rule); padding: 2rem; }
.acgi-card .art--svg img { width: 100%; height: auto; display: block; max-height: 18rem; object-fit: contain; }
.acgi-card .art--screen .acgd-lsc { margin: 0; width: 100%; max-width: 30rem; box-shadow: none; }
.acgi-card .art--chips, .acgi-card .art--symptoms { flex-wrap: wrap; gap: 0.5rem; align-content: center; }
.acgi-card .art--chips span {
  font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.06em; color: var(--amber);
  border: 1px solid rgba(245, 168, 60, 0.5); padding: 0.3rem 0.7rem;
}
.acgi-card .art--chips span.x { color: var(--ink-soft); border-color: var(--rule); }
.acgi-card .art--symptoms span {
  font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.06em; color: var(--red);
  border: 1px solid rgba(255, 90, 90, 0.4); padding: 0.3rem 0.7rem;
}
.acgi-card .art--symptoms span.ok { color: #0C0F0D; background: var(--green); border-color: var(--green); font-weight: 700; }
.acgi-card .words { padding: 1.8rem 2rem 2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.acgi-card .k { font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); }
.acgi-card .t { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; transition: color 180ms ease; }
.acgi-card--wide .t { font-size: 2.8rem; }
.acgd .acgi-card .s { margin: 0.2rem 0 0; font-size: 1.4rem; line-height: 1.55; color: var(--ink-soft); }
.acgi-card .s code { font-size: 1.2rem; }
.acgi-card .go {
  margin-top: auto; padding-top: 1.2rem; font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber);
}
.acgi-card .go span { display: inline-block; transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.acgi-card--flat { border-style: dashed; }
.acgi-card--flat .t { font-size: 1.7rem; }
@media (hover: hover) and (pointer: fine) {
  .acgd a.acgi-card:hover { transform: translateY(-3px); border-color: rgba(245, 168, 60, 0.45); box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.7), 0 18px 44px -26px rgba(87, 227, 137, 0.35); }
  .acgd a.acgi-card:hover::after { opacity: 1; }
  .acgd a.acgi-card:hover .t { color: var(--amber); }
  .acgd a.acgi-card:hover .go span { transform: translateX(4px); }
}
.acgd a.acgi-card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media screen and (max-width: 989px) {
  .acgi-grid--people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acgi-card--wide { flex-direction: column; }
  .acgi-card--wide .art { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  .acgi-card--wide .words { padding: 1.8rem 2rem 2rem; }
  .acgi-card--wide .t { font-size: 2.2rem; }
}
@media screen and (max-width: 749px) {
  .acgi-grid, .acgi-grid--people { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .acgd a.acgi-card, .acgi-card .go span, .acgi-card .t { transition: none; }
  .acgd a.acgi-card:hover { transform: none; }
}