.atomic-tools{max-width:1120px}.atomic-tools .page-head{max-width:900px}.atomic-tools h1{text-wrap:balance;font-size:clamp(1.85rem,4vw,3.2rem);letter-spacing:-.025em}.atomic-list article{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:2rem;padding:1.5rem 0;border-bottom:1px solid var(--line,#292929)}.atomic-list h2{margin:0 0 .5rem}.atomic-list p{max-width:70ch}.atomic-list article>p{align-self:center}.atomic-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}.atomic-body section{margin:1.5rem 0}.atomic-tools pre{overflow:auto;max-width:100%;font-size:.9rem;background:var(--panel,#171717);padding:1.2rem;border-radius:8px;line-height:1.6}.atomic-sample{min-width:0}.atomic-sample form{display:grid;gap:.75rem}.atomic-sample label{font-size:1rem}.atomic-sample input{font:inherit;min-width:0;width:100%;box-sizing:border-box;background:var(--bg,#101010);color:var(--text,#eee);border:1px solid var(--line,#555);padding:.8rem;border-radius:6px}.atomic-sample button{justify-self:start}.atomic-tools .atomic-price{font-size:1.75rem;font-variant-numeric:tabular-nums}.atomic-tools a:focus-visible,.atomic-tools input:focus-visible,.atomic-tools button:focus-visible,.atomic-tools pre:focus-visible{outline:2px solid currentColor;outline-offset:4px}.atomic-tools>section{margin:2.5rem 0}.atomic-tools p{line-height:1.7}.atomic-tools .button:active{transform:translateY(1px)}@media(max-width:700px){.atomic-body{grid-template-columns:1fr;gap:0}.atomic-list article{grid-template-columns:1fr;gap:.3rem}.atomic-list article>p{margin:0}.atomic-tools pre{font-size:.8rem}.atomic-tools .page-head{padding-top:1.5rem}}@media(prefers-reduced-motion:reduce){.atomic-tools .button{transition:none;transform:none}}
.atomic-tools .page-head{padding:48px 0 24px}.atomic-tools .atomic-body section{padding:8px 0;margin:12px 0}.atomic-tools .atomic-body h2{margin:0 0 12px}.atomic-tools>section{padding:12px 0;margin:28px 0}@media(max-width:700px){.atomic-tools .atomic-body>.atomic-sample{order:-1}.atomic-tools .page-head{padding:28px 0 18px}.atomic-tools .atomic-body>div{margin-top:20px}}
