\n\n\n```\n\nKey rules:\n- System theme only — never force light or dark. Include ``.\n- No external images or favicons — use emoji or inline SVG\n- No frameworks (React, etc.) for simple tools — vanilla HTML/CSS/JS\n\n## Header\n\nUse `` — Pico automatically mutes the subtitle:\n\n```html\n\n

📄 Tool Name

\n

What it does. Link to underlying library if wrapping one.

\n\n```\n\n## Tabs (custom — Pico has no tab component)\n\nThis is the one pattern we always write custom CSS for. Use ARIA roles:\n\n```html\n

\n \n \n

\n

...

\n

...

\n```\n\n```css\n[role=\"tablist\"] { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.5rem; }\n[role=\"tab\"] {\n background: none; border: none;\n border-bottom: 3px solid transparent; border-radius: 0;\n padding: 0.75rem 1.5rem; margin: 0;\n color: var(--pico-muted-color); font-weight: 500; cursor: pointer;\n}\n[role=\"tab\"][aria-selected=\"true\"] { color: var(--pico-primary); border-bottom-color: var(--pico-primary); }\n[role=\"tab\"]:hover { color: var(--pico-primary); }\n[role=\"tabpanel\"] { display: none; }\n[role=\"tabpanel\"].active { display: block; }\n```\n\n```javascript\ndocument.querySelectorAll('[role=\"tab\"]').forEach(tab => {\n tab.addEventListener('click', () => {\n document.querySelectorAll('[role=\"tab\"]').forEach(t => t.setAttribute('aria-selected', 'false'));\n document.querySelectorAll('[role=\"tabpanel\"]').forEach(p => p.classList.remove('active'));\n tab.setAttribute('aria-selected', 'true');\n document.getElementById(tab.getAttribute('aria-controls')).classList.add('active');\n });\n});\n```\n\n## Input Patterns\n\n**URL input with action button** — use Pico's fieldset group:\n```html\n

\n \n \n

\n```\n\n**Loading state** — Pico's `aria-busy` adds a spinner to buttons:\n```javascript\nfunction setLoading(btn, loading) {\n btn.setAttribute('aria-busy', loading);\n btn.disabled = loading;\n}\n```\n\n**Enter key to submit:**\n```javascript\nurlInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') fetchBtn.click(); });\n```\n\n## Output Patterns\n\n**Code/markdown output with copy button** (custom — no Pico equivalent):\n\n```html\n

\n \n

\n

\n```\n\n```css\n.output-wrap { position: relative; }\n.copy-btn {\n position: absolute; top: 0.5rem; right: 0.5rem;\n background: var(--pico-secondary-background); border: 1px solid var(--pico-muted-border-color);\n border-radius: 4px; padding: 0.3rem 0.6rem; font-size: 0.8rem; z-index: 1; cursor: pointer;\n}\npre.result {\n max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word;\n padding: 1rem; padding-top: 2.5rem; margin: 0; font-size: 0.85rem;\n}\n```\n\n**Metadata bar** (custom — no Pico equivalent):\n```css\n.meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8rem; color: var(--pico-muted-color); }\n```\n\n## Pico Native Components — Don't Reinvent\n\nBefore writing custom CSS, check if Pico already handles it:\n\n- **Cards** — `

` with `

` and `

History · references