/* God Mode — the eight NoizeLabs pieces, on their own page (2026-10-28).
   Loaded only by /god-mode, after /blog/blog.css. No scripts: the site CSP forbids them here. */

.gm-hero h1 { font-size: clamp(3.2rem, 10vw, 6.6rem); }
.gm-hero h1 .y { color: #facc15; }
.gm-spine { margin: 22px 0 0; max-width: 44rem; padding: 14px 18px; border-left: 3px solid var(--cyan);
  background: rgba(0, 255, 249, 0.05); border-radius: 0 12px 12px 0; color: #e8e8f2; font-size: 1.04rem; line-height: 1.6; }
.gm-spine b { color: var(--cyan); }

.gm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 16px; margin: 34px 0 8px; padding: 0; list-style: none; counter-reset: gm; }
.doc .gm-grid { padding-left: 0; }   /* beat blog.css .doc ul { padding-left: 22px } */
.doc .gm-card { margin: 0; max-width: none; }
.gm-card { position: relative; overflow: hidden; margin: 0; padding: 22px 24px 26px; counter-increment: gm;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--panel);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  animation: gmIn 0.6s cubic-bezier(.2, .8, .2, 1) both; }
.gm-card:hover { transform: translateY(-4px) rotate(-0.4deg); border-color: rgba(0, 255, 249, 0.5);
  box-shadow: 0 18px 50px -20px rgba(0, 255, 249, 0.5), 0 0 70px -30px rgba(255, 0, 193, 0.55); }
.gm-card::before { content: "GOD MODE"; position: absolute; top: 20px; right: -40px; transform: rotate(45deg);
  padding: 7px 46px; background: #facc15; color: #0b0b0f; font: 800 0.72rem/1 var(--display); letter-spacing: 0.14em;
  box-shadow: 0 4px 18px rgba(250, 204, 21, 0.35); }
.gm-card::after { content: counter(gm, decimal-leading-zero); position: absolute; right: 16px; bottom: 6px;
  font: 700 4rem/1 var(--display); color: rgba(255, 255, 255, 0.05); pointer-events: none; }
.gm-vs { margin: 0 70px 0 0; font: 700 0.76rem/1.35 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #a3a3b8; }
.gm-vs s { color: #ff4f6d; text-decoration-thickness: 2px; }
.doc .gm-card h2 { margin: 10px 0 0; padding: 0; border: 0; font: 700 1.75rem/1 var(--display); text-transform: uppercase; color: #fff; }
.doc .gm-card p { margin: 10px 0 0; color: var(--body); }
.gm-card:hover h2 { text-shadow: -2px 0 rgba(255, 0, 193, 0.7), 2px 0 rgba(0, 255, 249, 0.7); }
.gm-try { display: inline-block; margin-top: 14px; padding: 9px 16px; border-radius: 999px; background: #facc15;
  color: #0b0b0f; font: 800 0.8rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.gm-try:hover, .gm-try:focus-visible { background: #fff; }

.gm-closer { margin: 46px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); }
.gm-closer blockquote { margin: 0; font: 700 clamp(1.6rem, 3.6vw, 2.5rem)/1.12 var(--display); text-transform: uppercase; color: #fff; max-width: 40rem; }
.gm-closer .sig { margin: 12px 0 0; font: 700 0.9rem/1 var(--mono); letter-spacing: 0.16em; color: var(--cyan); }
.gm-story { display: inline-block; margin-top: 26px; padding: 13px 22px; border-radius: 999px; border: 1px solid var(--cyan);
  color: var(--cyan); font: 800 0.9rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.gm-story:hover, .gm-story:focus-visible { background: var(--cyan); color: #06060a; }

@keyframes gmIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.gm-card:nth-child(2) { animation-delay: 0.06s; } .gm-card:nth-child(3) { animation-delay: 0.12s; }
.gm-card:nth-child(4) { animation-delay: 0.18s; } .gm-card:nth-child(5) { animation-delay: 0.24s; }
.gm-card:nth-child(6) { animation-delay: 0.3s; }  .gm-card:nth-child(7) { animation-delay: 0.36s; }
.gm-card:nth-child(8) { animation-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) { .gm-card { animation: none; transition: none; } .gm-card:hover { transform: none; } }

/* Release updates signup: a plain form (no script); the answer comes back as #joined, #notify-bad... and :target shows it */
.gm-notify { margin: 46px 0 0; padding: 28px clamp(18px, 4vw, 34px) 30px; border: 1px solid rgba(250, 204, 21, 0.45); border-radius: 18px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(250, 204, 21, 0.10), transparent 55%),
              radial-gradient(120% 140% at 0% 100%, rgba(0, 255, 249, 0.08), transparent 55%), var(--panel);
  box-shadow: 0 18px 60px -30px rgba(250, 204, 21, 0.45); scroll-margin-top: 24px; }
.doc .gm-notify h2 { margin: 8px 0 0; padding: 0; border: 0; font: 700 clamp(2rem, 5vw, 3.2rem)/0.95 var(--display); text-transform: uppercase; color: #fff; }
.doc .gm-notify p { margin: 12px 0 0; }
.gm-form { margin: 20px 0 0; }
.gm-lbl { display: block; font: 700 0.72rem/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: #facc15; }
.gm-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; max-width: 34rem; }
.gm-row input { flex: 1 1 15rem; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(0, 0, 0, 0.35); color: #fff; font: 500 1rem/1.2 var(--sans); }
.gm-row input:focus { outline: 2px solid var(--cyan); outline-offset: 2px; border-color: transparent; }
.gm-row button { flex: 0 0 auto; padding: 14px 22px; border: 0; border-radius: 999px; background: #facc15; color: #0b0b0f; cursor: pointer;
  font: 800 0.86rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s ease, transform 0.2s ease; }
.gm-row button:hover, .gm-row button:focus-visible { background: #fff; transform: translateY(-2px); }
.gm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.doc .gm-fine { margin-top: 14px; font-size: 0.86rem; color: var(--muted); }
.gm-leave { padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; text-decoration: underline; cursor: pointer; }
.gm-msg { display: none; scroll-margin-top: 170px; }   /* clear of the sticky header, which wraps to two rows on a phone */
.doc .gm-msg { margin-top: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); color: #fff; font-weight: 600; }
.gm-msg:target { display: block; animation: gmIn 0.5s cubic-bezier(.2, .8, .2, 1) both; }
.gm-msg.ok { border-color: rgba(52, 211, 153, 0.6); background: rgba(52, 211, 153, 0.10); }
.gm-msg.bad { border-color: rgba(255, 79, 109, 0.6); background: rgba(255, 79, 109, 0.10); }
@media (prefers-reduced-motion: reduce) { .gm-msg:target { animation: none; } .gm-row button:hover { transform: none; } }