<fieldset style="--variant: 1;" class="container">
  <legend>--variant: 1</legend>
  <button>
    Button
  </button>

  <article class="card">
    <h2>Card</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eum a nisi quo quisquam deserunt.</p>
  </article>
</fieldset>

<fieldset style="--variant: 2;" class="container">
  <legend>--variant: 2</legend>
  <button>
    Button
  </button>

  <article class="card">
    <h2>Card</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eum a nisi quo quisquam deserunt.</p>
  </article>
</fieldset>

@container style(--variant: 1) {
  button,
  .card {
    --background: #eee;
    --foreground: #ccc;

    color: black;
    border: 1px solid var(--background);
    border-radius: 0.5rem;
    padding: 1rem;
    background: radial-gradient(
      circle at top center,
      var(--background),
      var(--foreground)
    );
    box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
  }
}

@container style(--variant: 2) {
  button,
  .card {
    background: #333;
    color: #eee;
    padding: 1rem;
    border-radius: 3px;
    border: 0;
    border-bottom: 4px solid orange;
  }
  .card {
    border-start-end-radius: 200px 20px;
  }
}

.container {
  display: grid;
  gap: 1rem;
  max-inline-size: 20rem;
}

html {
  font-family: system-ui;
  line-height: 1.5;
  padding: 1rem;
}
body {
  display: flex;
  gap: 1rem;
}
h2 {
  letter-spacing: -0.03rem;
}
h2,
p {
  margin: 0;
}

fieldset {
  padding: 2rem;
}
legend {
  padding: 1rem;
  font-family: monospace;
}