@font-face {
  font-family: "Ronivo Petrona";
  src: url("./assets/petrona-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f8f8f7;
  --ink: #1a1a1a;
  --muted: #737373;
  --line: #dededb;
  --system-font: -apple-system, system-ui, "Segoe UI Variable Display", "Segoe UI", Helvetica, Arial, sans-serif;
  font-family: var(--system-font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.demo-hub {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 45%, rgb(248 248 247 / .96) 0%, rgb(248 248 247 / .82) 24%, rgb(248 248 247 / .18) 64%, transparent 100%),
    radial-gradient(circle, rgb(0 0 0 / .1) .8px, transparent 1px);
  background-size: 100% 100%, 14px 14px;
  background-position: center;
}
.demo-entry { width: 100%; max-width: 600px; }
.demo-brand-mark {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 24px;
  background: currentColor;
  -webkit-mask: url("./assets/ronivo-icon.svg") center / contain no-repeat;
  mask: url("./assets/ronivo-icon.svg") center / contain no-repeat;
}
h1 {
  margin: 0;
  font-family: "Ronivo Petrona", "Petrona", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -.04em;
  text-align: center;
}
.demo-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}
.demo-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.demo-choices button, .demo-choices a {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  appearance: none;
  background: #fff;
  color: #525252;
  -webkit-text-fill-color: #525252;
  font-family: var(--system-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
  opacity: 1;
  cursor: default;
}
@media (max-height: 420px) {
  .demo-hub { align-items: start; padding-block: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .demo-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .demo-choices button, .demo-choices a { padding-inline: 6px; }
}

.demo-choices .demo-choice-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  cursor: pointer;
}
.demo-choices .demo-choice-link:hover { border-color: #a3a3a3; background: #fff; }
.demo-choices .demo-choice-link:focus-visible { outline: 2px solid #525252; outline-offset: 4px; }