/* Tool page only (workspace styles live in assets/workspace.css) */
.how{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--border)}
.how div{padding:20px 20px 0 0}
.how div + div{padding-left:20px;border-left:1px solid var(--border)}
.how .n{font:500 12px/16px var(--mono);color:var(--muted);margin-bottom:8px}
.how h3{font-size:16px;line-height:24px;margin-bottom:4px}
.how p{font-size:14px;line-height:20px;color:var(--muted)}
.faq2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px}
@media (max-width:1024px){.how{grid-template-columns:1fr 1fr}.how div:nth-child(odd){padding-left:0;border-left:0}.faq2{grid-template-columns:1fr;gap:32px}}
@media (max-width:720px){.how{grid-template-columns:1fr}.how div,.how div + div{padding:20px 0 0;border-left:0}}

/* tool: inline forms in the inspector */
.char-form h3{margin-bottom:12px}
.char-form .field + .field{margin-top:12px}
.char-form .textarea{min-height:110px;font:400 13px/1.7 var(--mono)}
.lang-note .text-link{font-size:12px;line-height:16px;font-weight:600}
.neg summary .text-link{font-weight:600}

/* the floating toolbar must fit the middle column, which is narrower than the window */
.stage{container-type:inline-size;container-name:stage}
@container stage (max-width:900px){.tools .tbtn .k{display:none}}
@container stage (max-width:640px){.tools{left:8px;right:8px;translate:none;overflow-x:auto;scrollbar-width:none}.tools::-webkit-scrollbar{display:none}}