.masker-stage{min-height:100vh;min-height:100dvh;display:flex;align-items:flex-start;background:var(--canvas);color:var(--ink)}.masker-stage [hidden]{display:none!important}.masker-shell{width:min(var(--tool-width),calc(100% - 40px));margin:0 auto;padding:clamp(62px,9vh,96px) 0 56px}.masker-shell h1{margin:0 0 38px;font-size:clamp(34px,6vw,52px);line-height:1;letter-spacing:-.06em;font-weight:600}.masker-drop-cue{width:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:28px;border:1px dashed var(--border-strong);border-radius:var(--radius-md);background:transparent;color:var(--text);cursor:pointer}.masker-drop-cue:hover{background:var(--surface-subtle);border-color:var(--muted)}.masker-drop-cue svg,.masker-drop-overlay svg{width:30px;height:30px;margin-bottom:8px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.masker-drop-cue strong{color:var(--ink);font-size:16px}.masker-drop-cue span{font-size:13px}.masker-drop-cue small{margin-top:8px;color:var(--muted);font-size:11px}body.masker-preview-mode{overflow:hidden}body.masker-preview-mode>.global-header,body.masker-preview-mode>.global-footer,body.masker-preview-mode .masker-information{display:none}.masker-preview-mode .masker-shell{width:100%;padding:0}.masker-preview-mode .masker-shell>h1{display:none}.masker-workspace{--masker-panel: #202020;--masker-text: #f6f6f4;--masker-muted: #aaa;--masker-border: rgba(255,255,255,.16);position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:100dvh;overflow:hidden;background:#292929;color:var(--masker-text)}.masker-workspace:focus{outline:none}.masker-topbar{position:absolute;z-index:3;top:16px;left:16px;right:16px;display:flex;align-items:center;gap:14px;pointer-events:none}.masker-topbar>*{pointer-events:auto}.masker-workspace button{min-height:38px;border:0;border-radius:var(--radius-sm);padding:8px 12px;font:inherit;font-size:12px;color:inherit;background:transparent;cursor:pointer;white-space:nowrap}.masker-workspace button:hover:not(:disabled){background:#ffffff1a}.masker-workspace button:disabled{opacity:.35;cursor:default}.masker-workspace :focus-visible{outline:2px solid #fff;outline-offset:3px}.masker-workspace .masker-workspace-close{width:42px;height:42px;padding:0;border-radius:50%;background:#181818;font-size:26px}.masker-image-info{min-width:0;padding:8px 12px;border-radius:var(--radius-sm);background:#202020}.masker-image-info span{display:block;max-width:35vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.masker-image-info small{display:block;margin-top:3px;font-size:10px;color:var(--masker-muted)}.masker-zoom{display:flex;align-items:center;margin-left:auto;background:var(--masker-panel);border-radius:var(--radius-sm)}.masker-zoom output{min-width:48px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}.masker-editor{position:relative;min-width:0;min-height:0;overflow:hidden;touch-action:none;outline-offset:-3px!important}.masker-canvas{position:absolute;left:50%;top:50%;display:block;max-width:none;max-height:none;transform-origin:center;touch-action:none;user-select:none;-webkit-user-select:none;background:#fff;cursor:none}.masker-editor.is-panning,.masker-editor.is-panning .masker-canvas{cursor:grab}.masker-editor.is-dragging,.masker-editor.is-dragging .masker-canvas{cursor:grabbing}.masker-cursor{position:absolute;z-index:2;transform:translate(-50%,-50%);border:1px solid white;outline:1px solid #111;border-radius:50%;pointer-events:none;background:#a0a0a02e}.masker-cursor[data-effect=solid]{background:#000c}.masker-cursor[data-effect=blur]{backdrop-filter:blur(3px)}.masker-cursor[data-effect=pixelate]{background:repeating-conic-gradient(#8888 0% 25%,#ddd8 0% 50%) 50% / 8px 8px}.masker-cursor[data-tool=rect]{border-radius:0;background:transparent}.masker-cursor span{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);padding:4px 7px;border-radius:4px;background:#181818;color:#fff;white-space:nowrap;font-size:10px}.masker-bottom{position:relative;z-index:3;padding:0 20px max(16px,env(safe-area-inset-bottom));background:#292929}.masker-navigation-help{margin:12px 0 14px;text-align:center;color:#fff;font-size:13px;line-height:1.5}.masker-toolbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px;width:fit-content;max-width:100%;margin:0 auto;padding:10px 14px;border:1px solid var(--masker-border);border-radius:var(--radius-md);background:var(--masker-panel)}.masker-control-group,.masker-size-control,.masker-history{display:flex;align-items:center;gap:8px}.masker-control-label{font-size:11px;color:var(--masker-muted);white-space:nowrap}.masker-segmented{display:flex;gap:2px}.masker-workspace .masker-segmented button.is-active{background:#f6f6f4;color:#171717}.masker-size-control input{width:90px;accent-color:#ddd}.masker-size-control output{min-width:22px;font-size:11px;font-variant-numeric:tabular-nums}.masker-size-control.is-disabled{opacity:.4}.masker-history{border-left:1px solid var(--masker-border);padding-left:10px;gap:2px}.masker-actions{display:flex;justify-content:space-between;gap:12px;margin-top:14px}.masker-workspace .masker-secondary-button{color:var(--masker-muted);border:1px solid var(--masker-border)}.masker-primary-button,.masker-secondary-button{min-height:38px;padding:0 15px;border-radius:7px;font:inherit;font-size:12px;cursor:pointer}.masker-primary-button{border:0;background:var(--ink);color:#fff}.masker-primary-button:disabled{opacity:.35;cursor:default}.masker-secondary-button{border:1px solid var(--border-strong);background:var(--surface);color:var(--text)}.masker-workspace .masker-primary-button{background:#f6f6f4;color:#171717;font-weight:600}.masker-workspace .masker-primary-button:hover{background:#fff}.masker-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:110;width:max-content;max-width:calc(100% - 32px);padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);box-shadow:var(--shadow-floating);font-size:13px;line-height:1.5}.masker-toast:empty{display:none}.masker-drop-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;visibility:hidden;opacity:0;background:#fafafae6;backdrop-filter:blur(4px);pointer-events:none;transition:opacity .12s ease,visibility .12s ease}.masker-drop-overlay.is-active{visibility:visible;opacity:1}.masker-drop-overlay>div{display:grid;justify-items:center;gap:8px;color:var(--ink)}.masker-drop-overlay strong{font-size:18px}.masker-drop-overlay svg{width:36px;height:36px;color:var(--muted)}.masker-download-dialog{width:min(540px,calc(100% - 24px));max-width:none;padding:0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-floating)}.masker-download-dialog::backdrop{background:#00000038}.masker-download-panel{padding:22px}.masker-dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.masker-dialog-heading h2{margin:0;font-size:20px;line-height:26px;letter-spacing:-.025em}.masker-dialog-heading p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:18px}.masker-dialog-close{width:32px;height:32px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:22px;line-height:1}.masker-dialog-close:hover{color:var(--ink)}.masker-download-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.masker-download-option{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border:1px solid var(--border-strong);border-radius:var(--radius-md);cursor:pointer}.masker-download-option:hover{background:var(--surface-subtle)}.masker-download-option.is-selected{border-color:var(--ink);background:var(--surface-subtle)}.masker-download-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}.masker-download-option strong{display:block;font-size:13px;font-weight:600}.masker-download-option small{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:16px}.masker-download-meta{margin-top:auto;color:var(--text);font-size:12px;line-height:1.6;overflow-wrap:anywhere}.masker-download-savings{color:var(--success)}.masker-download-note:empty{display:none}.masker-download-note{min-height:18px;margin:12px 0 0;color:var(--muted);font-size:11px;line-height:18px}.masker-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}@media(max-width:640px){.masker-shell{width:calc(100% - 24px);padding-top:42px}.masker-shell h1{margin-bottom:28px;font-size:36px}.masker-drop-cue{min-height:190px;padding:20px 14px}.masker-topbar{top:10px;left:10px;right:10px;gap:8px}.masker-image-info{max-width:25vw;padding:6px}.masker-image-info small{display:none}.masker-image-info span{max-width:100%}.masker-zoom button{padding:6px 8px}.masker-zoom output{min-width:40px}.masker-bottom{padding:0 10px max(10px,env(safe-area-inset-bottom))}.masker-toolbar{gap:6px 10px;padding:8px;width:100%}.masker-control-group{flex-wrap:wrap;justify-content:space-between;width:100%}.masker-control-group .masker-segmented{flex:1;justify-content:flex-end}.masker-workspace button{min-height:40px}.masker-history{padding-left:0;border-left:0;gap:0}.masker-history button{padding:6px;font-size:11px}.masker-size-control{gap:5px;margin-right:auto}.masker-size-control input{width:65px}.masker-navigation-help{font-size:12px;margin:10px 0 8px}.masker-actions{flex-wrap:wrap;margin-top:8px}.masker-download-panel{padding:18px}.masker-download-options{gap:8px}.masker-download-option{padding:10px}}@media(max-height:500px)and (orientation:landscape){.masker-navigation-help,.masker-control-label{display:none}.masker-toolbar{gap:4px;padding:4px}.masker-bottom{padding-bottom:6px}.masker-actions{margin-top:4px}}@media(prefers-reduced-motion:reduce){.masker-drop-overlay{transition:none}}
