/* All-in-One surface map. Load after glass-core.css. Body: class="glass". */
>
  /* All-in-One surface map (on top of glass-core.css) */
  /* Hero: green behind the text, light blue behind the system map, + blend, bottom fade, grain */
  body.glass .aio-hero { background:
      linear-gradient(180deg, rgba(255,255,255,0) calc(100% - 160px), #fff 100%),
      radial-gradient(36% 34% at 50% 14%, rgba(63,186,115,0.20) 0%, transparent 72%),
      radial-gradient(26% 30% at 14% 30%, rgba(84,203,136,0.14) 0%, transparent 70%),
      radial-gradient(26% 30% at 86% 30%, rgba(63,186,115,0.12) 0%, transparent 70%),
      radial-gradient(30% 22% at 50% 44%, rgba(110,200,180,0.14) 0%, transparent 74%),
      radial-gradient(52% 40% at 50% 76%, rgba(70,180,205,0.26) 0%, rgba(70,180,205,0.08) 52%, transparent 78%),
      #fff !important; }
  body.glass .aio-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply; background-image: var(--g-grain); background-size: 160px 160px; }
  body.glass .aio-hero .container { z-index: 1; }
  body.glass .aio-node {
    background: rgba(255,255,255,0.6) !important;
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-edge) !important;
    box-shadow: var(--g-hi), var(--g-depth) !important; }
  body.glass .aio-node:hover { background: rgba(255,255,255,0.8) !important; border-color: rgba(63,186,115,0.45) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(18,22,36,0.05), 0 22px 44px -12px rgba(20,90,60,0.24) !important; }
  body.glass .aio-map-base {
    background: linear-gradient(135deg, rgba(222,245,232,0.85) 0%, rgba(214,240,238,0.78) 100%) !important;
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid rgba(63,186,115,0.22) !important; box-shadow: var(--g-depth) !important; }
  body.glass :is(.aio-node-ic, .aio-map-base-ic, .aio-data-ic) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 14px -4px rgba(18,60,50,0.25) !important; }

  /* Chapters: teal glow behind the chapter chip/text, light blue behind the mockup */
  body.glass .aio-chapter { background: var(--ch-glows), #fff !important; }
  body.glass .aio-chapter.alt { background: var(--ch-glows), #F7F9FB !important; }
  body.glass #app, body.glass #tm { --ch-glows:
      radial-gradient(30% 46% at 16% 50%, rgba(70,180,205,0.14) 0%, transparent 70%),
      radial-gradient(34% 52% at 74% 50%, rgba(70,180,205,0.20) 0%, transparent 72%); }
  body.glass #bots { --ch-glows:
      radial-gradient(30% 46% at 82% 50%, rgba(70,180,205,0.14) 0%, transparent 70%),
      radial-gradient(34% 52% at 28% 50%, rgba(70,180,205,0.20) 0%, transparent 72%); }
  body.glass #re, body.glass #derm, body.glass #calls { --ch-glows:
      radial-gradient(34% 22% at 50% 10%, rgba(70,180,205,0.14) 0%, transparent 70%),
      radial-gradient(50% 44% at 50% 66%, rgba(70,180,205,0.18) 0%, transparent 74%); }
  body.glass #calls { --ch-glows:
      radial-gradient(30% 26% at 18% 16%, rgba(70,180,205,0.14) 0%, transparent 70%),
      radial-gradient(50% 44% at 50% 70%, rgba(70,180,205,0.18) 0%, transparent 74%); }
  body.glass .aio-tab.active {
    background: rgba(255,255,255,0.66) !important;
    -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
    border-color: rgba(255,255,255,0.95) !important;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(18,22,36,0.04), 0 12px 28px -8px rgba(20,70,60,0.16) !important; }
  body.glass .aio-tab.active .aio-tab-n { background: var(--g-gloss), linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
  body.glass .ap-float {
    background: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(229,244,249,0.62) 100%) !important;
    -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
    border: 1px solid rgba(255,255,255,0.95) !important;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(18,22,36,0.06), 0 10px 26px -8px rgba(20,70,60,0.22) !important; }

  /* How it works together */
  body.glass .aio-together { background:
      radial-gradient(26% 40% at 20% 60%, rgba(63,186,115,0.15) 0%, transparent 70%),
      radial-gradient(40% 50% at 66% 60%, rgba(70,180,205,0.18) 0%, transparent 72%), #fff !important; }
  body.glass .aio-sit-stage {
    background: rgba(255,255,255,0.56) !important;
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-edge) !important;
    box-shadow: var(--g-hi), var(--g-depth) !important; }
  body.glass .aio-sit-btn:hover { background: rgba(255,255,255,0.6) !important; }
  body.glass .aio-sit-btn.active {
    background: linear-gradient(180deg, rgba(232,248,239,0.92) 0%, rgba(214,242,226,0.86) 100%) !important;
    border-color: rgba(63,186,115,0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 20px -8px rgba(47,158,91,0.30) !important; }

  /* Outcomes + Also included */
  body.glass .aio-out { background:
      radial-gradient(34% 46% at 30% 60%, rgba(63,186,115,0.15) 0%, transparent 70%),
      radial-gradient(34% 46% at 72% 60%, rgba(70,180,205,0.17) 0%, transparent 70%), #F7F9FB !important; }
  body.glass .aio-data { background:
      radial-gradient(40% 50% at 50% 66%, rgba(70,180,205,0.15) 0%, transparent 72%), #fff !important; }
  body.glass :is(.aio-out-card, .aio-data-tile) {
    background: var(--g-frost) !important;
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-edge) !important;
    box-shadow: var(--g-hi), var(--g-depth) !important; }
  body.glass .aio-out-n { background: var(--g-gloss), linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }

  /* Phones */
  @media (max-width: 640px) {
    body.glass .aio-hero { background:
        linear-gradient(180deg, rgba(255,255,255,0) calc(100% - 120px), #fff 100%),
        radial-gradient(420px 360px at 50% 4%, rgba(63,186,115,0.20) 0%, transparent 70%),
        radial-gradient(480px 560px at 50% 72%, rgba(70,180,205,0.24) 0%, rgba(70,180,205,0.08) 50%, transparent 72%), #fff !important; }
    body.glass .aio-chapter, body.glass .aio-chapter.alt { --ch-glows:
        radial-gradient(380px 360px at 0% 10%, rgba(70,180,205,0.14) 0%, transparent 70%),
        radial-gradient(440px 520px at 100% 68%, rgba(70,180,205,0.18) 0%, transparent 72%) !important; }
    body.glass .aio-together { background:
        radial-gradient(380px 360px at 0% 30%, rgba(63,186,115,0.15) 0%, transparent 70%),
        radial-gradient(420px 480px at 100% 72%, rgba(70,180,205,0.18) 0%, transparent 72%), #fff !important; }
    body.glass .aio-out { background:
        radial-gradient(380px 460px at 0% 40%, rgba(63,186,115,0.15) 0%, transparent 70%),
        radial-gradient(400px 480px at 100% 76%, rgba(70,180,205,0.17) 0%, transparent 70%), #F7F9FB !important; }
    body.glass .aio-data { background: radial-gradient(420px 600px at 50% 60%, rgba(70,180,205,0.15) 0%, transparent 72%), #fff !important; }
    body.glass :is(.aio-node, .aio-data-tile) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.82) !important; }
  }