/* Rangooo guide mode: the phone app view of the non-idea pages (see guidemode.js).
   EVERYTHING here sits inside @media (max-width:699px): at 700px and wider this file changes nothing. */
@media (max-width: 699px) {

  /* no flash of the long page: until the script has decided (or after 1.4s if it never runs) the body stays transparent */
  html:not(.gm-on):not(.gm-skip) body { opacity: 0; animation: gm-reveal 0s linear 1.4s forwards; }
  @keyframes gm-reveal { to { opacity: 1; } }

  /* ---------- tokens (light) ---------- */
  html.gm-on {
    --gm-bg: #F6F6F2; --gm-surface: #FFFFFF; --gm-paper: #FBF9F4; --gm-sunken: #F3EFE6;
    --gm-ink: #16202C; --gm-muted: #5A6573; --gm-line: rgba(22,32,44,.10); --gm-line2: #CFD2CB;
    --gm-acc: #145C63; --gm-acc2: #0F474D; --gm-acc-soft: #E8F1F2; --gm-acc-tint: rgba(20,92,99,.08); --gm-on-acc: #FFFFFF;
    --gm-warm: #FBEFE2; --gm-warm-edge: #F1D6B8; --gm-warm-ink: #7A4F12; --gm-warm-plate: #F5DDBF;
    --gm-hero-a: #17666E; --gm-hero-b: #0E434A; --gm-hero-ink: #FFFFFF;
    --gm-shadow: 0 1px 2px rgba(22,32,44,.04), 0 10px 28px rgba(22,32,44,.07);
    --gm-scrim: rgba(22,32,44,.5); --gm-focus: #E8590C;
    --gm-head: 'Fraunces', Georgia, 'Times New Roman', serif;
    --gm-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --gm-ease: cubic-bezier(.2,.7,.2,1);
    --gm-bottom: var(--dock-h, calc(12px + env(safe-area-inset-bottom, 0px)));
    color-scheme: light;
    background: var(--gm-bg);
  }
  /* ---------- tokens (night): the site's night switch, or the phone's own dark setting ---------- */
  html[data-night="1"].gm-on {
    --gm-bg: #0F1720; --gm-surface: #18222D; --gm-paper: #1D2935; --gm-sunken: #223140;
    --gm-ink: #E9EEF2; --gm-muted: #9BA8B5; --gm-line: #263341; --gm-line2: #3A4C5F;
    --gm-acc: #4FB3C4; --gm-acc2: #7CCBD8; --gm-acc-soft: rgba(79,179,196,.16); --gm-acc-tint: rgba(79,179,196,.12); --gm-on-acc: #08161B;
    --gm-warm: #2A2319; --gm-warm-edge: #52401F; --gm-warm-ink: #F0C98A; --gm-warm-plate: #3A2E1B;
    --gm-hero-a: #17414A; --gm-hero-b: #0E2A31; --gm-hero-ink: #EAF4F3;
    --gm-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
    --gm-scrim: rgba(3,8,12,.64);
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    html.gm-on:not([data-night="0"]):not([data-night="1"]) {
      --gm-bg: #0F1720; --gm-surface: #18222D; --gm-paper: #1D2935; --gm-sunken: #223140;
      --gm-ink: #E9EEF2; --gm-muted: #9BA8B5; --gm-line: #263341; --gm-line2: #3A4C5F;
      --gm-acc: #4FB3C4; --gm-acc2: #7CCBD8; --gm-acc-soft: rgba(79,179,196,.16); --gm-acc-tint: rgba(79,179,196,.12); --gm-on-acc: #08161B;
      --gm-warm: #2A2319; --gm-warm-edge: #52401F; --gm-warm-ink: #F0C98A; --gm-warm-plate: #3A2E1B;
      --gm-hero-a: #17414A; --gm-hero-b: #0E2A31; --gm-hero-ink: #EAF4F3;
      --gm-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
      --gm-scrim: rgba(3,8,12,.64);
      color-scheme: dark;
    }
  }

  /* ---------- the long page steps aside: clipped and inert, still in the document (not display:none) ---------- */
  html.gm-on main.fp[data-gm-hidden] { position: absolute !important; top: 0; left: 0; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
  html.gm-on body > header, html.gm-on body > footer, html.gm-on .c3d-toggle { display: none !important; }
  html.gm-on, html.gm-on body { overflow: hidden; overscroll-behavior: none; }
  html.gm-on body { background: var(--gm-bg); padding-bottom: 0 !important; }

  /* ---------- shell ---------- */
  .gm-root { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; padding-bottom: var(--gm-bottom);
    background: var(--gm-bg); color: var(--gm-ink); font: 400 16px/1.5 var(--gm-ui); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased; }
  .gm-root *, .gm-layer * { box-sizing: border-box; }
  .gm-root a, .gm-root button, .gm-root summary, .gm-layer button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .gm-root :focus-visible, .gm-layer :focus-visible { outline: 3px solid var(--gm-focus); outline-offset: 2px; }
  .gm-pager:focus-visible { outline-offset: -3px; border-radius: 28px; }
  .gm-i { display: inline-flex; flex: none; line-height: 0; }
  .gm-i svg { display: block; }
  .gm-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gm-press { transition: transform .12s var(--gm-ease), background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
  .gm-press:active { transform: scale(.97); }
  .gm-root a { color: var(--gm-acc); }
  :where(.gm-root, .gm-layer) :where(h1, h2, h3, p, ul, ol) { margin: 0; }
  .gm-root :where(p, li, h1, h2, h3, a, b, summary) { overflow-wrap: anywhere; }

  /* ---------- app bar ---------- */
  .gm-bar { flex: none; display: flex; align-items: center; gap: 4px; min-height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px)); }
  .gm-back { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: var(--gm-ink) !important; text-decoration: none; }
  .gm-back:active { background: var(--gm-acc-tint); }
  .gm-title { flex: 1; min-width: 0; font: 600 17px/1.2 var(--gm-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
  .gm-safe { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 11px; border: 1.5px solid var(--gm-warm-edge); border-radius: 999px; background: var(--gm-warm); color: var(--gm-warm-ink); font: 700 14px/1 var(--gm-ui); cursor: pointer; }
  .gm-safe:active { background: var(--gm-warm-plate); }

  /* ---------- hero ---------- */
  .gm-hero, .gm-s-hero .gm-sbody { position: relative; overflow: hidden; color: var(--gm-hero-ink); background: radial-gradient(120% 90% at 0% 0%, var(--gm-hero-a), transparent 70%), linear-gradient(160deg, var(--gm-hero-a), var(--gm-hero-b)); }
  .gm-hero { margin: 4px 14px 0; padding: 22px 20px 20px; border-radius: 28px; box-shadow: var(--gm-shadow); }
  .gm-orn { position: absolute; right: -34px; top: -34px; width: 150px; height: 150px; color: rgba(255,255,255,.17); pointer-events: none; }
  .gm-orn svg { width: 100%; height: 100%; display: block; }
  .gm-root .gm-kick { position: relative; margin: 0 0 8px; font: 700 12px/1.2 var(--gm-ui); letter-spacing: .14em; text-transform: uppercase; color: #FFE6C4; }
  .gm-root .gm-kick-d, .gm-layer .gm-kick-d { color: #9A4310; margin: 0; }
  html[data-night="1"].gm-on .gm-kick-d { color: #F0A862; }
  @media (prefers-color-scheme: dark) { html.gm-on:not([data-night="0"]):not([data-night="1"]) .gm-kick-d { color: #F0A862; } }
  .gm-h1 { position: relative; font: 500 29px/1.12 var(--gm-head); letter-spacing: -.012em; color: var(--gm-hero-ink); text-wrap: balance; }
  .gm-root .gm-lead { position: relative; margin-top: 12px; font: 400 16px/1.55 var(--gm-ui); color: rgba(255,255,255,.9); }
  .gm-clamp:not(.open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  .gm-toggle { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: 2px 0 0 -4px; padding: 0 4px; border: 0; background: none; color: #FFE6C4; font: 700 14px/1 var(--gm-ui); cursor: pointer; }
  .gm-meta { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .gm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px 0 9px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font: 600 13px/1 var(--gm-ui); }
  .gm-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; margin-top: 18px; padding: 0 20px; border: 0; border-radius: 18px; background: #fff; color: var(--gm-hero-b); font: 700 17px/1 var(--gm-ui); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
  .gm-cta-solid { background: var(--gm-acc); color: var(--gm-on-acc); box-shadow: none; margin-top: 0; }

  /* safety banner under the hero */
  .gm-safebar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 12px 0 0; padding: 12px 14px; border: 1.5px solid var(--gm-warm-edge); border-radius: 20px; background: var(--gm-warm); color: var(--gm-warm-ink); text-align: left; font: inherit; cursor: pointer; }
  .gm-s-hero .gm-safebar { margin-top: 16px; }
  .gm-scroll > .gm-safebar { width: calc(100% - 28px); margin: 12px 14px 0; }
  .gm-sb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .gm-sb-t b { font: 700 15px/1.2 var(--gm-ui); }
  .gm-sb-t span { font: 400 13.5px/1.35 var(--gm-ui); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

  /* ---------- stack layout: accordion cards ---------- */
  .gm-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-top: 8px; padding-bottom: 12px; scrollbar-width: none; }
  .gm-scroll::-webkit-scrollbar { display: none; }
  .gm-stack { display: flex; flex-direction: column; gap: 10px; margin: 14px 14px 0; }
  .gm-card, .gm-note { border-radius: 22px; background: var(--gm-surface); border: 1px solid var(--gm-line); box-shadow: var(--gm-shadow); overflow: clip; }
  .gm-card > summary, .gm-note > summary, .gm-acc > summary { list-style: none; cursor: pointer; }
  .gm-card > summary::-webkit-details-marker, .gm-note > summary::-webkit-details-marker, .gm-acc > summary::-webkit-details-marker { display: none; }
  .gm-ch { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; }
  .gm-plate { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--gm-acc-soft); color: var(--gm-acc); }
  .gm-plate-big { width: 48px; height: 48px; margin-bottom: 12px; }
  .gm-plate-warm { background: var(--gm-warm-plate); color: var(--gm-warm-ink); }
  .gm-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .gm-ct b { font: 600 17px/1.25 var(--gm-head); letter-spacing: -.005em; }
  .gm-ct span { font: 400 13.5px/1.35 var(--gm-ui); color: var(--gm-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
  .gm-card[open] .gm-ct span { display: none; }
  .gm-chev { color: var(--gm-muted); transition: transform .2s var(--gm-ease); }
  details[open] > summary > .gm-chev { transform: rotate(180deg); }
  .gm-cp { padding: 2px 16px 18px; }
  .gm-sh { display: flex; align-items: center; gap: 8px; margin: 26px 18px 10px; font: 600 19px/1.2 var(--gm-head); }
  .gm-sh .gm-i { color: var(--gm-acc); }
  .gm-explore { margin: 0; }
  .gm-scroll > .gm-explore .gm-rail { padding: 2px 14px 6px; }
  .gm-scroll > .gm-note { margin: 18px 14px 0; box-shadow: none; }
  .gm-tail { height: 8px; }

  /* ---------- pager layout ---------- */
  .gm-pager { flex: 1; min-height: 0; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 14px; overscroll-behavior-x: contain; padding: 4px 14px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gm-pager::-webkit-scrollbar { display: none; }
  .gm-slide { position: relative; flex: 0 0 calc(100% - 22px); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; opacity: .62; transition: opacity .25s; }
  .gm-slide.is-active { opacity: 1; }
  .gm-wrap { position: relative; flex: 1; min-height: 0; display: flex; border-radius: 28px; overflow: hidden; background: var(--gm-surface); border: 1px solid var(--gm-line); box-shadow: var(--gm-shadow); }
  .gm-s-hero .gm-wrap { border: 0; background: transparent; }
  .gm-sbody { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px 18px 28px; scrollbar-width: none; }
  .gm-sbody::-webkit-scrollbar { display: none; }
  .gm-s-hero .gm-sbody { display: flex; flex-direction: column; padding: 26px 22px 24px; }
  .gm-s-hero .gm-cta { margin-top: auto; }
  .gm-s-hero .gm-meta { margin-bottom: 22px; }
  .gm-slide:not(.is-active) .gm-sbody { visibility: hidden; }
  .gm-slide:not(.is-active) { opacity: .5; }
  .gm-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--gm-surface) 85%); opacity: 0; transition: opacity .2s; pointer-events: none; }
  .gm-more-below .gm-fade { opacity: 1; }
  .gm-s-hero .gm-fade { display: none; }
  .gm-h2 { font: 500 25px/1.15 var(--gm-head); letter-spacing: -.01em; text-wrap: balance; }
  .gm-row0 { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .gm-row0 .gm-h2 { flex: 1; min-width: 0; font-size: 23px; }
  .gm-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gm-acc); color: var(--gm-on-acc); font: 700 19px/1 var(--gm-ui); }

  .gm-ctl { flex: none; display: flex; align-items: center; gap: 10px; padding: 2px 14px 8px; }
  .gm-nav { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--gm-line2); background: var(--gm-surface); color: var(--gm-ink); cursor: pointer; }
  .gm-nav:disabled { opacity: .35; cursor: default; }
  .gm-prog { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .gm-plab { max-width: 100%; font: 600 13.5px/1.2 var(--gm-ui); color: var(--gm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gm-meter { display: block; width: 100%; max-width: 220px; height: 5px; border-radius: 9px; background: var(--gm-line); overflow: hidden; }
  .gm-meter-in { display: block; height: 100%; width: 100%; border-radius: 9px; background: var(--gm-acc); transform-origin: 0 50%; transform: scaleX(max(.04, var(--gm-p, 0))); transition: transform .3s var(--gm-ease); }

  /* ---------- content typography ---------- */
  .gm-p, .gm-tp, .gm-cb { font: 400 16.5px/1.62 var(--gm-ui); color: var(--gm-ink); }
  .gm-p + .gm-p, .gm-p + .gm-rail, .gm-rail + .gm-p, .gm-ul + .gm-p, .gm-p + .gm-ul, .gm-ol + .gm-p, .gm-p + .gm-ol { margin-top: 12px; }
  .gm-cp > :first-child { margin-top: 2px; }
  .gm-small { font-size: 14px; color: var(--gm-muted); }
  .gm-h3 { margin: 20px 0 6px; font: 600 18px/1.25 var(--gm-head); }
  .gm-lab { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font: 700 13px/1.2 var(--gm-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gm-muted); }
  .gm-lab .gm-i { color: var(--gm-acc); }
  .gm-ln { font-weight: 600; }
  .gm-p a, .gm-ans a, .gm-tp a, .gm-cb a, .gm-rv a, .gm-ul a { color: var(--gm-acc); font-weight: 600; text-decoration: none; background: linear-gradient(var(--gm-acc-tint), var(--gm-acc-tint)) 0 100%/100% 2px no-repeat; padding: 2px 0; }
  .gm-ul, .gm-ol { padding: 0; list-style: none; }
  .gm-ul { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .gm-ul > li { position: relative; padding-left: 26px; font: 400 16.5px/1.55 var(--gm-ui); }
  .gm-ul > li::before { content: ''; position: absolute; left: 4px; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--gm-acc); opacity: .7; }
  .gm-ol { counter-reset: gm; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .gm-ol > li { counter-increment: gm; position: relative; min-height: 36px; padding: 2px 0 2px 46px; font: 400 16.5px/1.55 var(--gm-ui); }
  .gm-ol > li::before { content: counter(gm); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gm-acc-soft); color: var(--gm-acc); font: 700 15px/1 var(--gm-ui); }
  .gm-ol > li em { display: block; margin-top: 6px; padding: 8px 12px; border-radius: 12px; background: var(--gm-sunken); font-style: normal; font-size: 15px; color: var(--gm-muted); }
  .gm-term { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--gm-paper); border: 1px solid var(--gm-line); }
  .gm-term:first-child { margin-top: 2px; }
  .gm-tn { display: block; margin-bottom: 4px; font: 700 15.5px/1.3 var(--gm-ui); color: var(--gm-acc); }
  .gm-tp { font-size: 16px; }
  .gm-chars { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .gm-char { padding: 12px 14px; border-radius: 16px; background: var(--gm-paper); border: 1px solid var(--gm-line); }
  .gm-cn { display: inline; margin-right: 5px; font: 600 17px/1.5 var(--gm-head); }
  .gm-char .gm-cb { display: inline; }
  .gm-cb { font-size: 16px; }

  /* link rails, accordions, buttons */
  .gm-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 14px; margin: 12px -4px 4px; padding: 2px 4px 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .gm-rail::-webkit-scrollbar { display: none; }
  .gm-mcard { flex: 0 0 148px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 108px; padding: 12px; border-radius: 20px; text-decoration: none; background: var(--gm-surface); border: 1px solid var(--gm-line); box-shadow: var(--gm-shadow); }
  .gm-mi { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--gm-acc-soft); color: var(--gm-acc); }
  .gm-mcard.t1 .gm-mi { background: var(--gm-warm-plate); color: var(--gm-warm-ink); }
  .gm-mcard.t2 .gm-mi { background: var(--gm-sunken); color: var(--gm-ink); }
  .gm-mt { font: 600 14.5px/1.25 var(--gm-ui); color: var(--gm-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .gm-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .gm-btn { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: 16px; background: var(--gm-acc-soft); color: var(--gm-acc) !important; text-decoration: none; font: 600 15.5px/1.25 var(--gm-ui); }
  .gm-bt { flex: 1; min-width: 0; }
  .gm-faq { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  .gm-acc, .gm-reveal { border-radius: 16px; background: var(--gm-paper); border: 1px solid var(--gm-line); overflow: clip; }
  .gm-sum { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; font: 600 16px/1.3 var(--gm-ui); }
  .gm-sum > span:first-child { flex: 1; min-width: 0; }
  .gm-ans { padding: 0 14px 14px; font: 400 16px/1.6 var(--gm-ui); }
  .gm-note { margin-top: 18px; box-shadow: none; background: var(--gm-paper); }
  .gm-note > .gm-p { padding: 0 14px 12px; }
  .gm-note > .gm-p:last-child { padding-bottom: 16px; }

  /* Q&A */
  .gm-qas { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .gm-qa { display: flex; gap: 12px; padding: 12px; border-radius: 18px; background: var(--gm-paper); border: 1px solid var(--gm-line); }
  .gm-qn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gm-acc-soft); color: var(--gm-acc); font: 700 14px/1 var(--gm-ui); }
  .gm-qb { flex: 1; min-width: 0; }
  .gm-q, .gm-q p { font: 400 16.5px/1.55 var(--gm-ui); }
  .gm-reveal { margin-top: 10px; background: var(--gm-surface); }
  .gm-reveal > summary { list-style: none; display: flex; align-items: center; min-height: 48px; padding: 6px 14px; font: 700 15px/1.2 var(--gm-ui); color: var(--gm-acc); cursor: pointer; }
  .gm-reveal > summary::-webkit-details-marker { display: none; }
  .gm-reveal[open] > summary { border-bottom: 1px dashed var(--gm-line2); }
  .gm-reveal > p { padding: 12px 14px; font: 500 17px/1.5 var(--gm-head); color: var(--gm-ink); }
  .gm-s-qa .gm-sbody { display: flex; flex-direction: column; justify-content: center; gap: 22px; min-height: 100%; }
  .gm-qbig { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .gm-qnum { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 23px; background: var(--gm-acc); color: var(--gm-on-acc); font: 700 20px/1 var(--gm-ui); }
  .gm-qtext, .gm-qtext p { font: 500 24px/1.32 var(--gm-head); letter-spacing: -.008em; text-wrap: pretty; }
  .gm-reveal-big { margin-top: 0; }
  .gm-reveal-big > summary { justify-content: center; min-height: 56px; font-size: 16.5px; }
  .gm-reveal-big[open] { background: var(--gm-acc-soft); border-color: transparent; }
  .gm-reveal-big > p { font-size: 22px; line-height: 1.4; text-align: center; padding: 16px 14px 18px; color: var(--gm-ink); }

  /* numbered items (games) */
  .gm-facts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
  .gm-fact { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 16px; background: var(--gm-paper); border: 1px solid var(--gm-line); }
  .gm-fl { font: 700 11.5px/1.2 var(--gm-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gm-muted); }
  .gm-fv { font: 500 16px/1.45 var(--gm-ui); }
  .gm-steps { counter-reset: gs; display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
  .gm-steps > li { counter-increment: gs; display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 10px 12px; border-radius: 16px; background: var(--gm-paper); border: 1px solid var(--gm-line); font: 400 16.5px/1.55 var(--gm-ui); }
  .gm-steps > li::before { content: counter(gs); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gm-acc); color: var(--gm-on-acc); font: 700 14px/1 var(--gm-ui); }
  .gm-steps > li > span { flex: 1; min-width: 0; padding-top: 3px; }
  .gm-tip { display: flex; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: var(--gm-warm); border: 1px solid var(--gm-warm-edge); color: var(--gm-ink); }
  .gm-tipi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--gm-warm-plate); color: var(--gm-warm-ink); }
  .gm-tipl { display: block; font: 700 12px/1.2 var(--gm-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gm-warm-ink); margin-bottom: 3px; }
  .gm-tipt { font: 500 16px/1.5 var(--gm-ui); }
  .gm-item > * + * { margin-top: 12px; }

  /* table pages: stacked comparison cards, never a sideways-scrolling table */
  .gm-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .gm-row { padding: 14px; border-radius: 18px; background: var(--gm-paper); border: 1px solid var(--gm-line); }
  .gm-rt { margin: 0 0 6px; font: 600 18px/1.25 var(--gm-head); color: var(--gm-acc); }
  .gm-rv { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--gm-line); }
  .gm-rv:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
  .gm-rl { font: 700 11.5px/1.2 var(--gm-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gm-muted); }
  .gm-cv, .gm-cv p { font: 400 16px/1.5 var(--gm-ui); }
  .gm-ticks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
  .gm-tick { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--gm-line2); background: var(--gm-surface); color: var(--gm-ink); font: 600 14.5px/1 var(--gm-ui); cursor: pointer; }
  .gm-tick .gm-i { opacity: 0; color: var(--gm-on-acc); }
  .gm-tick[aria-checked="true"] { background: var(--gm-acc); border-color: var(--gm-acc); color: var(--gm-on-acc); }
  .gm-tick[aria-checked="true"] .gm-i { opacity: 1; }

  /* story reader */
  .gm-s-read .gm-sbody { padding: 18px 20px 36px; }
  .gm-rprog { position: absolute; z-index: 2; left: 18px; right: 18px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: transparent; overflow: hidden; }
  .gm-rprog::after { content: ''; display: block; height: 100%; background: var(--gm-acc); transform-origin: 0 50%; transform: scaleX(var(--gm-r, 0)); }
  .gm-rtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
  .gm-aa { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--gm-line2); border-radius: 999px; background: var(--gm-surface); color: var(--gm-ink); font: 700 14px/1 var(--gm-ui); cursor: pointer; }
  .gm-aa .gm-i { display: none; }
  .gm-s-read .gm-h2 { margin-bottom: 14px; }
  .gm-rp { font: 500 20px/1.6 var(--gm-head); letter-spacing: .002em; color: var(--gm-ink); }
  .gm-rp + .gm-rp { margin-top: 18px; }
  .gm-root[data-fs="1"] .gm-rp { font-size: 22.5px; }
  .gm-root[data-fs="2"] .gm-rp { font-size: 25px; line-height: 1.65; }
  .gm-end { display: flex; justify-content: center; margin-top: 26px; color: var(--gm-acc); opacity: .55; }
  .gm-end .gm-orn { position: static; width: 64px; height: 64px; color: inherit; }

  /* ---------- safety sheet ---------- */
  html.gm-lock, html.gm-lock body { overflow: hidden; }
  .gm-layer { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; font: 400 16px/1.5 var(--gm-ui); color: var(--gm-ink); }
  .gm-layer[hidden] { display: none; }
  .gm-scrim { position: absolute; inset: 0; background: var(--gm-scrim); opacity: 0; transition: opacity .25s; }
  .gm-layer.on .gm-scrim { opacity: 1; }
  .gm-sheet { position: relative; width: 100%; max-height: 86dvh; max-height: 86vh; display: flex; flex-direction: column; padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: var(--gm-surface); box-shadow: 0 -12px 40px rgba(0,0,0,.28); transform: translateY(100%); transition: transform .28s var(--gm-ease); outline: none; }
  @supports (height: 1dvh) { .gm-sheet { max-height: 86dvh; } }
  .gm-layer.on .gm-sheet { transform: none; }
  .gm-grip { width: 40px; height: 4px; margin: 4px auto 12px; border-radius: 9px; background: var(--gm-line2); }
  .gm-sh-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .gm-sh-t { flex: 1; min-width: 0; }
  .gm-sh-h { margin: 2px 0 0; font: 500 24px/1.15 var(--gm-head); }
  .gm-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--gm-sunken); color: var(--gm-ink); cursor: pointer; }
  .gm-sh-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 12px; }
  .gm-safelist { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .gm-safelist li { display: flex; gap: 10px; align-items: flex-start; font: 400 16px/1.5 var(--gm-ui); }
  .gm-safelist .gm-grp { display: block; margin-top: 6px; font: 700 12px/1.2 var(--gm-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gm-warm-ink); }
  .gm-tick-i { margin-top: 3px; color: var(--gm-acc); }
  .gm-sh-foot { padding-top: 10px; }

  /* ---------- reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    .gm-slide, .gm-fade, .gm-meter-in, .gm-chev, .gm-scrim, .gm-sheet, .gm-press { transition: none !important; }
    .gm-press:active { transform: none; }
  }
}

/* print: the original page is what gets printed */
@media print {
  html.gm-on main.fp[data-gm-hidden] { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; overflow: visible !important; pointer-events: auto; }
  html.gm-on body > header, html.gm-on body > footer { display: revert !important; }
  html.gm-on, html.gm-on body { overflow: visible; }
  .gm-root, .gm-layer { display: none !important; }
}