main{max-width:1120px;margin:auto;padding:2rem 1rem 4rem}.tool-hero{padding:2rem 0}.eyebrow{letter-spacing:.12em;text-transform:uppercase}.workspace{display:grid;gap:1rem;padding:1.25rem;border:1px solid var(--border-color,#d8dee8);border-radius:1rem;background:var(--surface,#fff)}label{display:grid;gap:.45rem}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}input,select,textarea,button{font:inherit;padding:.75rem;border-radius:.65rem;border:1px solid #b8c1cc}button{cursor:pointer;font-weight:700}.preview{min-height:220px;border-radius:1rem;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#eef2ff,#f8fafc)}.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}.result-card{padding:1rem;border:1px solid #d8dee8;border-radius:.8rem}.metric{font-size:1.1rem;font-weight:700}.content-section{margin-top:2.5rem}.actions{display:flex;gap:.75rem;flex-wrap:wrap}.code-output{white-space:pre-wrap;word-break:break-word;background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:.8rem}@media(max-width:640px){.controls{grid-template-columns:1fr}}
#sample{width:240px;height:180px;display:grid;place-items:center;font-size:2rem;font-weight:900;color:white;background:linear-gradient(135deg,#2563eb,#ec4899)}