@property --hold {
  syntax: '<color>';
  inherits: true;
  initial-value: #d97757;
}
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center;
  padding: 16px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #17120f;
  color: #f6f3ef;
  font: 14px/1.45 "Geist", ui-sans-serif, system-ui, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(45% 55% at 25% 20%, #d97757, transparent 70%),
    radial-gradient(35% 45% at 85% 85%, #10a37f, transparent 70%);
  opacity: 0.8;
}
form { display: grid; gap: 10px; width: min(340px, 100%); padding: 22px; background: rgb(24 22 21 / 0.88); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 12px; box-shadow: 0 30px 70px -25px rgb(0 0 0 / 0.7); }
h1 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
label { color: #b5ada6; font-size: 13px; }
input, button { font: inherit; padding: 9px 11px; border-radius: 8px; }
input { background: rgb(0 0 0 / 0.3); color: inherit; border: 1px solid rgb(255 255 255 / 0.1); }
input:focus, button:focus-visible { outline: 2px solid #d97757; outline-offset: 2px; }
button { background: #f6f3ef; color: #17120f; border: 0; font-weight: 500; cursor: pointer; }
.erro { margin: 2px 0 0; color: #ff9d9d; font-size: 13px; }
[hidden] { display: none !important; }