:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f6f2;
  color: #13231f;
}

* { box-sizing: border-box; }

body { margin: 0; background: #f4f6f2; }

button,
a { font: inherit; }

.credential-embed {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 24px;
}

.credential-embed__header { max-width: 610px; }
.credential-embed__eyebrow { margin: 0 0 10px; color: #237b63; font: 800 .7rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.credential-embed h1,
.credential-embed h2 { margin: 0; color: #13231f; font-weight: 800; line-height: 1.1; letter-spacing: 0; }
.credential-embed h1 { max-width: 520px; font-size: 2.3rem; }
.credential-embed h2 { font-size: 1.15rem; }
.credential-embed__intro { margin: 14px 0 0; color: #445650; font-size: .97rem; line-height: 1.55; }

.credential-embed__workspace,
.credential-embed__result { margin-top: 24px; border: 1px solid #bfd0c7; border-radius: 6px; background: #ffffff; }
.credential-embed__workspace { padding: 22px; text-align: center; outline: 3px solid transparent; outline-offset: 3px; transition: border-color .16s ease, outline-color .16s ease; }
.credential-embed__workspace[data-dragging="true"] { border-color: #237b63; outline-color: #a7d8c8; }
.credential-embed__workspace button,
.credential-embed__full { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid #13231f; border-radius: 4px; color: #ffffff; background: #13231f; font: 800 .75rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.credential-embed__workspace button:hover,
.credential-embed__full:hover { color: #13231f; background: #d8ef73; }
.credential-embed__workspace button:focus-visible,
.credential-embed__full:focus-visible { outline: 3px solid #237b63; outline-offset: 3px; }
.credential-embed__workspace button:disabled { cursor: wait; opacity: .62; }
.credential-embed__limit { margin: 16px 0 0; color: #243a33; font: 700 .78rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
.credential-embed__hint,
.credential-embed__status { margin: 7px 0 0; color: #5c6d66; font-size: .82rem; line-height: 1.45; }
.credential-embed__demo { display: inline-flex; margin-top: 14px; color: #237b63; font: 800 .72rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; text-underline-offset: 3px; }
.credential-embed__demo:hover { color: #13231f; }
.credential-embed__demo:focus-visible { outline: 3px solid #237b63; outline-offset: 3px; }
.credential-embed__status:empty { display: none; }
.credential-embed__status[data-state="error"] { color: #a53d2d; }
.credential-embed__status[data-state="loading"] { color: #237b63; }

.credential-embed__result { padding: 22px; }
.credential-embed__result[data-state="found"] { border-color: #7ab89f; }
.credential-embed__result[data-state="absent"] { border-color: #d7c987; }
.credential-embed__result > p:not(.credential-embed__eyebrow):not(.credential-embed__boundary) { margin: 12px 0 0; color: #445650; line-height: 1.5; }
.credential-embed__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; }
.credential-embed__facts div { min-height: 76px; padding: 12px; border: 1px solid #dbe4de; background: #f7faf7; }
.credential-embed__facts dt { color: #5c6d66; font: 800 .62rem/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.credential-embed__facts dd { margin: 9px 0 0; color: #13231f; font: 800 .78rem/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.credential-embed__boundary { margin: 20px 0 0; color: #445650; font-size: .8rem; line-height: 1.5; }
.credential-embed__full { margin-top: 16px; }
.credential-embed__footer { margin-top: 16px; color: #5c6d66; font: 700 .7rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }

@media (max-width: 520px) {
  .credential-embed { padding: 18px 14px; }
  .credential-embed h1 { font-size: 1.85rem; }
  .credential-embed__workspace,
  .credential-embed__result { padding: 18px; }
  .credential-embed__facts { grid-template-columns: 1fr; }
  .credential-embed__workspace button,
  .credential-embed__full { width: 100%; }
}