.screenshot-workspace{padding:clamp(20px,3vw,34px)}.screenshot-workspace [hidden]{display:none!important}.screenshot-heading{justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px;display:flex}.screenshot-heading h2{margin-bottom:8px}.screenshot-heading .eyebrow{margin-bottom:8px;font-size:9px}.screenshot-heading .tool-hint{margin:0}.screenshot-heading>.button{white-space:nowrap;flex-shrink:0;padding:12px 17px;font-size:12px}.screenshot-drop{cursor:pointer;background:#faf7ff;border:1px dashed #cfc4e6;border-radius:12px;justify-content:center;align-items:center;gap:15px;min-height:102px;padding:20px;transition:background .15s,border-color .15s;display:flex;position:relative}.screenshot-drop.dragging{background:#eee5ff;border-color:#7558ce}.screenshot-drop:focus-within{outline:3px solid var(--accent);outline-offset:3px}.screenshot-drop-icon{color:#7558ce;font-size:32px}.screenshot-drop strong{font-size:13px;display:block}.screenshot-drop small{color:var(--muted);margin-top:5px;font-size:11px;display:block}.screenshot-drop input{opacity:0;width:1px;height:1px;position:absolute}.screenshot-workspace .selection-bar{overflow-wrap:anywhere;gap:12px;margin:12px 0 22px;font-size:11px}.screenshot-editor{grid-template-columns:minmax(0,1fr) 254px;align-items:start;gap:25px;display:grid}.screenshot-preview-panel{min-width:0;position:sticky;top:20px}.screenshot-preview-toolbar{color:#81758f;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-size:11px;display:flex}.screenshot-preview-toolbar>span{color:#675575;font-weight:600}.screenshot-preview-toolbar label{white-space:nowrap;align-items:center;gap:8px;font-size:10px;display:flex}.screenshot-preview-toolbar input{accent-color:#7455ce;width:70px;min-width:0}.screenshot-preview-toolbar output{font-variant-numeric:tabular-nums;min-width:30px}.screenshot-stage{overscroll-behavior:contain;background:repeating-conic-gradient(#efedf3 0% 25%,#f9f7fc 0% 50%) 50%/18px 18px;border:1px solid #e8e2ef;border-radius:12px;justify-content:flex-start;align-items:flex-start;min-height:320px;max-height:660px;padding:18px;display:flex;overflow:auto}.screenshot-stage canvas{border-radius:3px;flex-shrink:0;width:100%;max-width:none;margin:auto;display:block;box-shadow:0 6px 26px #38234114}.screenshot-empty{text-align:center;max-width:310px;margin:auto;padding:45px 20px}.screenshot-empty>span{color:#b9a3e5;margin-bottom:22px;font-size:57px;line-height:1;display:block}.screenshot-empty strong{color:#57446b;font-size:16px;display:block}.screenshot-empty p{color:#9989a8;margin-bottom:0;font-size:12px;line-height:1.8}.screenshot-preview-note{color:#95889f;margin:12px 1px;font-size:11px;line-height:1.7}.screenshot-settings{border:0;border-left:1px solid #eee8f5;gap:15px;min-width:0;margin:0;padding:0 0 0 24px;display:grid}.screenshot-settings legend{margin-bottom:16px;padding:0;font-size:12px;font-weight:650}.screenshot-settings>label{color:#6c5e7b;flex-wrap:wrap;justify-content:space-between;gap:7px;min-width:0;font-size:11px;font-weight:600;display:flex}.screenshot-settings input:not([type=range]),.screenshot-settings select{box-sizing:border-box;color:#41354f;background:#fff;border:1px solid #ded3e9;border-radius:7px;width:100%;min-width:0;min-height:39px;padding:10px;font:12px Segoe UI,sans-serif}.screenshot-settings input[type=range]{accent-color:#7858cb;width:100%;margin:3px 0 0}.screenshot-settings input[type=color]{cursor:pointer;height:39px;padding:4px}.screenshot-settings output{color:#9c8bab;font-variant-numeric:tabular-nums;font-weight:400}.screenshot-optional{color:#ae9dbb;font-weight:400}.screenshot-settings:disabled{opacity:.6}.screenshot-settings .text-button{text-align:left;justify-self:start;margin:3px 0 0;font-size:11px}.screenshot-workspace .conversion-actions{border-top:1px solid #eee8f5;margin-top:26px;padding-top:23px}.screenshot-workspace button:disabled{cursor:not-allowed}.screenshot-workspace .button:disabled{opacity:.5}.screenshot-status{color:#8b7d97;margin-bottom:0;font-size:12px;line-height:1.7}.screenshot-result{background:#f3f7ec;border:1px solid #d9e3ca;border-radius:11px;margin-top:18px;padding:18px}.screenshot-result .advanced-result-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.screenshot-result strong{font-size:13px}.screenshot-result p{color:#8b7d97;overflow-wrap:anywhere;margin:6px 0 0;font-size:11px}.screenshot-result .button{padding:11px 16px;font-size:12px}.screenshot-workspace :focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media (width<=900px){.screenshot-editor{grid-template-columns:minmax(0,1fr) 225px;gap:18px}.screenshot-settings{padding-left:18px}.screenshot-stage{min-height:250px;padding:12px}.screenshot-preview-toolbar{flex-wrap:wrap}}@media (width<=650px){.screenshot-heading{flex-direction:column;align-items:flex-start;gap:15px}.screenshot-editor{grid-template-columns:minmax(0,1fr)}.screenshot-preview-panel{position:static}.screenshot-stage{min-height:220px;padding:10px}.screenshot-settings{border-top:1px solid #eee8f5;border-left:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;padding:20px 0 0}.screenshot-settings legend{margin-bottom:0;padding-top:10px}.screenshot-settings>label:has(#screenshot-caption){grid-column:1/-1}.screenshot-settings .text-button{align-self:end;min-height:39px}.screenshot-heading h2{font-size:27px}.screenshot-drop{gap:10px;padding:18px 12px}.screenshot-drop strong{font-size:12px}.screenshot-drop-icon{font-size:25px}.screenshot-workspace .selection-bar{align-items:flex-start}.screenshot-empty{padding:25px 8px}.screenshot-empty strong{font-size:14px}.screenshot-empty p{font-size:11px}.screenshot-result .advanced-result-heading>.button{justify-content:center;width:100%}}@media (prefers-reduced-motion:reduce){.screenshot-drop{transition:none}}.screenshot-layout{grid-template-columns:minmax(0,1fr)}.screenshot-layout>.advanced-sidebar .tool-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.screenshot-layout>.advanced-sidebar .tool-nav a{font-size:12px}.screenshot-layout>.advanced-sidebar .tool-nav small{font-size:10px}@media (width<=900px){.screenshot-layout>.advanced-sidebar .tool-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=650px){.screenshot-layout>.advanced-sidebar .tool-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=380px){.screenshot-layout>.advanced-sidebar .tool-nav{grid-template-columns:minmax(0,1fr)}}