.canvas {
  background: linear-gradient(155deg, #fff 45%, #fafbfe);
  box-shadow: 0 0.125rem 0.3125rem #32251206, 0 1rem 2.25rem #32251212, 0 2.5rem 5.625rem #32251212, inset 0 0.0625rem 0 #fff;
}

.config-surface {
  background: linear-gradient(145deg, #fafbfe, #f4f6fb);
  box-shadow: 0 0.125rem 0.25rem #20284604, 0 0.625rem 1.625rem #20284608, inset 0 0.0625rem 0 #fff;
}

.prompt-block {
  padding: 1rem 1.125rem;
  border: 0.0625rem solid #e8ebf180;
  border-radius: 1rem;
  background: linear-gradient(145deg, #fff, #fafbfc);
  box-shadow: 0 0.125rem 0.25rem #20284603, 0 0.5rem 1.375rem #20284605, inset 0 0.0625rem 0 #fff;
}

.config-surface, .prompt-surface { position: relative; isolation: isolate; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .config-surface::before, .prompt-surface::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(20rem circle at var(--light-x, 50%) var(--light-y, 35%), #0075d60a, transparent 75%);
    content: '';
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
  }

  .prompt-surface { border-radius: 1.375rem; }
  .prompt-surface::before { z-index: 1; }
  .is-lit::before { opacity: 1; }
}

@media (max-width: 43.75rem) {
  .prompt-block { padding: 0.875rem; border-radius: 0.75rem; }
}