.tool-page{max-width:var(--page-max);margin:0 auto;padding:var(--space-xl) var(--page-gutter) var(--space-2xl)}.tool-head{max-width:860px}.tool-crumbs{display:flex;gap:var(--space-xs);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-md)}.tool-crumbs a{color:var(--color-accent);text-decoration:none}.tool-crumbs a:hover{text-decoration:underline}.tool-page h1{font-family:var(--font-display);font-size:var(--text-2xl);line-height:var(--leading-tight);margin:0 0 var(--space-sm);color:var(--color-ink)}.tool-deck{font-size:var(--text-md);line-height:var(--leading-body);color:var(--color-ink-2);margin:0 0 var(--space-xl)}.tool-stage{background:var(--color-paper-1);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:clamp(1rem,3vw,2rem);margin-bottom:var(--space-2xl)}.tool-stage label{display:block;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink-3);margin:0 0 var(--space-2xs)}.tool-stage input[type=text],.tool-stage input[type=url],.tool-stage input[type=number],.tool-stage textarea,.tool-stage select{width:100%;background:var(--color-paper);border:1px solid var(--color-rule-strong);border-radius:var(--radius-sm);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);padding:.6rem .75rem}.tool-stage textarea{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.5;resize:vertical}.tool-stage input:focus-visible,.tool-stage textarea:focus-visible,.tool-stage select:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;border-color:transparent}.tool-field{margin-bottom:var(--space-md)}.tool-hint{font-size:var(--text-xs);color:var(--color-ink-4);margin-top:var(--space-2xs)}.tool-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}@media(max-width:720px){.tool-grid-2{grid-template-columns:1fr}}.tool-btn{display:inline-flex;align-items:center;gap:.5em;background:var(--color-accent);color:var(--color-accent-ink);border:0;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;padding:.65rem 1.1rem;cursor:pointer}.tool-btn:hover{filter:brightness(1.08)}.tool-btn--ghost{background:transparent;color:var(--color-accent);border:1px solid var(--color-rule-strong)}.tool-output{position:relative;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:var(--space-md);margin-top:var(--space-lg)}.tool-output pre{margin:0;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--color-ink-2)}.tool-copy{position:absolute;top:var(--space-xs);right:var(--space-xs)}.tool-pill{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);padding:.2em .6em;border-radius:999px;border:1px solid var(--color-rule-strong)}.tool-pill--ok{color:var(--color-accent);border-color:var(--color-accent-dim)}.tool-pill--warn{color:var(--color-warn)}.tool-pill--bad{color:var(--color-bad)}.tool-prose{max-width:760px}.tool-prose h2{font-family:var(--font-display);font-size:var(--text-lg);margin:var(--space-xl) 0 var(--space-sm);color:var(--color-ink)}.tool-prose p,.tool-prose li{font-size:var(--text-base);line-height:var(--leading-body);color:var(--color-ink-2)}.tool-prose a{color:var(--color-accent);text-decoration:underline}.tool-faq{border-bottom:1px solid var(--color-rule);padding:var(--space-sm) 0}.tool-faq summary{cursor:pointer;font-weight:600;color:var(--color-ink);font-size:var(--text-base)}.tool-faq p{margin:var(--space-sm) 0 0}.tool-related{margin-top:var(--space-2xl);border-top:1px solid var(--color-rule);padding-top:var(--space-xl)}.tool-related h2{font-family:var(--font-mono);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ink-3);margin:0 0 var(--space-md)}.tool-related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-md)}.tool-related a{display:block;background:var(--color-paper-1);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-md);text-decoration:none;height:100%;transition:border-color var(--dur-fast) var(--ease-out)}.tool-related a:hover{border-color:var(--color-accent-dim)}.tool-related strong{display:block;color:var(--color-ink);font-size:var(--text-base);margin-bottom:var(--space-2xs)}.tool-related span{color:var(--color-ink-3);font-size:var(--text-sm);line-height:var(--leading-snug)}
