/* ============================================================
   GenieCheats — site-wide light theme (GENERATED)

   Derived from styles.css by scratchpad/gen_light.py: every rule
   in the base sheet that assumed a dark background gets a light
   counterpart here, scoped under body.mg-light so the dark theme
   still renders for anything without the class.

   Brand accents (lime / green / pink / violet) are deliberately
   untouched — they already read correctly on white.

   Regenerate rather than hand-editing the bulk of this file;
   hand-tuning belongs in the OVERRIDES section at the end.
   ============================================================ */

/* ---------- base ---------- */
body.mg-light {
  --black: #ffffff;
  --header: #ffffff;
  --header-soft: #f6f7f9;
  --white: #0d1117;
  --muted: #5b626d;
  --line: rgba(13, 17, 23, 0.09);
  background: #ffffff;
  color: #0d1117;
}
body.mg-light .entry-loader {
  background: #ffffff;
}
body.mg-light .site-header {
  background: rgba(13, 17, 23, 0.1);
  border-bottom: 1px solid rgba(13, 17, 23, 0.022);
}
body.mg-light .support-button {
  color: #0d1117;
}
body.mg-light .pricing-button {
  color: #0d1117;
  background: #ffffff;
}
body.mg-light .pricing-button strong {
  color: #0d1117;
}
body.mg-light .login-button::before,
body.mg-light .signup-button::before {
  background: linear-gradient(100deg, transparent, rgba(13, 17, 23, 0.275), transparent);
}
body.mg-light .signup-button {
  border: 1px solid rgba(13, 17, 23, 0.176);
  box-shadow: 0 12px 26px rgba(200, 255, 0, 0.26),
    inset 0 1px 0 rgba(13, 17, 23, 0.303);
}
body.mg-light .signup-button:hover,
body.mg-light .signup-button:focus-visible {
  box-shadow: 0 16px 34px rgba(200, 255, 0, 0.42),
    inset 0 1px 0 rgba(13, 17, 23, 0.33);
}
body.mg-light .login-button {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066);
}
body.mg-light .login-button:hover,
body.mg-light .login-button:focus-visible {
  box-shadow: 0 10px 24px rgba(200, 255, 0, 0.16),
    inset 0 1px 0 rgba(13, 17, 23, 0.088);
}
body.mg-light .hero {
  background: radial-gradient(circle at 66% 48%, rgba(13, 17, 23, 0.013), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}
body.mg-light .hero::before {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.12) 1px, transparent 1.5px);
}
body.mg-light .hero-shade {
  background: linear-gradient(90deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 44%, rgba(13, 17, 23, 0.1) 100%),
    radial-gradient(circle at 62% 44%, rgba(199, 255, 0, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 100%);
}
body.mg-light .hero h1 {
  color: #0d1117;
}
body.mg-light .hero p {
  color: #0d1117;
}
body.mg-light .hero-proof-strip span {
  color: #0d1117;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.083), rgba(13, 17, 23, 0.028)),
    rgba(13, 17, 23, 0.1);
  border: 1px solid rgba(13, 17, 23, 0.099);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 12px 30px rgba(13, 17, 23, 0.1);
}
body.mg-light .hero-reel {
  border: 1px solid rgba(13, 17, 23, 0.12);
  background: #ffffff;
  box-shadow: 0 34px 90px rgba(13, 17, 23, 0.1),
    inset 0 1px 0 rgba(13, 17, 23, 0.088);
}
body.mg-light .video-slot {
  color: #0d1117;
}
body.mg-light .video-frame {
  border: 1px solid rgba(13, 17, 23, 0.132);
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.088), transparent 22%),
    linear-gradient(145deg, rgba(13, 17, 23, 0.12), rgba(13, 17, 23, 0.05)),
    radial-gradient(circle at 50% 34%, rgba(199, 255, 0, 0.17), transparent 31%),
    radial-gradient(circle at 52% 74%, rgba(56, 96, 255, 0.12), transparent 36%),
    rgba(13, 17, 23, 0.1);
  box-shadow: 0 34px 90px rgba(13, 17, 23, 0.1),
    0 0 70px rgba(199, 255, 0, 0.08),
    inset 0 1px 0 rgba(13, 17, 23, 0.12);
}
body.mg-light .video-frame::before {
  border: 1px dashed rgba(13, 17, 23, 0.121);
}
body.mg-light .video-frame::after {
  background: linear-gradient(0deg, rgba(13, 17, 23, 0.1), transparent 36%),
    repeating-linear-gradient(180deg, rgba(13, 17, 23, 0.039) 0 1px, transparent 1px 13px);
}
body.mg-light .video-slot.is-active .video-frame::before {
  box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.033),
    0 0 36px rgba(199, 255, 0, 0.11);
}
body.mg-light .video-caption {
  color: #0d1117;
}
body.mg-light .video-sound-button {
  border: 1px solid rgba(13, 17, 23, 0.12);
  color: #0d1117;
  background: rgba(13, 17, 23, 0.1);
  box-shadow: 0 18px 38px rgba(13, 17, 23, 0.1);
}
body.mg-light .video-sound-button:hover,
body.mg-light .video-sound-button:focus-visible {
  background: rgba(13, 17, 23, 0.1);
}
body.mg-light .primary-cta {
  color: #0d1117;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.066), rgba(13, 17, 23, 0.022)),
    rgba(13, 17, 23, 0.05);
  border: 1px solid rgba(13, 17, 23, 0.176);
  box-shadow: 0 18px 42px rgba(13, 17, 23, 0.1),
    inset 0 1px 0 rgba(13, 17, 23, 0.088);
}
body.mg-light .secondary-cta {
  background: linear-gradient(180deg, #fff 0%, rgba(13, 17, 23, 0.533) 100%);
  border: 1px solid rgba(13, 17, 23, 0.506);
  box-shadow: 0 18px 42px rgba(13, 17, 23, 0.088),
    0 16px 34px rgba(13, 17, 23, 0.1);
}
body.mg-light .signup-cta {
  border: 1px solid rgba(13, 17, 23, 0.176);
  box-shadow: 0 18px 42px rgba(200, 255, 0, 0.28),
    inset 0 1px 0 rgba(13, 17, 23, 0.303);
}
body.mg-light .signup-cta::before {
  background: linear-gradient(100deg, transparent, rgba(13, 17, 23, 0.303), transparent);
}
body.mg-light .signup-cta:hover,
body.mg-light .signup-cta:focus-visible {
  box-shadow: 0 22px 52px rgba(200, 255, 0, 0.42),
    inset 0 1px 0 rgba(13, 17, 23, 0.33);
}
body.mg-light .home-offer-section {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}
body.mg-light .promo-plan-button {
  color: #0d1117;
  border: 1px solid rgba(13, 17, 23, 0.12);
  box-shadow: 0 12px 28px rgba(244, 4, 80, 0.26),
    inset 0 1px 0 rgba(13, 17, 23, 0.12);
}
body.mg-light .promo-plan-button:hover,
body.mg-light .promo-plan-button:focus-visible {
  box-shadow: 0 16px 34px rgba(244, 4, 80, 0.32),
    inset 0 1px 0 rgba(13, 17, 23, 0.12);
}
body.mg-light .detection-callout-section {
  background: radial-gradient(circle at 50% 42%, rgba(199, 255, 0, 0.07), transparent 21%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #ffffff 100%);
}
body.mg-light .detection-callout-section::before {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.12) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(13, 17, 23, 0.044), transparent 34%, rgba(13, 17, 23, 0.033));
}
body.mg-light .detection-callout-section::after {
  background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(13, 17, 23, 0.033) 43px 44px, transparent 45px 86px),
    radial-gradient(ellipse at 50% 52%, transparent 0%, rgba(13, 17, 23, 0.1) 48%, rgba(13, 17, 23, 0.1) 100%);
}
body.mg-light .undetectable-pill {
  color: #0d1117;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.088), rgba(13, 17, 23, 0.039)),
    rgba(13, 17, 23, 0.05);
  border: 1px solid rgba(13, 17, 23, 0.12);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.099),
    0 18px 56px rgba(13, 17, 23, 0.1),
    0 0 42px rgba(199, 255, 0, 0.06);
}
body.mg-light .detection-callout h2 {
  color: #0d1117;
}
body.mg-light .detection-callout p {
  color: #0d1117;
}
body.mg-light .detection-reviews-button {
  box-shadow: 0 22px 50px rgba(199, 255, 0, 0.24),
    0 0 70px rgba(199, 255, 0, 0.16),
    inset 0 1px 0 rgba(13, 17, 23, 0.275);
}
body.mg-light .detection-reviews-button:hover,
body.mg-light .detection-reviews-button:focus-visible {
  box-shadow: 0 26px 58px rgba(199, 255, 0, 0.3),
    0 0 82px rgba(199, 255, 0, 0.2),
    inset 0 1px 0 rgba(13, 17, 23, 0.297);
}
body.mg-light .detection-discord-button {
  color: #0d1117;
  background: radial-gradient(circle at 24% 18%, rgba(13, 17, 23, 0.154), transparent 28%),
    linear-gradient(135deg, #7a8cff 0%, #5865f2 44%, #3442df 100%);
  border: 1px solid rgba(13, 17, 23, 0.121);
  box-shadow: 0 22px 54px rgba(88, 101, 242, 0.34),
    0 0 84px rgba(88, 101, 242, 0.18),
    inset 0 1px 0 rgba(13, 17, 23, 0.176);
}
body.mg-light .detection-discord-button::before {
  background: linear-gradient(115deg, transparent 18%, rgba(13, 17, 23, 0.121) 32%, transparent 48%);
}
body.mg-light .detection-discord-button::after {
  border: 1px solid rgba(13, 17, 23, 0.12);
}
body.mg-light .discord-icon-wrap {
  background: rgba(13, 17, 23, 0.12);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.165),
    0 10px 20px rgba(13, 17, 23, 0.1);
}
body.mg-light .detection-discord-button:hover,
body.mg-light .detection-discord-button:focus-visible {
  box-shadow: 0 28px 62px rgba(88, 101, 242, 0.42),
    0 0 94px rgba(88, 101, 242, 0.26),
    inset 0 1px 0 rgba(13, 17, 23, 0.198);
}
body.mg-light .discord-proof-callout {
  color: #0d1117;
}
body.mg-light .discord-proof-callout::before {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.18), rgba(199, 255, 0, 0.045)),
    rgba(13, 17, 23, 0.039);
  box-shadow: 0 20px 54px rgba(13, 17, 23, 0.1),
    inset 0 1px 0 rgba(13, 17, 23, 0.066);
}
body.mg-light .discord-proof-callout p {
  color: #0d1117;
}
body.mg-light .memgenie-update {
  background: radial-gradient(circle at 48% 50%, rgba(44, 130, 255, 0.24), transparent 21%),
    radial-gradient(circle at 35% 42%, rgba(17, 91, 160, 0.26), transparent 26%),
    linear-gradient(105deg, #0b1a23 0%, #ffffff 47%, #ffffff 100%);
}
body.mg-light .chrome-store-feature {
  background: #ffffff;
}
body.mg-light .chrome-store-feature::before {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.116) 1px, transparent 1.35px);
}
body.mg-light .chrome-store-feature::after {
  background: linear-gradient(180deg, transparent 80%, rgba(13, 17, 23, 0.248) 92%, #f8f9f8 100%),
    linear-gradient(180deg, transparent 50%, rgba(13, 17, 23, 0.1) 68%, rgba(13, 17, 23, 0.1) 86%, #ffffff 100%),
    radial-gradient(circle at 31% 86%, rgba(16, 151, 116, 0.4), transparent 30%),
    radial-gradient(circle at 58% 70%, rgba(45, 117, 255, 0.34), transparent 38%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 46%, rgba(13, 17, 23, 0.1) 76%, #ffffff 100%),
    linear-gradient(90deg, rgba(13, 17, 23, 0.1), transparent 50%, rgba(13, 17, 23, 0.1));
}
body.mg-light .availability-pill {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.088);
  border: 1px solid rgba(13, 17, 23, 0.05);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.044);
}
body.mg-light .chrome-store-copy h2 {
  color: #0d1117;
}
body.mg-light .chrome-store-copy p {
  color: #5b626d;
}
body.mg-light .chrome-store-cta {
  box-shadow: 0 20px 52px rgba(113, 255, 0, 0.18),
    inset 0 1px 0 rgba(13, 17, 23, 0.209);
}
body.mg-light .chrome-cta-logo {
  box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.06),
    0 2px 6px rgba(13, 17, 23, 0.1);
}
body.mg-light .chrome-store-icon {
  background: rgba(13, 17, 23, 0.528);
  box-shadow: 0 18px 42px rgba(13, 17, 23, 0.1);
}
body.mg-light .chrome-store-video {
  background: #ffffff;
}
body.mg-light .workflow-copy p {
  color: #0d1117;
}
body.mg-light .workflow-media {
  background: linear-gradient(rgba(13, 17, 23, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.045) 1px, transparent 1px),
    #f0f1f0;
}
body.mg-light .workflow-media::after {
  background: radial-gradient(circle at 50% 50%, transparent 46%, rgba(13, 17, 23, 0.035));
}
body.mg-light .workflow-video-card {
  background: radial-gradient(circle at 18% 10%, rgba(199, 255, 0, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: 0 28px 58px rgba(13, 17, 23, 0.1);
}
body.mg-light .workflow-video-screen {
  background: linear-gradient(135deg, rgba(61, 135, 255, 0.28), rgba(199, 255, 0, 0.1)),
    radial-gradient(circle at 62% 40%, rgba(13, 17, 23, 0.12), transparent 18%),
    #ffffff;
}
body.mg-light .workflow-video-screen span {
  color: #0d1117;
}
body.mg-light .workflow-tools span,
body.mg-light .workflow-grid-top span,
body.mg-light .workflow-grid-top strong {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .workflow-prompt {
  border: 1px solid rgba(13, 17, 23, 0.088);
  color: #5b626d;
  background: rgba(13, 17, 23, 0.061);
}
body.mg-light .workflow-grid-top strong {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .workflow-image-grid span {
  background: radial-gradient(circle at 50% 38%, rgba(13, 17, 23, 0.154), transparent 24%),
    linear-gradient(135deg, rgba(88, 136, 255, 0.44), rgba(199, 255, 0, 0.16)),
    #ffffff;
}
body.mg-light .workflow-image-grid span:nth-child(3) {
  background: radial-gradient(circle at 52% 40%, rgba(13, 17, 23, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(244, 4, 80, 0.28), rgba(86, 177, 255, 0.18)),
    #ffffff;
}
body.mg-light .workflow-timeline span {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .workflow-showcase[data-workflow-showcase] {
  color: #0d1117;
  background: radial-gradient(circle at 76% 18%, rgba(199, 255, 0, 0.08), transparent 24%),
    radial-gradient(circle at 24% 42%, rgba(53, 112, 255, 0.11), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 48%, #ffffff 100%);
}
body.mg-light .workflow-showcase[data-workflow-showcase]::before {
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 34%, rgba(13, 17, 23, 0.1) 78%, #ffffff 100%),
    radial-gradient(circle at 70% 28%, rgba(199, 255, 0, 0.12), transparent 30%),
    radial-gradient(circle at 25% 60%, rgba(53, 112, 255, 0.16), transparent 34%),
    linear-gradient(rgba(13, 17, 23, 0.033) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.028) 1px, transparent 1px);
}
body.mg-light .mg-video-play-btn {
  background: rgba(13, 17, 23, 0.1);
  color: #0d1117;
}
body.mg-light .workflow-showcase[data-workflow-showcase] .workflow-inner h2 {
  color: #0d1117;
}
body.mg-light .workflow-lede {
  color: #0d1117;
}
body.mg-light .feature-card {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.05), rgba(13, 17, 23, 0.013));
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.055),
    0 24px 60px rgba(13, 17, 23, 0.1);
}
body.mg-light .feature-card:hover {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 36px 84px rgba(13, 17, 23, 0.1);
}
body.mg-light .feature-card-media {
  background: #ffffff;
  border-bottom: 1px solid rgba(13, 17, 23, 0.066);
}
body.mg-light .feature-card-media--auto {
  background: radial-gradient(circle at 30% 26%, rgba(255, 139, 233, 0.34), transparent 46%),
    radial-gradient(circle at 74% 76%, rgba(66, 105, 255, 0.32), transparent 48%),
    linear-gradient(145deg, #2a1140 0%, #ffffff 52%, #ffffff 100%);
}
body.mg-light .feature-auto-chip {
  color: #0d1117;
  border: 1px solid rgba(13, 17, 23, 0.12);
}
body.mg-light .feature-card-body h3 {
  color: #0d1117;
}
body.mg-light .feature-card-body p {
  color: #0d1117;
}
body.mg-light .workflow-step {
  border: 1px solid rgba(13, 17, 23, 0.077);
  background: linear-gradient(145deg, rgba(13, 17, 23, 0.066), rgba(13, 17, 23, 0.017)),
    rgba(13, 17, 23, 0.022);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.044);
}
body.mg-light .workflow-step.is-active {
  background: radial-gradient(circle at 0% 0%, rgba(199, 255, 0, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(13, 17, 23, 0.088), rgba(13, 17, 23, 0.02)),
    rgba(13, 17, 23, 0.028);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.055),
    0 26px 80px rgba(13, 17, 23, 0.1);
}
body.mg-light .workflow-step-copy h3 {
  color: #0d1117;
}
body.mg-light .workflow-step-copy p:not(.workflow-step-label) {
  color: #0d1117;
}
body.mg-light .workflow-step-copy a {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.11);
  border: 1px solid rgba(13, 17, 23, 0.12);
}
body.mg-light .workflow-visual-card {
  border: 1px solid rgba(13, 17, 23, 0.11);
  background: #ffffff;
  box-shadow: 0 38px 100px rgba(13, 17, 23, 0.1),
    inset 0 1px 0 rgba(13, 17, 23, 0.11);
}
body.mg-light .accuracy-card .visual-gradient {
  background: radial-gradient(circle at 30% 24%, rgba(199, 255, 0, 0.9), transparent 22%),
    radial-gradient(circle at 77% 68%, rgba(46, 145, 255, 0.9), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #143720 42%, #071117 100%);
}
body.mg-light .membean-window,
body.mg-light .delay-console,
body.mg-light .typing-console {
  border: 1px solid rgba(13, 17, 23, 0.12);
  box-shadow: 0 30px 82px rgba(13, 17, 23, 0.1),
    inset 0 1px 0 rgba(13, 17, 23, 0.088);
}
body.mg-light .window-top span {
  background: rgba(13, 17, 23, 0.176);
}
body.mg-light .accuracy-meter {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .accuracy-meter span,
body.mg-light .answer-choice small,
body.mg-light .delay-row span,
body.mg-light .typing-line span {
  color: #0d1117;
}
body.mg-light .accuracy-meter strong {
  color: #0d1117;
}
body.mg-light .accuracy-meter div {
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .answer-choice {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.077);
}
body.mg-light .delay-row {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .delay-wave {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .typing-line {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .typing-line strong {
  color: #0d1117;
}
body.mg-light .keyboard-grid span {
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .review-entry-transition {
  background: #ffffff;
}
body.mg-light .review-entry-sticky {
  color: #0d1117;
  background: radial-gradient(circle at 50% 54%, rgba(199, 255, 0, 0.09), transparent 18%),
    radial-gradient(circle at 50% 54%, rgba(59, 129, 255, 0.13), transparent 28%),
    #ffffff;
}
body.mg-light .review-entry-sticky::after {
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.0), #f8f9f8 74%);
}
body.mg-light .review-entry-grid {
  background: linear-gradient(rgba(199, 255, 0, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 255, 0, 0.14) 1px, transparent 1px),
    radial-gradient(circle at 50% 54%, transparent 0%, rgba(13, 17, 23, 0.1) 34%, rgba(13, 17, 23, 0.1) 72%);
}
body.mg-light .review-entry-lightwash {
  background: radial-gradient(circle at 50% 46%, #ffffff, rgba(13, 17, 23, 0.517) 56%, #f8f9f8 100%);
}
body.mg-light .review-entry-rings span:nth-child(3) {
  border-color: rgba(13, 17, 23, 0.12);
}
body.mg-light .review-entry-card {
  background: radial-gradient(circle at 92% 12%, rgba(199, 255, 0, 0.32), transparent 28%),
    rgba(13, 17, 23, 0.517);
  border: 1px solid rgba(13, 17, 23, 0.005);
  box-shadow: 0 40px 130px rgba(13, 17, 23, 0.1),
    0 0 0 10px rgba(13, 17, 23, 0.088);
}
body.mg-light .review-entry-card small {
  color: #0d1117;
}
body.mg-light .reviews-showcase::before {
  background: linear-gradient(rgba(13, 17, 23, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.035) 1px, transparent 1px);
}
body.mg-light .reviews-header p:not(.reviews-kicker) {
  color: #0d1117;
}
body.mg-light .review-stats div {
  background: rgba(13, 17, 23, 0.396);
  border: 1px solid rgba(13, 17, 23, 0.004);
  box-shadow: 0 18px 42px rgba(13, 17, 23, 0.06);
}
body.mg-light .review-stats span {
  color: #0d1117;
}
body.mg-light .chrome-store-review-cta {
  border: 1px solid rgba(13, 17, 23, 0.06);
  box-shadow: 0 20px 42px rgba(108, 134, 0, 0.16),
    inset 0 1px 0 rgba(13, 17, 23, 0.286);
}
body.mg-light .chrome-store-review-cta::after {
  background: linear-gradient(90deg, transparent, rgba(13, 17, 23, 0.341), transparent);
}
body.mg-light .chrome-store-review-cta:hover,
body.mg-light .chrome-store-review-cta:focus-visible {
  box-shadow: 0 24px 50px rgba(108, 134, 0, 0.2),
    inset 0 1px 0 rgba(13, 17, 23, 0.319);
}
body.mg-light .review-arrows button {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.004);
}
body.mg-light .review-card {
  border: 1px solid rgba(13, 17, 23, 0.004);
  box-shadow: inset 0 0 0 4px rgba(13, 17, 23, 0.002),
    0 28px 76px rgba(13, 17, 23, 0.08);
}
body.mg-light .review-card-main {
  background: rgba(13, 17, 23, 0.506);
}
body.mg-light .review-card-main::before {
  color: #0d1117;
}
body.mg-light .review-card-main p {
  color: #0d1117;
}
body.mg-light .review-author span,
body.mg-light .review-avatar-stack span {
  color: #0d1117;
  background: #ffffff;
}
body.mg-light .review-author small {
  color: #0d1117;
}
body.mg-light .reviews-progress {
  background: rgba(13, 17, 23, 0.385);
  border: 1px solid rgba(13, 17, 23, 0.004);
  box-shadow: 0 16px 42px rgba(13, 17, 23, 0.07);
}
body.mg-light .reviews-progress button {
  background: rgba(13, 17, 23, 0.011);
}
body.mg-light .reviews-progress button.is-active {
  background: #ffffff;
}
body.mg-light .reviews-trust {
  color: #0d1117;
}
body.mg-light .review-avatar-stack span {
  background: #ffffff;
}
body.mg-light .review-avatar-stack span:nth-child(3) {
  background: #ffffff;
}
body.mg-light .site-footer {
  background: #ffffff;
}
body.mg-light .footer-lime {
  background: radial-gradient(circle at 8% 12%, rgba(13, 17, 23, 0.121), transparent 24%),
    linear-gradient(135deg, #d6ff37 0%, #caff19 48%, #dfff42 100%);
}
body.mg-light .footer-column h2 {
  color: rgba(13, 17, 23, 0.1);
}
body.mg-light .footer-column a {
  color: rgba(13, 17, 23, 0.1);
}
body.mg-light .footer-lime-bottom {
  color: rgba(13, 17, 23, 0.1);
}
body.mg-light .footer-black {
  color: #5b626d;
  background: #ffffff;
  border-top: 1px solid rgba(13, 17, 23, 0.055);
}
body.mg-light .footer-black a:hover,
body.mg-light .footer-black a:focus-visible {
  color: #0d1117;
}
body.mg-light .hack-page {
  color: #0d1117;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 44%, #ffffff 100%);
}
body.mg-light .hack-hero {
  border-top: 1px solid rgba(13, 17, 23, 0.055);
}
body.mg-light .hack-hero::before {
  background: linear-gradient(90deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 45%, rgba(13, 17, 23, 0.1) 100%),
    radial-gradient(circle at 82% 40%, rgba(199, 255, 0, 0.18), transparent 28%);
}
body.mg-light .hack-hero::after {
  background: linear-gradient(rgba(13, 17, 23, 0.044) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.033) 1px, transparent 1px);
}
body.mg-light .hack-hero-copy h1 {
  color: #0d1117;
}
body.mg-light .hack-hero-copy > p:not(.hack-eyebrow) {
  color: #0d1117;
}
body.mg-light .hack-status-panel {
  background: linear-gradient(160deg, rgba(13, 17, 23, 0.12), rgba(13, 17, 23, 0.039)),
    rgba(13, 17, 23, 0.1);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.12),
    0 42px 100px rgba(13, 17, 23, 0.1),
    0 0 70px rgba(199, 255, 0, 0.09);
}
body.mg-light .hack-status-panel::before {
  border: 1px dashed rgba(13, 17, 23, 0.12);
}
body.mg-light .hack-panel-top {
  color: #0d1117;
}
body.mg-light .hack-panel-lines span {
  background: linear-gradient(90deg, rgba(199, 255, 0, 0.7), rgba(13, 17, 23, 0.12));
}
body.mg-light .hack-status-panel li {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.061);
}
body.mg-light .hack-intro {
  background: radial-gradient(circle at 12% 0%, rgba(199, 255, 0, 0.1), transparent 28%),
    #ffffff;
}
body.mg-light .hack-intro h2,
body.mg-light .hack-heading-block h2,
body.mg-light .hack-process h2 {
  color: #0d1117;
}
body.mg-light .hack-intro-copy p,
body.mg-light .hack-heading-block p:not(.hack-eyebrow),
body.mg-light .hack-process-copy > p:not(.hack-eyebrow),
body.mg-light .hack-steps p,
body.mg-light .hack-feature-card p {
  color: #0d1117;
}
body.mg-light .hack-feature-card {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: radial-gradient(125% 90% at 100% 0%, rgba(199, 255, 0, 0.06), transparent 56%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.066), rgba(13, 17, 23, 0.018)),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 24px 60px rgba(13, 17, 23, 0.1);
}
body.mg-light .hack-feature-card:hover {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.099),
    0 32px 80px rgba(13, 17, 23, 0.1),
    0 0 54px rgba(199, 255, 0, 0.11);
}
body.mg-light .hack-feature-card span {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.303),
    0 10px 26px rgba(199, 255, 0, 0.26);
}
body.mg-light .hack-feature-card h3,
body.mg-light .hack-steps h3,
body.mg-light .hack-compare-card h3 {
  color: #0d1117;
}
body.mg-light .hack-process {
  background: linear-gradient(135deg, rgba(199, 255, 0, 0.1), rgba(244, 4, 80, 0.08)),
    #ffffff;
}
body.mg-light .hack-steps article {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.066), rgba(13, 17, 23, 0.02));
}
body.mg-light .hack-steps article:hover {
  background: linear-gradient(180deg, rgba(199, 255, 0, 0.05), rgba(13, 17, 23, 0.02));
}
body.mg-light .hack-comparison {
  color: #0d1117;
  background: radial-gradient(circle at 14% 0%, rgba(199, 255, 0, 0.1), transparent 30%),
    radial-gradient(circle at 86% 100%, rgba(244, 4, 80, 0.1), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border-top: 1px solid rgba(13, 17, 23, 0.066);
  border-bottom: 1px solid rgba(13, 17, 23, 0.066);
}
body.mg-light .hack-comparison h2 {
  color: #0d1117;
}
body.mg-light .hack-compare-card.muted {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.039), rgba(13, 17, 23, 0.011)),
    #ffffff;
  color: #5b626d;
}
body.mg-light .hack-compare-card.muted h3 {
  color: #0d1117;
}
body.mg-light .hack-compare-card.featured {
  color: #0d1117;
  background: radial-gradient(125% 80% at 100% 0%, rgba(199, 255, 0, 0.14), transparent 56%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.055), rgba(13, 17, 23, 0.015)),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.088),
    0 30px 80px rgba(13, 17, 23, 0.1),
    0 0 70px rgba(199, 255, 0, 0.1);
}
body.mg-light .hack-compare-card.muted li::before {
  background-color: rgba(13, 17, 23, 0.055);
}
body.mg-light .pricing-page {
  background: radial-gradient(circle at 80% 4%, rgba(244, 4, 80, 0.1), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 34%, #ffffff 100%);
}
body.mg-light .pricing-promo {
  background: linear-gradient(180deg, rgba(244, 4, 80, 0.05) 0%, rgba(244, 4, 80, 0.18) 100%) padding-box,
    linear-gradient(135deg, rgba(244, 4, 80, 0.55) 0%, rgba(244, 4, 80, 0.12) 55%, rgba(13, 17, 23, 0.055) 100%) border-box;
  box-shadow: inset 0 0 64px 0 rgba(244, 4, 80, 0.32),
    0 8px 24px 0 rgba(13, 17, 23, 0.1);
}
body.mg-light .sale-badge,
body.mg-light .popular-ribbon,
body.mg-light .discount-chip,
body.mg-light .new-chip {
  color: #0d1117;
}
body.mg-light .pricing-promo h2 {
  color: #0d1117;
}
body.mg-light .pricing-promo p {
  color: #0d1117;
}
body.mg-light .pricing-promo.home-pricing-promo {
  background: linear-gradient(115deg, rgba(244, 4, 80, 0.18) 0%, rgba(244, 4, 80, 0.06) 44%, rgba(244, 4, 80, 0) 72%) padding-box,
    linear-gradient(130deg, rgba(244, 4, 80, 0.62) 0%, rgba(244, 4, 80, 0.16) 42%, rgba(13, 17, 23, 0.066) 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.077),
    0 20px 54px rgba(244, 4, 80, 0.14);
}
body.mg-light .pricing-promo.home-pricing-promo h1 {
  color: #0d1117;
}
body.mg-light .pricing-promo.home-pricing-promo h2 {
  color: #0d1117;
}
body.mg-light .plan-section {
  border: 1px solid rgba(13, 17, 23, 0.03);
  background: radial-gradient(circle at 50% 0%, rgba(61, 27, 96, 0.48), transparent 33%),
    radial-gradient(circle at 88% 22%, rgba(244, 4, 80, 0.08), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.022),
    0 22px 70px rgba(13, 17, 23, 0.1);
}
body.mg-light .plans-heading h2 {
  color: #0d1117;
}
body.mg-light .plans-heading p {
  color: #0d1117;
}
body.mg-light .plan-card {
  border: 1px solid rgba(13, 17, 23, 0.041);
  background: radial-gradient(circle at 50% 104%, rgba(13, 17, 23, 0.016), transparent 47%),
    linear-gradient(180deg, #f6f7f9 0%, #f6f7f9 100%);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.033),
    0 18px 44px rgba(13, 17, 23, 0.1);
}
body.mg-light .plan-card h3 {
  color: #0d1117;
}
body.mg-light .plan-card p {
  color: #0d1117;
}
body.mg-light .price strong {
  color: #0d1117;
}
body.mg-light .price span,
body.mg-light .price s {
  color: #0d1117;
}
body.mg-light .included-box {
  background: radial-gradient(circle at 96% 0%, rgba(13, 17, 23, 0.044), transparent 40%),
    linear-gradient(145deg, rgba(13, 17, 23, 0.05), rgba(13, 17, 23, 0.05));
  border: 1px solid rgba(13, 17, 23, 0.033);
}
body.mg-light .included-box h4 {
  color: #0d1117;
}
body.mg-light .feature-list li {
  color: #0d1117;
}
body.mg-light .feature-list .is-included {
  color: #0d1117;
}
body.mg-light .feature-list .is-excluded {
  color: #5b626d;
}
body.mg-light .feature-divider {
  color: #5b626d;
}
body.mg-light .feature-divider::before,
body.mg-light .feature-divider::after {
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .plan-cta.ultra {
  color: #0d1117;
}
body.mg-light .faq-section h2 {
  color: #0d1117;
}
body.mg-light .faq-item {
  border: 1px solid rgba(13, 17, 23, 0.044);
  background: rgba(13, 17, 23, 0.028);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.022);
}
body.mg-light .faq-item[open] {
  background: rgba(13, 17, 23, 0.044);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.033),
    0 16px 40px rgba(13, 17, 23, 0.1);
}
body.mg-light .faq-item summary {
  color: #0d1117;
}
body.mg-light .faq-item summary::after {
  border-right: 2px solid rgba(13, 17, 23, 0.264);
  border-bottom: 2px solid rgba(13, 17, 23, 0.264);
}
body.mg-light .faq-item[open] summary {
  color: #0d1117;
}
body.mg-light .faq-answer p {
  color: #5b626d;
}
body.mg-light .faq-cta {
  color: #0d1117;
}
body.mg-light .mg-avatar-link {
  background: radial-gradient(120% 120% at 30% 20%, rgba(200, 255, 0, 0.22), transparent 60%),
    linear-gradient(135deg, #1a1f0a, #ffffff);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.055),
    0 6px 20px -10px rgba(200, 255, 0, 0.45);
}
body.mg-light .mg-avatar-link:hover {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 10px 24px -10px rgba(200, 255, 0, 0.6);
}
body.mg-light .mg-avatar-link:focus-visible {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 0 0 3px rgba(200, 255, 0, 0.35);
}
body.mg-light .mg-avatar-initials {
  background: linear-gradient(135deg, #2a3a0a, #ffffff);
}
body.mg-light .mg-avatar-pro-dot {
  box-shadow: 0 0 0 2px #ffffff, 0 0 8px rgba(200, 255, 0, 0.7);
}
body.mg-light .mg-account-panel {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: 0 1px 0 rgba(13, 17, 23, 0.044) inset,
    0 24px 60px -20px rgba(13, 17, 23, 0.1),
    0 8px 24px -12px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-account-head {
  border-bottom: 1px solid rgba(13, 17, 23, 0.066);
}
body.mg-light .mg-account-head-avatar {
  background: linear-gradient(135deg, #2a3a0a, #ffffff);
}
body.mg-light .mg-account-name {
  color: #0d1117;
}
body.mg-light .mg-account-item {
  color: #5b626d;
}
body.mg-light .mg-account-item:hover,
body.mg-light .mg-account-item:focus-visible {
  background: rgba(13, 17, 23, 0.055);
  color: #0d1117;
}
body.mg-light .mg-account-sep {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light header.site-header {
  background: rgba(13, 17, 23, 0.1);
  border-bottom: 1px solid rgba(13, 17, 23, 0.055);
}
body.mg-light header.site-header .main-nav a:hover,
body.mg-light header.site-header .main-nav a:focus-visible {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light header.site-header .nav-pill-badge {
  color: #0d1117;
}
body.mg-light header.site-header .nav-support:hover,
body.mg-light header.site-header .nav-support:focus-visible {
  color: #0d1117 !important;
}
body.mg-light header.site-header .menu-toggle {
  color: #0d1117;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.061), rgba(13, 17, 23, 0.02)),
    rgba(13, 17, 23, 0.05);
}
body.mg-light .dbp-close {
  background: rgba(13, 17, 23, 0.066);
  color: #5b626d;
}
body.mg-light .dbp-close:hover {
  background: rgba(13, 17, 23, 0.12);
  color: #0d1117;
}
body.mg-light .dbp-title {
  color: #0d1117;
}
body.mg-light .dbp-video-wrap {
  background: #ffffff;
}
body.mg-light .mg-demo {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}
body.mg-light .mg-demo-head h2 {
  color: #0d1117;
}
body.mg-light .mg-demo-stage {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid rgba(13, 17, 23, 0.099);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.055),
    0 24px 60px -30px rgba(13, 17, 23, 0.1),
    0 50px 120px -24px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-demo-stage:hover {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 60px 140px -24px rgba(13, 17, 23, 0.1),
    0 0 70px -10px rgba(199, 255, 0, 0.1);
}
body.mg-light .mg-demo-stage::before {
  background: #ffffff;
}
body.mg-light .quiz-feature {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, #ffffff 100%);
}
body.mg-light .quiz-feature-head h2 {
  color: #0d1117;
}
body.mg-light .quiz-feature-head > p {
  color: #0d1117;
}
body.mg-light .quiz-feature-stage {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid rgba(13, 17, 23, 0.099);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.055),
    0 24px 60px -30px rgba(13, 17, 23, 0.1),
    0 50px 120px -24px rgba(13, 17, 23, 0.1);
}
body.mg-light .quiz-feature-stage:hover {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 60px 140px -24px rgba(13, 17, 23, 0.1),
    0 0 70px -10px rgba(199, 255, 0, 0.1);
}
body.mg-light .quiz-feature-stage::before {
  background: #ffffff;
}
body.mg-light .quiz-feature-video {
  background: #ffffff;
}
body.mg-light .quiz-feature-badge {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.1);
  border: 1px solid rgba(13, 17, 23, 0.12);
  box-shadow: 0 10px 26px rgba(13, 17, 23, 0.1);
}
body.mg-light .qp-bigplay {
  border: 1px solid rgba(13, 17, 23, 0.121);
  color: #0d1117;
  background: rgba(13, 17, 23, 0.1);
  box-shadow: 0 14px 44px rgba(13, 17, 23, 0.1);
}
body.mg-light .qp-bigplay:hover {
  background: rgba(13, 17, 23, 0.1);
}
body.mg-light .qp-bar {
  background: linear-gradient(180deg, transparent, rgba(13, 17, 23, 0.1));
}
body.mg-light .qp-time {
  color: #0d1117;
}
body.mg-light .qp-btn {
  color: #0d1117;
}
body.mg-light .qp-btn:hover {
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .qp-menu {
  border: 1px solid rgba(13, 17, 23, 0.11);
  background: rgba(13, 17, 23, 0.1);
  box-shadow: 0 20px 50px rgba(13, 17, 23, 0.1);
}
body.mg-light .qp-menu-title {
  color: #5b626d;
}
body.mg-light .qp-menu button {
  color: #0d1117;
}
body.mg-light .qp-menu button:hover {
  background: rgba(13, 17, 23, 0.088);
  color: #0d1117;
}
body.mg-light .legal-meta {
  background: rgba(13, 17, 23, 0.044);
}
body.mg-light .legal-meta time {
  color: #5b626d;
}
body.mg-light .legal-intro {
  color: #5b626d;
}
body.mg-light .legal-block h3 {
  color: #0d1117;
}
body.mg-light .legal-block ul li {
  color: #5b626d;
}
body.mg-light .legal-quote {
  background: linear-gradient(180deg, rgba(200, 255, 0, 0.045), rgba(13, 17, 23, 0.013));
}
body.mg-light .legal-quote blockquote {
  color: #0d1117;
}
body.mg-light .sg-mark {
  box-shadow: 0 0 0 1px rgba(13, 17, 23, 0.12) inset, 0 6px 18px rgba(13, 17, 23, 0.1);
}
body.mg-light .sg-mark::after {
  background: radial-gradient(circle at 32% 30%, rgba(13, 17, 23, 0.468) 0 1.6px, transparent 2px),
    radial-gradient(circle at 64% 62%, rgba(13, 17, 23, 0.303) 0 1.1px, transparent 1.6px);
}
body.mg-light .sg-switcher {
  background: rgba(13, 17, 23, 0.033);
}
body.mg-light .sg-switcher a:hover,
body.mg-light .sg-switcher a:focus-visible {
  background: rgba(13, 17, 23, 0.055);
}
body.mg-light .sg-hero-shade {
  background: radial-gradient(120% 90% at 50% 0%, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 62%, var(--black) 100%);
}
body.mg-light .sg-product-card:hover {
  box-shadow: 0 22px 50px rgba(13, 17, 23, 0.1);
}
body.mg-light .sg-product-feats li {
  color: #5b626d;
}
body.mg-light .sg-product-card--delta .sg-product-cta,
body.mg-light .sg-product-card--ixl .sg-product-cta {
  color: #0d1117;
}
body.mg-light .sg-page--hub .sg-feature-icon {
  background: rgba(13, 17, 23, 0.055);
}
body.mg-light .sg-soon::before {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.055) 1px, transparent 1px);
}
body.mg-light .sg-header {
  background: rgba(13, 17, 23, 0.1);
}
body.mg-light .sg-genie-trigger {
  background: rgba(13, 17, 23, 0.044);
}
body.mg-light .sg-genie-trigger:hover,
body.mg-light .sg-genie-dd.is-open .sg-genie-trigger {
  background: rgba(13, 17, 23, 0.099);
  border-color: rgba(13, 17, 23, 0.12);
}
body.mg-light .sg-genie-dot {
  box-shadow: 0 0 8px rgba(13, 17, 23, 0.138);
}
body.mg-light .sg-genie-menu {
  background: #ffffff;
  box-shadow: 0 26px 64px rgba(13, 17, 23, 0.1);
}
body.mg-light .sg-genie-menu a:hover {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .sg-genie-menu a.is-current {
  background: rgba(13, 17, 23, 0.055);
}
body.mg-light .sg-nav a:hover,
body.mg-light .sg-nav a:focus-visible {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .sg-pricing:hover {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .sg-header .login-button:hover {
  background: rgba(13, 17, 23, 0.066);
  border-color: rgba(13, 17, 23, 0.12);
}
body.mg-light .sg-header .signup-button {
  border: 1px solid rgba(13, 17, 23, 0.154);
}
body.mg-light .sg-btn--ghost {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .sg-btn--ghost:hover {
  background: rgba(13, 17, 23, 0.12);
  border-color: rgba(13, 17, 23, 0.12);
}
body.mg-light .sg-btn::before {
  background: linear-gradient(100deg, transparent, rgba(13, 17, 23, 0.248), transparent);
}
body.mg-light .mg-plugin-hero {
  background: #ffffff;
}
body.mg-light .mg-plugin-hero .ph-grid {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.055) 1px, transparent 1px);
}
body.mg-light .mg-plugin-hero .ph-stage::after {
  background: linear-gradient(180deg, transparent 0%, rgba(13, 17, 23, 0.1) 55%, var(--black) 100%);
}
body.mg-light .mg-plugin-hero .ph-title {
  color: #0d1117;
}
body.mg-light .mg-plugin-hero .ph-core {
  stroke: #ffffff;
}
body.mg-light .mg-plugin-hero .ph-plug path,
body.mg-light .mg-plugin-hero .ph-plug rect {
  fill: #ffffff;
  stroke: #f6f7f9;
}
body.mg-light .mg-plugin-hero .ph-pop {
  box-shadow: 0 24px 60px -18px rgba(13, 17, 23, 0.1), 0 2px 8px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-plugin-hero .ph-pop.is-live {
  box-shadow: 0 26px 74px -14px rgba(52,224,122,.34), 0 0 0 1px rgba(52,224,122,.16), 0 2px 8px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-plugin-hero .pop-badge {
  color: #0d1117;
}
body.mg-light .mg-plugin-hero .tgl {
  box-shadow: inset 0 1px 2px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-plugin-hero .tgl-i {
  background: rgba(13, 17, 23, 0.468);
}
body.mg-light .mg-plugin-hero .tgl-o {
  border: 2px solid rgba(13, 17, 23, 0.468);
}
body.mg-light .mg-plugin-hero .knob {
  box-shadow: 0 .8px 1.2px -.6px rgba(13, 17, 23, 0.1), 0 2.1px 3px -1.25px rgba(13, 17, 23, 0.1), 0 4.2px 5.9px -1.9px rgba(13, 17, 23, 0.1), 0 8px 11px -2.5px rgba(13, 17, 23, 0.1), 0 16px 22px -3px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-plugin-hero .pop-dash-inner {
  background: radial-gradient(90px at 80% -20%, rgba(13, 17, 23, 0.11), #ffffff 64%);
}
body.mg-light .mg-plugin-hero .pop-dash-shim {
  background: linear-gradient(90deg, transparent, rgba(13, 17, 23, 0.138), transparent);
}
body.mg-light .mg-plugin-hero .ph-annot-text {
  color: #0d1117;
}
body.mg-light .sg-genie-trigger {
  background: rgba(13, 17, 23, 0.044);
}
body.mg-light .sg-genie-trigger:hover,
body.mg-light .sg-genie-dd.is-open .sg-genie-trigger {
  background: rgba(13, 17, 23, 0.11);
  border-color: rgba(13, 17, 23, 0.12);
}
body.mg-light .sg-genie-menu a.is-current {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .sg-genie-menu a.is-current .sg-gm-plat {
  color: #0d1117;
}
body.mg-light .blog-lede-img {
  background: #ffffff;
  box-shadow: 0 18px 40px -22px rgba(13, 17, 23, 0.1);
}
body.mg-light .blog-article {
  background: linear-gradient(160deg, rgba(13, 17, 23, 0.033), rgba(13, 17, 23, 0.1));
}
body.mg-light .blog-lede {
  color: #5b626d;
}
body.mg-light .blog-share a {
  background: rgba(13, 17, 23, 0.055);
}
body.mg-light .blog-share a:hover {
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .blog-figure {
  background: #ffffff;
}
body.mg-light .blog-prose {
  color: #5b626d;
}
body.mg-light .blog-callout {
  background: rgba(13, 17, 23, 0.039);
}
body.mg-light .blog-grid-card {
  background: rgba(13, 17, 23, 0.039);
}
body.mg-light .blog-checks {
  background: rgba(13, 17, 23, 0.039);
}
body.mg-light .blog-quote {
  background: rgba(13, 17, 23, 0.039);
}
body.mg-light .blog-quote p {
  color: #5b626d;
}
body.mg-light .blog-cta {
  background: linear-gradient(160deg, rgba(13, 17, 23, 0.036), rgba(13, 17, 23, 0.1));
}
body.mg-light .blog-cta p {
  color: #5b626d;
}
body.mg-light .blog-side-card {
  background: rgba(13, 17, 23, 0.033);
}
body.mg-light .blog-toc-nav a:hover {
  background: rgba(13, 17, 23, 0.044);
}
body.mg-light .blog-progress-track {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .exr-pop {
  box-shadow: 0 30px 70px -22px rgba(13, 17, 23, 0.1), 0 2px 8px rgba(13, 17, 23, 0.1);
}
body.mg-light .exr-pop.live {
  box-shadow: 0 30px 76px -18px rgba(52, 224, 122, .3), 0 0 0 1px rgba(52, 224, 122, .16), 0 2px 8px rgba(13, 17, 23, 0.1);
}
body.mg-light .exr-pop .tgl {
  box-shadow: inset 0 1px 2px rgba(13, 17, 23, 0.1);
}
body.mg-light .exr-pop .tgl-i {
  background: rgba(13, 17, 23, 0.468);
}
body.mg-light .exr-pop .tgl-o {
  border: 2px solid rgba(13, 17, 23, 0.468);
}
body.mg-light .exr-pop .knob {
  box-shadow: 0 2px 3px -1px rgba(13, 17, 23, 0.1), 0 6px 10px -2px rgba(13, 17, 23, 0.1);
}
body.mg-light .exr-pop .pop-tile {
  color: #5b626d;
}
body.mg-light .exr-pop .pop-dash-inner {
  background: radial-gradient(90px at 80% -20%, rgba(13, 17, 23, 0.11), #ffffff 64%);
}
body.mg-light .exr-pop .pop-dash-shim {
  background: linear-gradient(90deg, transparent, rgba(13, 17, 23, 0.138), transparent);
}
body.mg-light .exr-note h4 {
  color: #0d1117;
}
body.mg-light .blog-step-media {
  background: #ffffff;
  box-shadow: 0 14px 34px -18px rgba(13, 17, 23, 0.1);
}
body.mg-light .mgctl-card {
  background: rgba(13, 17, 23, 0.033);
  border-top: 1px solid rgba(13, 17, 23, 0.055);
  border-right: 1px solid rgba(13, 17, 23, 0.055);
  border-bottom: 1px solid rgba(13, 17, 23, 0.055);
}
body.mg-light .mgctl-card h4 {
  color: #0d1117;
}
body.mg-light .mgctl-label {
  color: #5b626d;
}
body.mg-light .mgctl-help {
  background: #f6f7f9;
  color: #5b626d;
}
body.mg-light .mgctl-val {
  color: #0d1117;
}
body.mg-light .mgctl-slider {
  background: linear-gradient(to right, #22c55e 0%, #22c55e var(--fill, 100%), #ffffff var(--fill, 100%), #ffffff 100%);
}
body.mg-light .mgctl-note {
  color: #5b626d !important;
}
body.mg-light .mgctl-note b {
  color: #0d1117;
}
body.mg-light .ai-overview {
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.05), rgba(13, 17, 23, 0.022));
}
body.mg-light .ai-ov-head > span:last-child {
  color: #0d1117;
}
body.mg-light .ai-ov-lead {
  color: #5b626d;
}
body.mg-light .ai-ov-lead strong {
  color: #0d1117;
}
body.mg-light .ai-ov-mark {
  color: #0d1117;
}
body.mg-light .blog-lede-img.is-placeholder {
  background: repeating-linear-gradient(45deg, rgba(13, 17, 23, 0.022) 0 14px, rgba(13, 17, 23, 0.05) 14px 28px);
}
body.mg-light .blog-lede-img.is-placeholder span {
  background: rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-video {
  background: #ffffff;
}
body.mg-light .mg-video-unmute {
  background: rgba(13, 17, 23, 0.1);
  box-shadow: 0 8px 30px rgba(13, 17, 23, 0.1), 0 0 0 6px rgba(200, 255, 0, .08);
}
body.mg-light .mg-video-unmute:hover {
  background: rgba(13, 17, 23, 0.05);
}
body.mg-light .mg-video-bar {
  background: linear-gradient(to top, rgba(13, 17, 23, 0.1), rgba(13, 17, 23, 0.0));
}
body.mg-light .mg-video-bar button {
  background: rgba(13, 17, 23, 0.11);
  color: #0d1117;
}
body.mg-light .mg-video-bar button:hover {
  background: rgba(13, 17, 23, 0.121);
}
body.mg-light .mg-video-time {
  color: #0d1117;
}
body.mg-light .mg-video-time .mg-dur {
  color: #5b626d;
}
body.mg-light .mg-video-seek::after {
  background: rgba(13, 17, 23, 0.154);
}
body.mg-light .sg-hero-shade {
  background: radial-gradient(125% 95% at 50% 0%, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 56%, var(--black) 100%);
}
body.mg-light .blog-table thead th {
  background: rgba(13, 17, 23, 0.044);
}
body.mg-light .wl-fields {
  border: 1px solid rgba(13, 17, 23, 0.12);
  background: rgba(13, 17, 23, 0.05);
  box-shadow: 0 12px 34px rgba(13, 17, 23, 0.1);
}
body.mg-light .wl-fields:focus-within {
  box-shadow: 0 0 0 3px rgba(200, 255, 0, .14), 0 12px 34px rgba(13, 17, 23, 0.1);
}
body.mg-light .wl-input::placeholder {
  color: #5b626d;
}
body.mg-light .wl-btn {
  box-shadow: 0 6px 16px rgba(200, 255, 0, .28), inset 0 1px 0 rgba(13, 17, 23, 0.275);
}
body.mg-light .wl-nav {
  border: 1px solid rgba(13, 17, 23, 0.176);
  box-shadow: 0 12px 26px rgba(200, 255, 0, 0.26), inset 0 1px 0 rgba(13, 17, 23, 0.303);
}
body.mg-light .wl-nav:hover,
body.mg-light .wl-nav:focus-visible {
  box-shadow: 0 16px 34px rgba(200, 255, 0, 0.42), inset 0 1px 0 rgba(13, 17, 23, 0.33);
}
body.mg-light .mg-plugin-hero .ph-prem {
  background: linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: 0 18px 40px -16px rgba(13, 17, 23, 0.1), 0 0 0 1px rgba(234,179,8,.28);
}
body.mg-light .mg-plugin-hero .ph-prem::after {
  background: #ffffff;
}
body.mg-light .mg-plugin-hero .ph-prem-txt {
  color: #0d1117;
}
body.mg-light .sg-genie-menu a.sg-gm-tile {
  border: 1px solid rgba(13, 17, 23, 0.077);
  background: radial-gradient(circle at 50% 120%, rgba(13, 17, 23, 0.055), transparent 60%),
    rgba(13, 17, 23, 0.028);
}
body.mg-light .sg-gm-name {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.1);
  border: 1px solid rgba(13, 17, 23, 0.088);
}

@media (max-width: 720px) {
  body.mg-light .hack-hero::before {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 100%),
        radial-gradient(circle at 50% 18%, rgba(199, 255, 0, 0.16), transparent 34%);
  }
  body.mg-light .main-nav a {
    background: rgba(13, 17, 23, 0.039);
    border: 1px solid rgba(13, 17, 23, 0.066);
  }
  body.mg-light .main-nav .chrome-link {
    color: #0d1117;
  }
  body.mg-light .hero-shade {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 44%, rgba(13, 17, 23, 0.1) 100%),
        radial-gradient(circle at 52% 40%, rgba(199, 255, 0, 0.08), transparent 34%);
  }
  body.mg-light .menu-toggle {
    color: #0d1117;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.061), rgba(13, 17, 23, 0.02)),
        rgba(13, 17, 23, 0.05);
    box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
        0 14px 30px rgba(13, 17, 23, 0.1);
  }
  body.mg-light .menu-toggle:hover,
  body.mg-light .menu-toggle:focus-visible {
    background: linear-gradient(180deg, rgba(199, 255, 0, 0.08), rgba(13, 17, 23, 0.022)),
        rgba(13, 17, 23, 0.05);
  }
  body.mg-light .site-menu .main-nav a {
    background: rgba(13, 17, 23, 0.044);
    border: 1px solid rgba(13, 17, 23, 0.077);
  }
  body.mg-light .site-menu .main-nav .chrome-link {
    color: #0d1117;
  }
}

@media (min-width: 721px) and (max-width: 1200px) {
  body.mg-light .menu-toggle {
    color: #0d1117;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.061), rgba(13, 17, 23, 0.02)),
        rgba(13, 17, 23, 0.05);
    box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
        0 14px 30px rgba(13, 17, 23, 0.1);
  }
  body.mg-light .menu-toggle:hover,
  body.mg-light .menu-toggle:focus-visible {
    background: linear-gradient(180deg, rgba(199, 255, 0, 0.08), rgba(13, 17, 23, 0.022)),
        rgba(13, 17, 23, 0.05);
  }
  body.mg-light .site-menu .main-nav a {
    background: rgba(13, 17, 23, 0.044);
    border: 1px solid rgba(13, 17, 23, 0.077);
  }
  body.mg-light .site-menu .main-nav .chrome-link {
    color: #0d1117;
  }
}

@media (max-width: 900px) {
  body.mg-light .menu-toggle {
    color: #0d1117;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.061), rgba(13, 17, 23, 0.02)),
        rgba(13, 17, 23, 0.05);
    box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
        0 14px 30px rgba(13, 17, 23, 0.1);
  }
  body.mg-light .site-menu .main-nav {
    color: #0d1117;
  }
  body.mg-light .site-menu .main-nav a {
    background: rgba(13, 17, 23, 0.044);
    border: 1px solid rgba(13, 17, 23, 0.077);
  }
  body.mg-light .hero-shade {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 48%, rgba(13, 17, 23, 0.1) 100%),
        radial-gradient(circle at 50% 20%, rgba(199, 255, 0, 0.08), transparent 34%);
  }
}

@media (max-width: 940px) {
  body.mg-light header.site-header .main-nav a {
    background: rgba(13, 17, 23, 0.044);
    border: 1px solid rgba(13, 17, 23, 0.077);
  }
}

@media (min-width: 768px) {
  body.mg-light .dbp {
    box-shadow: 0 0 0 1px rgba(13, 17, 23, 0.1),
        0 0 48px -6px rgba(200, 255, 0, 0.18),
        0 28px 72px rgba(13, 17, 23, 0.1);
  }
}

@media (min-width: 1201px) {
  body.mg-light .header-actions {
    background: rgba(13, 17, 23, 0.1);
  }
}

@media (max-width: 760px) {
  body.mg-light .exr-li {
    background: rgba(13, 17, 23, 0.033);
  }
  body.mg-light .exr-li h4 {
    color: #0d1117;
  }
}

@media (max-width: 540px) {
  body.mg-light .wl-input {
    border: 1px solid rgba(13, 17, 23, 0.12);
    background: rgba(13, 17, 23, 0.055);
  }
}


/* ============================================================
   HAND-TUNED OVERRIDES
   Everything above is generated. These are the cases the derivation
   can't get right on its own, so they live last and win.
   ============================================================ */

/* Header — the derived rule turned it into a 10% ink wash because the dark
   sheet built it from a white-alpha frost. It wants to be plain white with a
   single hairline, matching memgenie.html. */
body.mg-light .site-header {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(13, 17, 23, 0.09);
}

/* The wordmark is a WHITE png, so on a white header it disappears entirely.
   Every logo-*.png in assets is white-on-transparent, so there's no dark
   variant to point at — invert it back to dark instead. hue-rotate keeps the
   genie mark's green from flipping to magenta under the inversion. */
body.mg-light .brand-logo,
body.mg-light .sg-logo-strip img,
body.mg-light .sg-gm-logo,
body.mg-light .sg-logo-link img {
  filter: invert(1) hue-rotate(180deg);
}

/* Login button: the dark theme styles it as lime-on-lime-wash, which relies on
   a black backdrop to read. On white it's lime text on near-white — invisible.
   Give it the same ink text as the rest of the nav plus a real border. */
body.mg-light .login-button {
  background: #ffffff;
  color: #0d1117;
  border: 1px solid rgba(13, 17, 23, 0.09);
  box-shadow: none;
}
body.mg-light .login-button:hover,
body.mg-light .login-button:focus-visible {
  background: #f6f7f9;
  border-color: rgba(13, 17, 23, 0.18);
}

/* Active states. The dark theme marks "you are here" with lime text, which has
   plenty of contrast on black and almost none on white. Keep the lime as the
   background wash (it still reads as a highlight) but set the text to ink. */
body.mg-light .blog-toc-nav a.is-active,
body.mg-light .blog-toc-nav a[aria-current],
body.mg-light .main-nav a.active,
body.mg-light .main-nav a.is-active,
body.mg-light .site-menu a.active,
body.mg-light .site-menu a.is-active {
  color: #0d1117;
  font-weight: 600;
}
body.mg-light .blog-toc-nav a.is-active {
  background: rgba(200, 255, 0, 0.22);
}
body.mg-light .availability-pill,
body.mg-light .hack-eyebrow,
body.mg-light .blog-tag {
  color: #0d1117;
}

/* Safety net for nav/link text. A handful of the dark sheet's rules set link
   colour as a white ALPHA (rgba(255,255,255,.1) and friends) used against a
   black page; mapped to ink-alpha those come out at 10% opacity — technically
   present, practically invisible. Pin the nav's own colours rather than trying
   to rescue each derived rule. */
body.mg-light .main-nav a,
body.mg-light .site-menu a,
body.mg-light .header-actions a:not(.signup-button) {
  color: #5b626d;
}
body.mg-light .main-nav a:hover,
body.mg-light .site-menu a:hover {
  color: #0d1117;
}

/* Cards and panels: the derived pass flattens their dark fills to a whisper of
   tint, which alone leaves them shapeless on white. Give the shared surfaces a
   real hairline so they read as cards again. */
body.mg-light .blog-article,
body.mg-light .blog-side-card,
body.mg-light .blog-grid-card,
body.mg-light .blog-callout,
body.mg-light .blog-quote,
body.mg-light .exr-note,
body.mg-light .pop-tile,
body.mg-light .mgctl-card,
body.mg-light .feature-card,
body.mg-light .faq-item {
  background: #ffffff;
  border: 1px solid rgba(13, 17, 23, 0.09);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04);
}

/* Inset/secondary surfaces stay faintly grey so nested blocks are still
   distinguishable from the card they sit in. */
body.mg-light .blog-step,
body.mg-light .pop-row,
body.mg-light .mgctl-row {
  background: #f6f7f9;
  border: 1px solid rgba(13, 17, 23, 0.09);
}

/* Body copy: the dark sheet leans on pure white and near-white greys for text.
   Mapped 1:1 those land too light on a white page, so pin the prose scale. */
body.mg-light .blog-prose,
body.mg-light .blog-prose p,
body.mg-light .blog-prose li,
body.mg-light .exr-note,
body.mg-light .blog-lede {
  color: #5b626d;
}
body.mg-light h1,
body.mg-light h2,
body.mg-light h3,
body.mg-light h4,
body.mg-light .blog-title {
  color: #0d1117;
}
body.mg-light .blog-meta,
body.mg-light .exr-num,
body.mg-light .blog-step-num {
  color: #79808b;
}

/* Lime CTAs keep dark text — same as the dark theme, and the contrast is
   better on white than any inverted variant. The derived pass flipped their
   inner white highlight to dark, which read as a dent. */
body.mg-light .signup-button,
body.mg-light .footer-lime .btn,
body.mg-light .blog-cta {
  color: #0d1117;
  box-shadow: 0 10px 22px rgba(200, 255, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Anything painting a full-bleed dark video/backdrop behind light text has to
   keep its own contrast — leave those alone rather than bleaching them. */
body.mg-light .footer-lime,
body.mg-light .chrome-store-bg-video,
body.mg-light .workflow-bg-video {
  color: inherit;
}

/* ============================================================
   HEADER STAYS DARK — site-wide rule (Aug 2026)
   The header bar keeps the dark theme even on light pages: the
   logo PNGs are white-on-transparent, and inverting them for a
   white bar made them too hard to see. Everything here restores
   styles.css's dark header verbatim (literal values — the vars
   like --muted/--white are remapped under body.mg-light) and
   must stay LAST so it beats every earlier header rule above.
   ============================================================ */

body.mg-light .site-header,
body.mg-light header.site-header {
  background: rgba(8, 9, 11, 0.98);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

/* Logos stay white-on-transparent on the dark bar — no inversion. */
body.mg-light .brand-logo,
body.mg-light .sg-logo-strip img,
body.mg-light .sg-gm-logo,
body.mg-light .sg-logo-link img {
  filter: none;
}

/* Product switcher: trigger + dropdown back to the dark treatment
   (the dropdown holds the same white logo PNGs). */
body.mg-light .sg-genie-trigger {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
body.mg-light .sg-genie-trigger:hover,
body.mg-light .sg-genie-dd.is-open .sg-genie-trigger {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
body.mg-light .sg-genie-menu {
  background: #0d0f13;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6);
}
body.mg-light .sg-genie-menu a:hover { background: rgba(255, 255, 255, 0.06); }
body.mg-light .sg-genie-menu a.is-current { background: rgba(255, 255, 255, 0.05); }
body.mg-light .sg-genie-menu a.is-current .sg-gm-plat { color: #ffffff; }

/* Nav links: grey on dark, white on hover, lime when active. */
body.mg-light .main-nav { color: #9b9da3; }
body.mg-light .main-nav a,
body.mg-light .site-menu a,
body.mg-light header.site-header .main-nav a {
  color: #9b9da3;
}
body.mg-light .main-nav a:hover,
body.mg-light .main-nav a:focus-visible,
body.mg-light .site-menu a:hover,
body.mg-light header.site-header .main-nav a:hover,
body.mg-light header.site-header .main-nav a:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
body.mg-light .main-nav .active,
body.mg-light .main-nav a.active,
body.mg-light .main-nav a.is-active,
body.mg-light .site-menu a.active,
body.mg-light .site-menu a.is-active,
body.mg-light header.site-header .main-nav a.active {
  color: var(--lime);
}
body.mg-light header.site-header .nav-pill-badge { color: #ffffff; }
body.mg-light header.site-header .nav-support { color: #98a0f5; }
body.mg-light header.site-header .nav-support:hover,
body.mg-light header.site-header .nav-support:focus-visible {
  color: #ffffff !important;
  background: rgba(88, 101, 242, 0.18) !important;
}

/* Login / signup back to the lime-on-dark treatment. */
body.mg-light .login-button {
  color: var(--lime);
  background: rgba(200, 255, 0, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.mg-light .login-button:hover,
body.mg-light .login-button:focus-visible {
  background: rgba(200, 255, 0, 0.13);
  border-color: rgba(200, 255, 0, 0.5);
  box-shadow:
    0 10px 24px rgba(200, 255, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.mg-light .login-button::before,
body.mg-light .signup-button::before {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}
body.mg-light .signup-button {
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 12px 26px rgba(200, 255, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.mg-light .signup-button:hover,
body.mg-light .signup-button:focus-visible {
  box-shadow:
    0 16px 34px rgba(200, 255, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (min-width: 1201px) {
  body.mg-light .header-actions {
    background: rgba(8, 9, 11, 0.98);
  }
}

/* Mobile: hamburger + drawer keep the dark treatment too. (Scoped to the
   widths where the toggle exists so desktop stays byte-exact.) */
@media (max-width: 1200px) {
body.mg-light .menu-toggle {
  color: #f5f5f5;
  border: 1px solid rgba(199, 255, 0, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(18, 20, 24, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.2);
}
body.mg-light .menu-toggle:hover,
body.mg-light .menu-toggle:focus-visible {
  border-color: rgba(199, 255, 0, 0.36);
  background:
    linear-gradient(180deg, rgba(199, 255, 0, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(18, 20, 24, 0.96);
}
body.mg-light .site-menu .main-nav { color: #9b9da3; }
}
/* NOTE: pill backgrounds on nav links are MOBILE-ONLY in the dark theme.
   They are restored inside the media queries below — never unscoped, or
   the desktop nav grows outlines it never had (display: contents makes
   .site-menu match the desktop nav too). */
body.mg-light .site-menu .main-nav .chrome-link,
body.mg-light .main-nav .chrome-link {
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 720px) {
  body.mg-light .site-menu .main-nav .active {
    color: var(--lime);
    background: rgba(199, 255, 0, 0.09);
    border-color: rgba(199, 255, 0, 0.15);
  }
}

/* --- Specificity fixes for the block above: these selectors mirror the
   light rules they must beat (same or higher specificity, placed later).
   Verified against membean-bot.html's dark header, computed-style diff. --- */

/* Header text inherits white again (body.mg-light sets ink), and the border
   matches the sg-layer's header.site-header value (0.05, not the base 0.02). */
body.mg-light .site-header,
body.mg-light header.site-header {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Beats: body.mg-light header.site-header .menu-toggle (ink wash). The dark
   theme colours the toggle at every width but only adds its shadow in the
   squeezed layouts, so the shadow is scoped and the colours are not. */
body.mg-light header.site-header .menu-toggle,
body.mg-light .site-header .menu-toggle {
  color: #f5f5f5;
  border: 1px solid rgba(199, 255, 0, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(18, 20, 24, 0.92);
}
@media (max-width: 1200px) {
  body.mg-light header.site-header .menu-toggle,
  body.mg-light .site-header .menu-toggle {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 14px 30px rgba(0, 0, 0, 0.2);
  }
}

/* Beats: body.mg-light .header-actions a:not(.signup-button) (grey text),
   and undoes the .site-menu a grey from the block above on both buttons. */
body.mg-light .header-actions a.login-button,
body.mg-light .site-menu a.login-button {
  color: var(--lime);
  background: rgba(199, 255, 0, 0.07);
  border: 1px solid rgba(199, 255, 0, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.mg-light .header-actions a.login-button:hover,
body.mg-light .header-actions a.login-button:focus-visible {
  background: rgba(199, 255, 0, 0.12);
}
body.mg-light .header-actions a.signup-button,
body.mg-light .site-menu a.signup-button {
  color: #050705;
}

/* Nav pills in the squeezed layouts: the light media rules ink-wash them;
   restore the dark white-alpha pills at the same breakpoints. */
@media (max-width: 940px) {
  body.mg-light header.site-header .main-nav a {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }
}
@media (max-width: 720px) {
  body.mg-light .main-nav a,
  body.mg-light .site-menu .main-nav a {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }
}
@media (min-width: 721px) and (max-width: 1200px) {
  body.mg-light .site-menu .main-nav a {
    background: rgba(255, 255, 255, 0.04);
    border: 0;
  }
}

/* Square mascot tiles in the switcher stay dark on light pages too
   (the dropdown panel itself is pinned dark above). */
body.mg-light .sg-genie-menu a.sg-gm-tile {
  border-color: rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.05), transparent 60%),
    rgba(255, 255, 255, 0.025);
}
body.mg-light .sg-gm-name {
  color: #ffffff;
  background: rgba(5, 6, 8, 0.82);
  border-color: rgba(255, 255, 255, 0.08);
}
body.mg-light .sg-genie-menu a.sg-gm-tile[data-genie="mem"] .sg-gm-name { color: var(--mem); }
body.mg-light .sg-genie-menu a.sg-gm-tile[data-genie="delta"] .sg-gm-name { color: #8ab8ff; }