:root{color-scheme:light dark;font-family:system-ui,-apple-system,sans-serif;line-height:1.5;--border: color-mix(in srgb, CanvasText 18%, transparent);--muted: color-mix(in srgb, CanvasText 55%, transparent)}*{box-sizing:border-box}body{margin:0;background:Canvas;color:CanvasText}main{max-width:720px;margin:0 auto;padding:2rem 1.25rem 3rem}h1{margin:0 0 .25rem;font-size:1.5rem}.lead{margin:0 0 1.5rem;color:var(--muted)}section{margin-bottom:1.5rem}section h2{margin:0 0 .75rem;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}label{display:block;margin-bottom:.75rem;font-size:.9rem}textarea,input[type=range]{width:100%}textarea{min-height:96px;padding:.65rem .75rem;border:1px solid var(--border);border-radius:6px;font:inherit;resize:vertical}.rangeRow{display:flex;align-items:center;gap:.75rem}.rangeValue{min-width:3rem;text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}.actions{display:flex;flex-wrap:wrap;gap:.5rem}button{border:1px solid var(--border);border-radius:6px;background:color-mix(in srgb,Canvas 92%,CanvasText);color:inherit;padding:.5rem .85rem;font:inherit;cursor:pointer}button:hover{border-color:color-mix(in srgb,CanvasText 35%,transparent)}.snippetTabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}.snippetTabs button.active{border-color:color-mix(in srgb,CanvasText 45%,transparent);font-weight:600}pre{margin:0;padding:.85rem;border:1px solid var(--border);border-radius:6px;overflow:auto;font-size:.8rem;line-height:1.45;background:color-mix(in srgb,Canvas 94%,CanvasText)}.status{margin-top:.75rem;font-size:.85rem;color:var(--muted)}