/* Preview placeholder markers — ON by default, hidden when (or ?live) */ [data-ph]{ outline:2px dashed #f59e0b; outline-offset:3px; position:relative; } [data-ph]::after{ content:"PLACEHOLDER · " attr(data-ph); position:absolute; top:-.7rem; left:0; font:600 10px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing:.04em; background:#f59e0b; color:#111; padding:2px 6px; border-radius:4px; white-space:nowrap; z-index:50; pointer-events:none; } .ph-banner{ position:sticky; top:0; z-index:9000; background:#f59e0b; color:#111; text-align:center; font:600 12.5px/1.4 "Chakra Petch", system-ui, sans-serif; letter-spacing:.02em; padding:8px 12px; } .ph-banner b{ font-weight:700; } .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; } }