:root {
  --demo-accent: #0b5d55;
  --demo-ink: #111315;
}

* { box-sizing: border-box; }

html,
body.demo-page {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-page {
  background: #e8edeb;
  color: var(--demo-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.demo-frame {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  height: 100dvh;
}

.demo-toolbar {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #dce4e1;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: 0 1rem;
  position: relative;
  z-index: 2;
}

.demo-toolbar a { color: inherit; text-decoration: none; }

.demo-toolbar__identity,
.demo-toolbar__actions,
.demo-toolbar__devices { align-items: center; display: flex; }

.demo-toolbar__identity { gap: 0.7rem; min-width: 0; }
.demo-toolbar__identity > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-toolbar__identity a:not(.demo-toolbar__back) { color: #6a7471; }
.demo-toolbar__identity span { color: #a2aaa7; margin: 0 0.35rem; }

.demo-toolbar__back,
.demo-toolbar__devices button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.demo-toolbar__back:hover,
.demo-toolbar__devices button:hover,
.demo-toolbar__devices button.is-active { background: #eaf3f0; color: var(--demo-accent); }

.demo-toolbar__devices { background: #f4f7f6; border-radius: 999px; padding: 3px; }
.demo-toolbar__devices button { height: 34px; width: 38px; }

.demo-device { border: 2px solid currentColor; display: block; position: relative; }
.demo-device--desktop { border-radius: 2px; height: 13px; width: 20px; }
.demo-device--desktop::after { background: currentColor; bottom: -5px; content: ""; height: 3px; left: 7px; position: absolute; width: 3px; }
.demo-device--tablet { border-radius: 3px; height: 18px; width: 14px; }
.demo-device--mobile { border-radius: 3px; height: 18px; width: 10px; }

.demo-toolbar__actions { gap: 0.6rem; justify-content: flex-end; }
.demo-toolbar__link { font-size: 0.85rem; font-weight: 750; padding: 0.55rem 0.8rem; }
.demo-toolbar__buy { background: var(--demo-accent); border-radius: 999px; color: #ffffff !important; font-size: 0.85rem; font-weight: 800; padding: 0.65rem 1rem; }

.demo-stage { align-items: stretch; display: flex; justify-content: center; min-height: 0; overflow: hidden; padding: 14px; }
.demo-browser { background: #ffffff; box-shadow: 0 16px 50px rgba(17, 19, 21, 0.18); display: grid; grid-template-rows: 34px minmax(0, 1fr); height: 100%; max-width: 100%; overflow: hidden; transition: width 220ms ease; width: 100%; }
.demo-stage[data-size="tablet"] .demo-browser { width: 820px; }
.demo-stage[data-size="mobile"] .demo-browser { width: 390px; }

.demo-browser__chrome { align-items: center; background: #f4f6f5; border-bottom: 1px solid #e1e6e4; display: flex; gap: 5px; padding: 0 10px; }
.demo-browser__chrome > span { background: #c7cfcc; border-radius: 50%; height: 7px; width: 7px; }
.demo-browser__chrome > div { background: #ffffff; border: 1px solid #dfe5e3; border-radius: 999px; color: #7a8480; font-size: 10px; margin: 0 auto; max-width: 360px; overflow: hidden; padding: 4px 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; width: 45%; }
.demo-browser iframe { border: 0; height: 100%; width: 100%; }

@media (max-width: 720px) {
  .demo-frame { grid-template-rows: 54px minmax(0, 1fr); }
  .demo-toolbar { grid-template-columns: minmax(0, 1fr) auto; padding: 0 0.6rem; }
  .demo-toolbar__identity > div a,
  .demo-toolbar__identity > div span,
  .demo-toolbar__devices,
  .demo-toolbar__link { display: none; }
  .demo-toolbar__actions { grid-column: 2; }
  .demo-stage { padding: 8px; }
  .demo-browser { grid-template-rows: 28px minmax(0, 1fr); }
}