.grayscale-image-tool [hidden]{display:none!important}
.grayscale-image-privacy{margin:10px 0 0;color:#526175;font-size:.78rem;line-height:1.6}
.grayscale-image-privacy:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#0f766e;vertical-align:1px}
.grayscale-image-file-intro{margin:16px 0 0;padding:12px 14px;border-left:3px solid #94a3b8;background:#f8fafc;color:#5f6d80;font-size:.8rem;line-height:1.6}
.grayscale-image-meta{grid-template-columns:minmax(0,2fr) repeat(2,minmax(110px,1fr))}
.grayscale-image-settings,.grayscale-image-preview,.grayscale-image-output{margin-top:24px;padding-top:22px;border-top:1px solid #e0e7ef}
.grayscale-image-section-heading{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.grayscale-image-section-heading h3{margin:0 0 4px;color:#1f2c40;font-size:1rem}
.grayscale-image-section-heading p{margin:0;color:#6a7789;font-size:.78rem;line-height:1.55}
.grayscale-image-secondary{min-height:38px;margin:0;padding:0 13px;border:0;border-radius:6px;background:#e8edf4!important;color:#314158!important;box-shadow:none;font-size:.75rem;font-weight:800;white-space:nowrap}
.grayscale-image-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grayscale-image-style{display:flex;min-width:0;flex-direction:column}
.grayscale-image-style>span,.grayscale-image-output-settings label>span,.grayscale-image-range-field label{color:#405167;font-size:.76rem;font-weight:800}
.grayscale-image-style select,.grayscale-image-output-settings select{width:100%;height:44px;margin:7px 0 0;padding:0 11px;border:1px solid #cfd9e4;border-radius:6px;background:#fff;color:#172033;font-size:.82rem}
.grayscale-image-style small,.grayscale-image-range-field small{display:block;margin-top:7px;color:#778497;font-size:.7rem;line-height:1.5}
.grayscale-image-range-field{min-width:0;padding:12px 14px;border:1px solid #dce4ec;border-radius:7px;background:#f8fafc}
.grayscale-image-range-field>div{display:flex;align-items:center;justify-content:space-between}
.grayscale-image-range-field output{color:#0f766e;font-size:.78rem;font-weight:900}
.grayscale-image-range-field input[type="range"]{width:100%;height:28px;margin:5px 0 0;padding:0;accent-color:#0f766e}
.grayscale-image-stage{display:block;min-height:280px;padding:16px;overflow:hidden}
.grayscale-image-placeholder{display:grid;min-height:246px;padding:24px;place-content:center}
.grayscale-image-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
.grayscale-image-comparison figure{min-width:0;margin:0}
.grayscale-image-comparison figcaption{margin-bottom:7px;color:#334155;font-size:.78rem;font-weight:900}
.grayscale-image-comparison canvas{display:block;width:100%;max-width:100%;height:auto;border:1px solid #d6dde7;border-radius:6px;background:#fff;box-shadow:0 8px 20px rgba(31,44,64,.1)}
.grayscale-image-output-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grayscale-image-output-settings>label{display:flex;min-width:0;flex-direction:column}
.grayscale-image-format-note{margin:10px 0 0;color:#657489;font-size:.72rem;line-height:1.55}
.grayscale-image-download-info{display:flex;gap:8px 16px;margin-top:14px;padding:13px 14px;align-items:center;flex-wrap:wrap;border-left:3px solid #0f766e;background:#edf8f5}
.grayscale-image-download-info strong{color:#123c36;font-size:.82rem}
.grayscale-image-download-info span{color:#526b68;font-size:.75rem}
.grayscale-image-actions button.grayscale-image-download{border:0;background:#0f766e!important;color:#fff!important;box-shadow:none}
.grayscale-image-actions button.grayscale-image-download:disabled{background:#dce3ec!important;color:#8491a3!important}
.grayscale-image-guide-heading p{font-size:.95rem;line-height:1.75}
.grayscale-image-faq{margin-top:28px}
.grayscale-image-faq h2{margin:0 0 10px;color:#172033;font-size:1.2rem}
.grayscale-image-faq details{padding:14px 0;border-top:1px solid #e1e7ee}
.grayscale-image-faq details:last-child{border-bottom:1px solid #e1e7ee}
.grayscale-image-faq summary{color:#2d3c50;font-size:.86rem;font-weight:800;cursor:pointer}
.grayscale-image-faq p{margin:9px 0 0;color:#5f6d80;font-size:.82rem;line-height:1.75}
.grayscale-image-related{margin-top:36px;padding-top:28px;border-top:1px solid #dde4ed}
.grayscale-image-related header h2{margin:0 0 7px;color:#172033;font-size:1.35rem}
.grayscale-image-related header p{margin:0;color:#657489;font-size:.84rem}
.grayscale-image-related>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:17px}
.grayscale-image-related a{display:block;min-width:0;padding:15px;border:1px solid #d9e2eb;border-radius:7px;background:#fff;text-decoration:none}
.grayscale-image-related a:hover{border-color:#91bdb4;background:#f5fbf9}
.grayscale-image-related strong,.grayscale-image-related span{display:block}
.grayscale-image-related strong{color:#243348;font-size:.84rem}
.grayscale-image-related span{margin-top:5px;color:#728095;font-size:.73rem;line-height:1.55}
@media screen and (max-width:620px){
  .grayscale-image-tool{padding:16px}
  .grayscale-image-section-heading{gap:10px}
  .grayscale-image-settings-grid,.grayscale-image-output-settings,.grayscale-image-comparison,.grayscale-image-related>div{grid-template-columns:1fr}
  .grayscale-image-stage{min-height:240px;padding:12px}
  .grayscale-image-placeholder{min-height:216px;padding:18px}
  .grayscale-image-actions{grid-template-columns:1fr}
  .grayscale-image-actions .grayscale-image-secondary{grid-column:auto}
  .grayscale-image-meta{grid-template-columns:1fr}
  .grayscale-image-guide-heading p{font-size:.88rem}
}
@media screen and (max-width:350px){
  .grayscale-image-section-heading{align-items:stretch;flex-direction:column}
  .grayscale-image-section-heading .grayscale-image-secondary{width:100%}
}