@charset "UTF-8";

/* Temporary, local feedback. The paper interface and its content keep their colors. */
.light-surface {
  --light-color: 106, 119, 211;
  --light-secondary: 141, 106, 215;
  --light-strength: .10;
  --light-edge: .28;
  --light-radius: 280px;
  position: relative;
}

.light-surface:where([data-light-surface="dark"], [data-light-surface="dark"] *) {
  --light-color: 139, 156, 255;
  --light-secondary: 175, 126, 249;
  --light-strength: .18;
  --light-edge: .38;
  --light-radius: 340px;
}

.light-layer {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 180ms ease;
  /* A low-alpha wash keeps even the light interface's dark text readable. */
  background: radial-gradient(circle var(--light-radius) at var(--light-x, 50%) var(--light-y, 50%), rgba(var(--light-color), var(--light-strength)), rgba(var(--light-secondary), .025) 44%, transparent 74%);
  box-shadow: inset 0 0 0 1px rgba(var(--light-color), var(--light-edge));
}

.light-hover > .light-layer,
.light-focus > .light-layer,
.light-pressed > .light-layer {
  opacity: 1;
}

.light-surface:focus-visible {
  outline: 2px solid rgb(var(--light-color));
  outline-offset: 5px;
}

.light-ripple {
  position: absolute;
  left: var(--light-click-x, 50%);
  top: var(--light-click-y, 50%);
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border: 1px solid rgba(var(--light-color), .65);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 48%, rgba(var(--light-secondary), .10) 72%, transparent 74%);
  animation: light-release 540ms cubic-bezier(.16, .65, .35, 1) both;
}

@keyframes light-release {
  from { opacity: .8; transform: scale(.22); }
  to { opacity: 0; transform: scale(3.6); }
}

@media (prefers-reduced-motion: reduce) {
  .light-layer { transition: none; }
  .light-ripple { display: none; animation: none; }
}

@media (forced-colors: active) {
  .light-layer { display: none; }
  .light-surface:focus-visible { outline: 2px solid Highlight; }
}