/* Preview placeholder markers — ON by default, hidden with ?live or html.live */
[data-ph]{outline:1.5px dashed #f59e0b;outline-offset:2px;position:relative}
[data-ph]::after{content:"PLACEHOLDER · " attr(data-ph);position:absolute;top:-.7rem;left:0;
  font:600 9px/1 system-ui,sans-serif;background:#f59e0b;color:#111;padding:2px 6px;border-radius:4px;
  white-space:nowrap;z-index:7;pointer-events:none;letter-spacing:.03em}
.ph-banner{position:sticky;top:0;z-index:9000;background:#f59e0b;color:#111;text-align:center;
  font:600 12px/1.4 system-ui,sans-serif;padding:7px 12px;letter-spacing:.02em}
.ph-banner a{text-decoration:underline}
html.live [data-ph]{outline:none}
html.live [data-ph]::after,html.live .ph-banner{display:none}
@media print{[data-ph]::after,.ph-banner{display:none}}