:root { color-scheme: light; font-family: Arial, sans-serif; color: #1f2937; background: #f8fafc; }
* { box-sizing: border-box; }
body { margin: 0; }
.container { width: min(100% - 32px, 900px); margin: 0 auto; padding: 64px 0; }
.eyebrow { color: #2563eb; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0 0 16px; font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { margin-top: 0; }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 40px; }
.tool-card, .generator { padding: 24px; border: 1px solid #dbe3ef; border-radius: 12px; background: #fff; }
a { color: #2563eb; font-weight: 600; }
.back { display: inline-block; margin-bottom: 32px; }
.generator { display: grid; gap: 20px; margin: 28px 0 16px; }
label { display: grid; gap: 8px; font-weight: 600; }
textarea, input { width: 100%; padding: 10px 12px; border: 1px solid #9ca3af; border-radius: 6px; font: inherit; }
textarea { min-height: 100px; resize: vertical; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
button { justify-self: start; padding: 11px 16px; border: 0; border-radius: 6px; background: #2563eb; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
code { padding: 2px 4px; border-radius: 4px; background: #e5e7eb; }