/* Browser window with dmpregister.vercel.app (white, Inter, shadcn style). */
.browser {
  width: min(640px, 100%);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px #0000001a, 0 24px 48px -20px rgba(0, 0, 0, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.12);
  font: 14px/1.45 Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  color: #0a0a0a;
  position: relative;
}
.browser .chrome { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: #f3f3f2; border-bottom: 1px solid #e5e5e5; }
.browser .dots { display: flex; gap: 7px; }
.browser .dots i { width: 11px; height: 11px; border-radius: 50%; background: #d9d9d9; display: block; }
.browser .url { flex: 1; height: 26px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e5e5e5; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: #555; }
.browser .url svg { width: 11px; height: 11px; fill: #777; }
.reg { padding: 26px 30px 28px; max-height: calc(var(--stage-h) - 70px); overflow: hidden; }
.reg-scroll { transition: transform 450ms var(--ease-in-out); }
.reg header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.reg header img { width: 92px; filter: brightness(0) saturate(100%); opacity: 0.88; }
.reg header h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.reg header p { margin: 2px 0 0; color: #737373; }
.reg .card { border-radius: 12px; box-shadow: 0 0 0 1px #0a0a0a1a; padding: 16px 0 0; overflow: hidden; }
.reg .card-h { padding: 0 16px 14px; }
.reg .card-h b { display: block; font-size: 15px; font-weight: 500; }
.reg .card-h span { color: #737373; }
.reg .fields { padding: 0 16px; display: grid; gap: 14px; }
.reg .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg label { display: grid; gap: 6px; font-weight: 500; }
.reg label small { font-weight: 400; color: #737373; font-size: 13px; }
.reg label small[data-ok]::before { content: "✓"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 700; vertical-align: -2px; }
.reg .in {
  height: 34px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  padding: 0 11px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  transition: box-shadow 150ms ease;
}
.reg .in[data-typing] { box-shadow: inset 0 0 0 1px #a3a3a3, 0 0 0 3px #a3a3a340; }
.reg .in .v:empty::before { content: attr(data-ph); color: #a3a3a3; }
.reg .in[data-typing] .v::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -0.16em; background: #0a0a0a; animation: caret 1s steps(1) infinite; }
.reg .in.ro { background: #f5f5f5; color: #737373; transition: box-shadow 150ms ease, color 200ms ease; }
.reg .in[data-flash] { box-shadow: inset 0 0 0 1px var(--dmp), 0 0 0 3px rgba(0, 127, 200, 0.18); }
.reg .in.ro[data-filled] { color: #0a0a0a; }
.reg .ok { display: inline-flex; align-items: center; gap: 6px; color: #16a34a; font-size: 13px; opacity: 0; transition: opacity 200ms ease; }
.reg .ok[data-on] { opacity: 1; }
.reg .foot { margin-top: 16px; padding: 14px 16px; background: #fafafa; border-top: 1px solid #ececec; }
.reg .btn { height: 34px; border-radius: 10px; display: grid; place-items: center; background: #0a0a0a; color: #fafafa; font-weight: 500; opacity: 0.5; transition: opacity 200ms ease, transform 140ms var(--ease-out); }
.reg .btn[data-on] { opacity: 1; }
.reg .btn[data-pressed] { transform: scale(0.98); }
.reg .foot p { margin: 8px 0 0; font-size: 12.5px; color: #737373; }
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  z-index: 5;
  pointer-events: none;
  transition: transform 600ms var(--ease-in-out), opacity 200ms ease;
  opacity: 0;
}
.cursor[data-on] { opacity: 1; }
.cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.cursor[data-click] svg { transform: scale(0.88); transition: transform 100ms ease; }

@media (max-width: 760px) {
  .reg { padding: 18px 16px 20px; max-height: none; }
  .reg .two { grid-template-columns: 1fr; }
  .reg header img { width: 72px; }
  .reg header h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor, .reg-scroll { transition: opacity 200ms ease; }
}