.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1.5rem;align-items:start}.tool-panel{padding:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0}.tool-panel h2{font-size:1.5rem;margin-top:0}.tool-panel .field{margin-block:1rem}.tool-panel input:not([type=checkbox]),.tool-panel select{width:100%;min-width:0;min-height:44px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:.5rem;padding:.5rem}.tool-panel input[type=range]{padding:0;accent-color:var(--accent)}.tool-panel button{min-height:44px}.tool-preview{border:1px solid var(--line);border-radius:.75rem;padding:1.25rem;overflow-wrap:anywhere}.tool-preview strong{font-size:1.5rem}.tool-code{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;background:var(--surface-2);color:var(--text);padding:1rem;border-radius:.75rem;font-size:.85rem}.demo-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}.grid-item{min-width:0;overflow-wrap:anywhere;padding:1.25rem;border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:.7rem}.tool-error{color:var(--danger)}.tool-check{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line);cursor:pointer}.tool-check input{flex:none;width:22px;height:22px;margin-top:.2rem;accent-color:var(--accent)}.learning-links{margin-block:1.5rem}.learning-links a{display:block;padding:.5rem 0}.tools-callout{padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-block:2rem}.tools-callout h2{font-size:1.7rem}@media(max-width:760px){.tool-layout{grid-template-columns:1fr}.tool-panel{padding:1rem}}@media print{.site-header,.site-footer,.to-top,.tool-actions,.skip-link{display:none!important}body{color:#000!important;background:#fff!important}body::before{display:none}.tool-panel{break-inside:avoid;border-color:#777}.tool-check{color:#000}.page-hero{padding:0}a{color:#000!important}}
