/* Frosted surfaces: solid fallbacks first, translucency only where supported. */
:root {
  --glass-opacity: .25; /* 75% transparent; foreground text remains fully opaque. */
  --glass-edge: rgba(255, 255, 255, .86);
  --glass-shadow: 0 12px 36px rgba(35, 65, 118, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.question-bubble, .source-node, .signal-core {
  background: #f7faff;
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(146, 170, 213, .16);
}

.signal-scene {
  background: radial-gradient(ellipse at 46% 40%, #dbe7ff 0, rgba(227, 237, 255, .7) 28%, transparent 68%);
}

.signal-core {
  box-shadow: var(--glass-shadow), 0 0 0 12px rgba(255, 255, 255, .26);
}

.answer-bubble {
  background: #f7faff;
  color: var(--ink);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(146, 170, 213, .16);
}

.demo-shell {
  background: radial-gradient(ellipse at 88% 0, #355581 0, #1d324f 40%, #14263e 100%);
  border: 1px solid rgba(163, 189, 230, .48);
  box-shadow: 0 22px 56px rgba(24, 52, 96, .13), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.answer-card, .demo-source-list li, .demo-task-list li {
  background: #f5f8ff;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 8px 24px rgba(7, 21, 44, .08), inset 0 1px 0 #fff;
}

.insight-card {
  background: #2c4363;
  border-color: rgba(192, 213, 245, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}

.solution-grid {
  position: relative;
  isolation: isolate;
}

.solution-grid::before {
  content: "";
  position: absolute;
  inset: -32px -16px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 28%, rgba(171, 199, 255, .52), transparent 47%),
    radial-gradient(ellipse at 84% 75%, rgba(141, 177, 250, .46), transparent 49%);
}

.solution {
  background: #f6f9ff;
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(151, 174, 215, .2);
}

.solution-service { background: #eaf0ff; }

.start-panel {
  background: radial-gradient(ellipse at 0 0, #e4edff, transparent 60%),
    radial-gradient(ellipse at 100% 100%, #dfe9fc, transparent 55%), #f3f6fc;
  border: 1px solid rgba(214, 225, 244, .85);
  box-shadow: var(--glass-shadow);
}

.form-area {
  padding: 24px;
  margin: -24px;
  border-radius: 20px;
  background: #fafcff;
  border: 1px solid var(--glass-edge);
  box-shadow: 0 8px 28px rgba(40, 65, 111, .05), inset 0 1px 0 #fff;
}

@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .question-bubble, .source-node, .signal-core, .solution, .form-area {
    background: rgba(255, 255, 255, var(--glass-opacity));
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }
  .solution-service { background: rgba(228, 237, 255, var(--glass-opacity)); }
  .answer-bubble {
    background: rgba(255, 255, 255, var(--glass-opacity));
    color: var(--ink);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }
  .answer-card, .demo-source-list li, .demo-task-list li {
    background: rgba(255, 255, 255, var(--glass-opacity));
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .insight-card {
    background: rgba(91, 123, 172, var(--glass-opacity));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .answer-bubble small, .answer-bubble .citation-tag { color: #243858; }
  .answer-bubble .answer-mark { color: #173d9c; }
  .answer-bubble .citation-tag { border-color: rgba(36, 56, 88, .45); }
  .answer-card-top, .answer-card-top > span:first-child,
  .demo-source-list small, .demo-task-list small { color: #fff; }
  .answer-card-top > span:first-child > span, .source-index { color: #fff; }
}

@media (max-width: 620px) {
  .solution-grid::before { inset: -24px -8px; }
  .form-area { padding: 16px; margin: -8px; border-radius: 16px; }
}

/* Match the observation workspace to the site's pale blue glass surfaces. */
.demo-shell {
  color: var(--ink);
  background: radial-gradient(ellipse at 90% 5%, rgba(171, 199, 255, .38), transparent 60%),
    radial-gradient(ellipse at 0 100%, rgba(194, 214, 255, .3), transparent 55%), #f6f9ff;
  border-color: rgba(188, 206, 238, .6);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(151, 174, 215, .12);
}
.demo-toolbar, .demo-sidebar, .demo-bottom { border-color: rgba(161, 184, 223, .26); }
.demo-toolbar { background: rgba(255, 255, 255, var(--glass-opacity)); }
.demo-sidebar { background: rgba(225, 235, 255, var(--glass-opacity)); }
.demo-project small, .demo-sidebar p, .demo-eyebrow, .demo-bottom,
.answer-card-top, .demo-source-list small, .demo-task-list small,
.insight-card p, .insight-footer { color: var(--muted); }
.scenario-control { background: rgba(202, 217, 244, .38); }
.scenario-control button, .demo-sidebar button { color: #4e6080; }
.scenario-control button:hover, .demo-sidebar button:hover { background: rgba(210, 225, 255, .65); color: #1943b6; }
.scenario-control button[aria-pressed=true] {
  color: #1943b6;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 2px 8px rgba(35, 65, 118, .08), inset 0 1px 0 #fff;
}
.demo-sidebar button[aria-pressed=true] { background: rgba(35, 86, 232, .09); color: #1943b6; }
.demo-sidebar a { color: #2350b5; }
.demo-sidebar a:hover { color: #163c9e; }
.sample-badge { color: #52617b; border-color: rgba(122, 149, 192, .36); background: rgba(255, 255, 255, .3); }
.demo-shell .answer-card, .demo-shell .demo-source-list li,
.demo-shell .demo-task-list li, .demo-shell .insight-card {
  color: var(--ink);
  background: rgba(255, 255, 255, var(--glass-opacity));
  border-color: rgba(255, 255, 255, .86);
  box-shadow: 0 5px 18px rgba(40, 65, 111, .04), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.demo-shell .answer-card-top > span:first-child { color: var(--ink); }
.demo-shell .answer-card-top > span:first-child > span,
.demo-shell .source-index, .demo-shell .insight-icon { color: var(--blue); }
.demo-shell .answer-citations > span { background: rgba(221, 232, 252, .65); color: #4a5d7a; }
.demo-shell .source-type, .demo-shell .task-state { background: rgba(35, 86, 232, .08); color: #234aa5; }
.demo-bottom i { background: var(--blue); }

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .question-bubble, .source-node, .signal-core, .solution, .form-area,
  .answer-card, .demo-source-list li, .demo-task-list li {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .solution-service { background: #edf2ff; }
  .answer-card, .demo-source-list li, .demo-task-list li,
  .answer-card-top, .answer-card-top > span:first-child,
  .demo-source-list small, .demo-task-list small { color: var(--ink); }
  .answer-card-top > span:first-child > span, .source-index { color: var(--blue); }
  .answer-bubble {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .solution-grid::before { display: none; }
  .answer-bubble { color: var(--ink); }
  .answer-bubble small, .answer-bubble .citation-tag { color: #243858; }
  .answer-bubble .answer-mark { color: #173d9c; }
  .demo-shell .answer-card, .demo-shell .demo-source-list li,
  .demo-shell .demo-task-list li, .demo-shell .insight-card {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}