:root {
  color-scheme: dark;
  --ink: #0f1419;
  --slate: #1b222c;
  --slate-light: #27313d;
  --green: #2be07a;
  --text: #e7ecf3;
  --muted: #9ba6b7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background:
    radial-gradient(circle at 16% 12%, rgba(43, 224, 122, .14), transparent 32rem),
    radial-gradient(circle at 88% 80%, rgba(91, 111, 137, .12), transparent 28rem),
    var(--ink);
  color: var(--text);
}

body::before {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.preview-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.preview-card {
  position: relative;
  width: min(100%, 560px);
  padding: clamp(28px, 6vw, 52px);
  border: 1px solid rgba(231, 236, 243, .14);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(39, 49, 61, .82), rgba(20, 27, 34, .9));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(22px) saturate(120%);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.04em;
  text-decoration: none;
}

.wordmark img { width: 42px; height: 42px; }
.wordmark span span { color: var(--green); }

.preview-copy { margin: 52px 0 34px; }

h1 {
  margin: 0;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: clamp(3rem, 11vw, 5.3rem);
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.preview-copy p {
  max-width: 42ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

label {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
}

.password-row { display: flex; gap: 10px; }

input {
  min-width: 0;
  flex: 1;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(231, 236, 243, .18);
  border-radius: 12px;
  outline: none;
  background: rgba(8, 12, 16, .58);
  color: var(--text);
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(43, 224, 122, .13);
}

button {
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: #07130c;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

button:hover { filter: brightness(1.06); transform: translateY(-1px); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

.error {
  margin: 14px 0 0;
  color: #ff9e9e;
  font-size: .92rem;
}

.privacy {
  margin: 32px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(231, 236, 243, .1);
  color: #748093;
  font-size: .8rem;
}

@media (max-width: 520px) {
  .preview-shell { padding: 14px; }
  .preview-card { padding: 28px 22px; border-radius: 22px; }
  .preview-copy { margin-top: 44px; }
  .password-row { display: grid; }
  button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .preview-card { background: var(--slate); backdrop-filter: none; }
}