:root {
  color-scheme: light;
  --page-color: #7c5cff;
  --page-color-hsl: hsl(250 100% 68%);
  --text-color: #15141d;
  --muted-color: #5d596b;
  --panel-color: rgba(255, 255, 255, 0.86);
  --panel-border: rgba(20, 18, 31, 0.14);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--text-color);
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.72), transparent 24rem),
    linear-gradient(135deg, var(--page-color), var(--page-color-hsl));
  transition: background 280ms ease;
}

.app-shell {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
}

.color-panel {
  width: min(100%, 26rem);
  padding: clamp(1.4rem, 5vw, 2.2rem);
  text-align: center;
  background: var(--panel-color);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 1.5rem 4rem rgba(21, 20, 29, 0.22);
  backdrop-filter: blur(18px);
}

.eyebrow {
  margin: 0 0 0.7rem;
  color: var(--muted-color);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 10vw, 3.65rem);
  line-height: 0.96;
}

.swatch {
  width: min(10rem, 48vw);
  aspect-ratio: 1;
  margin: 1.8rem auto 1.1rem;
  background: var(--page-color);
  border: 0.45rem solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(21, 20, 29, 0.16),
    0 1rem 2.8rem rgba(21, 20, 29, 0.28);
  transition:
    background 280ms ease,
    transform 180ms ease;
}

.swatch.pop {
  transform: scale(1.05);
}

.color-value,
.color-hsl {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.color-value {
  font-size: clamp(1.5rem, 8vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
}

.color-hsl {
  margin-top: 0.45rem;
  color: var(--muted-color);
  font-size: 0.95rem;
  font-weight: 700;
}

.color-button {
  width: 100%;
  min-height: 3.4rem;
  margin-top: 1.6rem;
  padding: 0.85rem 1rem;
  color: #ffffff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  background: #15141d;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0.75rem 1.6rem rgba(21, 20, 29, 0.24);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.color-button:hover {
  transform: translateY(-1px);
  background: #24212e;
  box-shadow: 0 1rem 2rem rgba(21, 20, 29, 0.28);
}

.color-button:active {
  transform: translateY(1px);
  box-shadow: 0 0.45rem 1rem rgba(21, 20, 29, 0.2);
}

.color-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
}

@media (max-width: 28rem) {
  .color-panel {
    padding: 1.2rem;
  }

  .color-hsl {
    font-size: 0.82rem;
  }
}