/* Puzzle Websites — self-contained front-end styles (portable to any theme) */
.pzsite-grid {
	--pzsite-ink: #000000;
	--pzsite-sage: #6b6470;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Plus Jakarta Sans", Roboto, sans-serif;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.pzsite-grid * { box-sizing: border-box; }
.pzsite-empty { color: #666; font-style: italic; }

@media (min-width: 700px) { .pzsite-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .pzsite-grid { grid-template-columns: repeat(3, 1fr); } }

.pzsite-browser { border: 2.5px solid var(--pzsite-ink); border-radius: 32px; overflow: hidden; background: #fff; }
.pzsite-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 2.5px solid var(--pzsite-ink); background: #fafafa; }
.pzsite-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d8d8d8; display: inline-block; }
.pzsite-url {
	font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, monospace;
	font-size: 11px; color: var(--pzsite-sage); margin-left: 8px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pzsite-body { padding: 24px 22px 22px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.pzsite-body h4 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; }
.pzsite-desc { font-size: .85rem; color: var(--pzsite-sage); }
.pzsite-desc p { margin: 0; }
.pzsite-body ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pzsite-body li {
	font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, monospace;
	font-size: 9.5px; border: 1.5px solid var(--pzsite-ink); border-radius: 99px; padding: 3px 8px;
}

.pzsite-accent-rose   .pzsite-body { background: linear-gradient(135deg,#fdeaf3,#fff); }
.pzsite-accent-sand   .pzsite-body { background: linear-gradient(135deg,#f2eee6,#fff); }
.pzsite-accent-clay   .pzsite-body { background: linear-gradient(135deg,#f0e6da,#fff); }
.pzsite-accent-violet .pzsite-body { background: linear-gradient(135deg,#f1e7fb,#fff); }
.pzsite-accent-blush  .pzsite-body { background: linear-gradient(135deg,#fdeef7,#fff); }
.pzsite-accent-mint   .pzsite-body { background: linear-gradient(135deg,#e3fff3,#fff); }