/* ---- G2M (#g2m, page-g2m.js) ----
   One screen: the site's hero in G2M's colours (its editor's own tokens, app/ui/styles.css
   @ 1c9e6a6: copper is the brand, green means tracking), with G2M's editor in a frame. */
body[data-product=g2m] {
  --bg: #0d1011;          /* editor: surface */
  --ground: #131719;      /* editor: panel */
  --well: #0a0d0e;
  --accent: #e5b184;      /* editor: copper-hi, the brand */
  --hot: #c78a5a;         /* editor: copper */
  --glow: rgba(199, 138, 90, 0.15);
  --ring: rgba(229, 177, 132, 0.13);
}
body[data-product=g2m] .hero-line { max-width: 400px; }

/* G2M's note hero: its editor drawn at 480 x 440 CSS px with everything but the note
   column hidden (tools/vendor-g2m-ui.mjs), scaled to the figure and centred in the column. */
.g2m-hero { width: 100%; max-width: 560px; justify-self: center; margin-inline: auto; }
.g2m-frame { --g2m-scale: 1; position: relative; width: 100%; max-width: 100%; aspect-ratio: 480 / 440; overflow: hidden; background: #0d1011;
  /* No visible box: the frame fades to nothing well before its edges (the ripple stays inside). */
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
.g2m-ui { position: absolute; top: 0; left: 0; width: 480px; height: 440px; border: 0; transform: scale(var(--g2m-scale)); transform-origin: 0 0; pointer-events: none; }

.g2m-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.g2m-mix { display: flex; flex-wrap: wrap; gap: 8px; }
.g2m-chip { min-height: 36px; padding: 6px 14px; border: 1px solid var(--control-line); border-radius: 999px; font: 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.g2m-chip:hover { color: var(--ink); }
.g2m-chip[aria-pressed=true] { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.g2m-time { margin-left: auto; font: 12px var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.g2m-status:empty { display: none; }
.g2m-hero figcaption { margin-top: 14px; }

/* Get: one line under the name. */
.g2m-get { display: grid; gap: 6px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 420px; }
.g2m-get__label { font: 12px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.g2m-get__line { font-size: 16px; color: var(--ink); }
.g2m-get__note { font-size: 14px; color: var(--muted); }
/* ---- end G2M ---- */