/* The live demo's sample page: a stand-in for "any website" inside the BrowserFrame.
   It deliberately does NOT use the design tokens. It plays someone else's site, written the way most
   sites are (plain values), so the real CSS engine shows hex colors and authored values exactly as it
   would on a real page. The engine keeps authored widths and grid templates only when they're literal. */

.ws-site {
  padding-bottom: 36px;
  background: #fbfaf7;
  color: #1d2025;
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ws-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid #e7e3da;
}

.ws-logo { font: 24px/1 "Instrument Serif", Georgia, serif; }

.ws-links { display: flex; gap: 18px; font-size: 13px; }
.ws-links a { color: #555a66; text-decoration: none; }

.ws-main { padding: 32px 24px 0; }

.ws-card {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e7e3da;
  border-radius: 16px;
  box-shadow: 0 14px 32px -18px rgba(29, 32, 37, 0.35);
}

.ws-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e3f4e8;
  color: #17603a;
  font-size: 12px;
  font-weight: 600;
}

.ws-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f8a4c;
}

.ws-title {
  margin: 14px 0 6px;
  font: 400 30px/1.1 "Instrument Serif", Georgia, serif;
  letter-spacing: -0.01em;
}

.ws-text { margin: 0; color: #555a66; }

.ws-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0;
}

.ws-stat { padding: 8px 10px; border-radius: 10px; background: #f4f1ea; }
.ws-stat dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #5f6370; }
.ws-stat dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }

.ws-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  background: #c2410c;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s;
}

.ws-button::after { content: "→"; }

@media (max-width: 600px) {
  .ws-nav { padding: 12px 16px; }
  .ws-main { padding: 24px 16px 0; }
  .ws-card { padding: 20px; }
}