* { box-sizing: border-box; }
body { font-family: system-ui, Arial, sans-serif; margin:0; color:#111; background:#fff; }
header { padding:16px; border-bottom:1px solid #eee; }
header h1 { margin:0 0 4px 0; font-size:20px; }
nav a { margin-right:12px; }
main { padding:16px; }
.grid { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; }
.grid a { display:block; padding:12px; border:1px solid #eee; border-radius:8px; text-decoration:none; color:#111; }
.grid a:hover { border-color:#ccc; }
label { display:block; margin:10px 0 6px; }
input, textarea, select { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; }
.output { background:#fafafa; padding:10px; border:1px dashed #ddd; margin-top:8px; }
footer { padding:16px; border-top:1px solid #eee; text-align:center; }