/* The final look: a floating header and a neutral white page background. */
html[data-look="try"] {
  --page: #fcfcfd;
  --surface-2: #f3f4f8;
  --surface-3: #e9ebf2;
  --line: #e3e5ec;
  --nav-h: 88px;
  background: #fcfcfd;
}

/* Floating header */
html[data-look="try"] .nav,
html[data-look="try"] .nav.solid {
  inset: 12px var(--gutter) auto; margin-inline: auto; max-width: var(--max);
  height: 64px; padding: 0 8px 0 22px; border-radius: 21px;
  background: rgba(255, 255, 255, .25); border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: none;
  transition: background-color var(--med) ease, border-color var(--med) ease, box-shadow var(--med) ease;
}
html[data-look="try"] .nav.solid { background: #fff; border-color: var(--line); box-shadow: 0 14px 34px -22px rgba(23, 23, 43, .5); }
@media (max-width: 560px) {
  html[data-look="try"] { --nav-h: 80px; }
  html[data-look="try"] .nav, html[data-look="try"] .nav.solid { height: 58px; padding-left: 16px; border-radius: 20px; inset-inline: 10px; }
}