:root,:root .tools-surface{--ui-label-size:.6875rem;--ui-label-weight:700;--ui-label-tracking:.08em;--ui-label-color:var(--muted);--ui-text-size:.875rem;--ui-text-weight:600;--ui-input-size:.875rem;--ui-value-size:.8125rem;--ui-value-weight:700;--ui-value-color:var(--green);--ui-stat-size:1.125rem;--ui-stat-weight:700;--ui-help-size:.75rem;--ui-help-line:1.5;--ui-help-color:var(--muted);--ui-hint-size:.75rem;--ui-switch-size:.75rem;--ui-switch-tracking:.07em;--ui-control-height:44px;--ui-radius:10px;--ui-radius-inner:8px;--ui-surface:var(--surface);--ui-track:var(--control-surface);--ui-border:#c3ccd9;--ui-field-border:#8794a6;--ui-hover-border:var(--green);--ui-selected-ink:var(--green);--ui-selected-bg:color-mix(in srgb, var(--green) 8%, var(--surface));--ui-selected-border:var(--green);--ui-ring:0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);--ui-raise:0 0 0 1px color-mix(in srgb, var(--forest) 8%, transparent), 0 1px 3px color-mix(in srgb, var(--forest) 14%, transparent);--ui-speed:.16s;--ui-card-border:1px dashed var(--green);--ui-card-radius:16px;--ui-card-head-bg:var(--control-surface);--ui-card-head-pad:14px 20px;--ui-card-head-height:72px;--ui-card-head-button:40px;--ui-hero-gap:20px;--ui-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23525f73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}:root:root .tools-surface .tools-primary>main>.container{padding-top:var(--ui-hero-gap)}:root:root .tools-surface .tools-primary>main>.container:has(+.tool-about-wrap){margin-bottom:0;padding-bottom:0}:root:root .tools-surface .tools-primary>main>.container :is(.image-workspace,.gif-page,.editor-shell){margin-top:0}:root:root .tools-surface :is(.editor-shell,.image-workspace.has-image,.gif-editor,.audio-page>.studio-grid){border:var(--ui-card-border);border-radius:var(--ui-card-radius);overflow:clip}:root:root .tools-surface .audio-page>.studio-grid{background:var(--surface)}:root:root .tools-surface .tool-about{border:var(--ui-card-border);border-radius:var(--ui-card-radius)}:root:root .tools-surface :is(.studio-grid>.source-file,.image-file-bar,.gif-editor-heading,.editor-shell>.editor-file-header){min-height:var(--ui-card-head-height);padding:var(--ui-card-head-pad);border:0;border-bottom:1px solid var(--line);background:var(--ui-card-head-bg);border-radius:0;flex-wrap:nowrap;align-items:center;gap:12px;margin:0;display:flex}:root:root .tools-surface :is(.studio-grid>.source-file>svg,.editor-shell>.editor-file-header>svg,.gif-editor-heading>svg,.image-file-icon){box-sizing:content-box;border:1px solid var(--frame-border);border-radius:var(--ui-radius);background:var(--surface);width:18px;height:18px;color:var(--green);flex-shrink:0;padding:10px}:root:root .tools-surface .image-file-icon>svg{width:18px;height:18px}:root:root .tools-surface :is(.studio-grid>.source-file>span,.editor-shell>.editor-file-header>div,.gif-editor-title,.image-file-details){flex:1 1 0;min-width:0}:root:root .tools-surface :is(.studio-grid>.source-file strong,.editor-file-header strong,.gif-editor-title h2,.image-file-details strong){color:var(--ink);letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.875rem;font-weight:700;line-height:18px;display:block;overflow:hidden}:root:root .tools-surface :is(.studio-grid>.source-file small,.editor-file-header small,.gif-editor-title small,.image-file-details div>span){color:var(--muted);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:.75rem;line-height:16px;display:block;overflow:hidden}:root:root .tools-surface :is(.source-file,.image-file-bar,.gif-editor-heading,.editor-file-header) .media-source-actions{background:0 0;border:0;flex-wrap:nowrap;flex:none;gap:8px;width:auto;margin-left:auto;padding:0}:root:root .tools-surface :is(.source-file .media-source-actions>button,.image-file-bar .media-source-actions>button,.gif-editor-heading .media-source-actions>button,.editor-shell>.editor-file-header>button){min-height:var(--ui-card-head-button);border-radius:var(--ui-radius);white-space:nowrap;flex:none;padding:0 12px;font-size:.875rem;font-weight:600}:root:root .tools-surface .gif-editor{padding:0}:root:root .tools-surface .gif-editor>.gif-workspace{padding:20px}@media (max-width:650px){:root:root .tools-surface{--ui-card-head-pad:10px 12px;--ui-card-head-height:64px}:root:root .tools-surface :is(.source-file,.image-file-bar,.gif-editor-heading,.editor-file-header){gap:10px}:root:root .tools-surface :is(.source-file,.image-file-bar,.gif-editor-heading,.editor-file-header) .media-source-actions{gap:6px}:root:root .tools-surface :is(.source-file .media-source-actions>button,.image-file-bar .media-source-actions>button,.gif-editor-heading .media-source-actions>button,.editor-shell>.editor-file-header>button){width:var(--ui-card-head-button);flex:none;justify-content:center;min-width:0;padding:0;position:relative}:root:root .tools-surface :is(.source-file .media-source-actions>button,.image-file-bar .media-source-actions>button,.gif-editor-heading .media-source-actions>button,.editor-shell>.editor-file-header>button)>span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:root:root .tools-surface .gif-editor>.gif-workspace{padding:14px}}:root:root .tools-surface .qr-editor>.qr-file-header>div{flex:0 360px}@media (max-width:650px){:root:root .tools-surface .qr-editor>.qr-file-header>div{flex:1 1 0}}:root:root .tools-surface .editor-shell>.editor-file-header>div+button{margin-left:auto}:root:root .tools-surface :is(.convert-label,.field-title,.simple-compression-heading>label,.video-simple-slider>label,.video-simple-fps>span,.platform-custom>span:first-child,.music-level>span,.time-field>span,.image-quality>span:first-child,.image-dimensions label>span:first-child,.bg-choice legend,.qr-fields label:not(.qr-text-field,.qr-check)>span,.qr-colors label>span,.qr-option-row label>span,.gif-selects label>span,.gif-options>legend:not(.sr-only),.video-cut-heading>strong,.simple-size-comparison>div>span,.image-size-summary>div>span,.compact-result-stats>span,.convert-details dt){color:var(--ui-label-color);font-size:var(--ui-label-size);font-weight:var(--ui-label-weight);letter-spacing:var(--ui-label-tracking);text-transform:uppercase;line-height:1.4}:root:root .tools-surface :is(.simple-compression-heading>span,.video-simple-slider>label>span,.image-quality>span:first-child :is(span,strong),.music-level-value,.video-cut-count){color:var(--ui-value-color);font-size:var(--ui-value-size);font-weight:var(--ui-value-weight);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;margin-left:6px}:root:root .tools-surface :is(.simple-compression-heading>span,.video-cut-count){margin-left:0}:root:root .tools-surface :is(.simple-size-comparison strong,.image-size-summary>div>strong,.compact-result-stats strong){color:var(--ink);font-family:var(--body);font-size:var(--ui-stat-size);font-weight:var(--ui-stat-weight);letter-spacing:-.01em;text-transform:none;font-variant-numeric:tabular-nums;margin-top:3px;line-height:1.25}:root:root .tools-surface .compact-result-stats strong{color:var(--green)}:root:root .tools-surface .convert-details dd{color:var(--ink);font-size:var(--ui-text-size);font-weight:var(--ui-text-weight)}:root:root .tools-surface :is(.simple-compression>p,.video-edit-note,.image-control-section>p,.convert-notes li,.convert-format-detail,.qr-download-status,.bg-note,.gif-output-summary,.simple-optimal>span,.video-output-summary){font-size:var(--ui-help-size);line-height:var(--ui-help-line);letter-spacing:0;text-transform:none}:root:root .tools-surface :is(.simple-compression>p,.video-edit-note,.image-control-section>p,.convert-notes li,.qr-download-status,.bg-note,.gif-output-summary,.simple-optimal>span){color:var(--ui-help-color)}:root:root .tools-surface :is(.video-simple-scale,.image-range-labels){color:var(--ui-help-color);font-size:var(--ui-hint-size);font-weight:500}:root:root .tools-surface :is(.compression-levels button,.platform-target-grid button,.target-shortcuts button,.image-ratios button,.image-scale-presets button,.gif-presets button,.qr-presets button,.audio-format-grid button,.audio-segmented button,.bg-formats button,.convert-format){min-height:var(--ui-control-height);border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);color:var(--ink);font-size:var(--ui-text-size);font-weight:var(--ui-text-weight);letter-spacing:0;text-transform:none;box-shadow:none;transition:border-color var(--ui-speed) ease, background-color var(--ui-speed) ease, color var(--ui-speed) ease, box-shadow var(--ui-speed) ease;outline:0}:root:root .tools-surface :is(.compression-levels button,.platform-target-grid button,.target-shortcuts button,.image-ratios button,.image-scale-presets button,.gif-presets button,.audio-format-grid button,.audio-segmented button,.bg-formats button,.convert-format) strong{color:inherit;font-size:var(--ui-text-size);font-weight:700}:root:root .tools-surface :is(.compression-levels button,.platform-target-grid button,.gif-presets button,.audio-segmented button,.bg-formats button,.convert-format) small,:root:root .tools-surface :is(.bg-formats button,.convert-format) span{color:var(--ui-help-color);font-size:var(--ui-hint-size);font-weight:500}:root:root .tools-surface :is(.platform-target-grid button strong,.gif-presets button){font-size:var(--ui-switch-size);letter-spacing:.06em;text-transform:uppercase}:root:root .tools-surface .gif-presets button small{letter-spacing:0;text-transform:none}:root:root .tools-surface :is(.compression-levels button,.platform-target-grid button,.target-shortcuts button,.image-ratios button,.image-scale-presets button,.gif-presets button,.qr-presets button,.audio-format-grid button,.audio-segmented button,.bg-formats button,.convert-format):hover:not(:disabled,.active,[aria-pressed=true],[aria-checked=true]){border-color:var(--ui-hover-border);color:var(--ink)}:root:root .tools-surface :is(.compression-levels button,.platform-target-grid button,.target-shortcuts button,.image-ratios button,.image-scale-presets button,.gif-presets button,.qr-presets button,.audio-format-grid button,.audio-segmented button,.bg-formats button,.convert-format):is(.active,[aria-pressed=true],[aria-checked=true]){border-color:var(--ui-selected-border);background:var(--ui-selected-bg);color:var(--ui-selected-ink);box-shadow:inset 0 0 0 1px var(--ui-selected-border)}:root:root .tools-surface :is(.compression-levels button,.platform-target-grid button,.target-shortcuts button,.image-ratios button,.image-scale-presets button,.gif-presets button,.qr-presets button,.audio-format-grid button,.audio-segmented button,.bg-formats button,.convert-format):focus-visible{outline:2px solid var(--green);outline-offset:2px}:root:root .tools-surface :is(.compression-levels button,.platform-target-grid button,.target-shortcuts button,.image-ratios button,.image-scale-presets button,.gif-presets button,.qr-presets button,.audio-format-grid button,.audio-segmented button,.bg-formats button,.convert-format):disabled:not(.active,[aria-pressed=true],[aria-checked=true]){opacity:.5}:root:root .tools-surface .qr-presets button{min-height:60px;font-size:var(--ui-hint-size);white-space:nowrap;flex-direction:column;gap:5px;padding:9px 4px 8px;line-height:1.1}:root:root .tools-surface :is(.size-mode,.gif-mode-switch,.image-view-switch,.audio-simple-format){border-radius:var(--ui-radius);background:var(--ui-track);border:0;gap:2px;padding:3px;display:flex}:root:root .tools-surface :is(.size-mode,.gif-mode-switch,.image-view-switch,.audio-simple-format)>button{border-radius:var(--ui-radius-inner);min-width:0;color:var(--muted);font-size:var(--ui-switch-size);letter-spacing:var(--ui-switch-tracking);text-transform:uppercase;white-space:nowrap;box-shadow:none;transition:background-color var(--ui-speed) ease, color var(--ui-speed) ease, box-shadow var(--ui-speed) ease;background:0 0;border:0;flex:auto;justify-content:center;font-weight:700}:root:root .tools-surface :is(.size-mode,.gif-mode-switch,.image-view-switch,.audio-simple-format)>button:hover:not(:disabled){color:var(--ink)}:root:root .tools-surface :is(.size-mode,.gif-mode-switch,.image-view-switch,.audio-simple-format)>button:is(.active,[aria-selected=true],[aria-pressed=true],[aria-checked=true]){background:var(--ui-surface);color:var(--ui-selected-ink);box-shadow:var(--ui-raise)}:root:root .tools-surface :is(.size-mode,.gif-mode-switch,.image-view-switch,.audio-simple-format)>button:focus-visible{outline:2px solid var(--green);outline-offset:1px}:root:root .tools-surface .size-mode>button{min-height:38px}:root:root .tools-surface .image-view-switch>button{min-height:38px;padding-inline:14px}:root:root .tools-surface .simple-optimal>button{height:26px;font-size:var(--ui-hint-size);font-weight:var(--ui-value-weight);padding:0 10px}:root:root .tools-surface .qr-export-meta button{border-radius:var(--ui-radius);font-size:var(--ui-text-size);font-weight:var(--ui-text-weight)}:root:root .tools-surface .control-tab-list>button{font-size:var(--ui-switch-size);letter-spacing:var(--ui-switch-tracking);text-transform:uppercase}:root:root .tools-surface :is(.gif-text-field,.qr-text-field,.image-number,.target-input,.time-field input,.qr-fields textarea,.qr-colors label>div){min-height:var(--ui-control-height);border:1px solid var(--ui-field-border);border-radius:var(--ui-radius);background-color:var(--ui-surface);box-shadow:none;transition:border-color var(--ui-speed) ease, box-shadow var(--ui-speed) ease}:root:root .tools-surface :is(.target-input input,.image-number input,.qr-filename-input input,.qr-text-field input,.qr-fields textarea,.gif-text-field input,.time-field input){font-size:var(--ui-input-size)}:root:root .tools-surface .target-input input{color:var(--ink);font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600}:root:root .tools-surface :is(.image-number,.target-input)>span{color:var(--ui-help-color);font-size:var(--ui-hint-size);font-weight:600}:root:root .tools-surface .qr-colors label>div{height:var(--ui-control-height);gap:10px;padding:0 12px 0 5px}:root:root .tools-surface .qr-colors input{border-radius:6px;width:32px;height:32px}:root:root .tools-surface .qr-colors code{color:var(--ink);font-size:var(--ui-text-size)}:root:root .tools-surface :is(.gif-selects select,.gif-font-trigger,.gif-destination select,.video-simple-fps select,.qr-fields label:not(.qr-text-field)>select,.qr-option-row label>select){width:100%;min-height:var(--ui-control-height);border:1px solid var(--ui-field-border);border-radius:var(--ui-radius);appearance:none;background:var(--ui-surface) var(--ui-chevron) no-repeat right 13px center;height:auto;color:var(--ink);font:inherit;font-size:var(--ui-text-size);letter-spacing:0;text-transform:none;cursor:pointer;transition:border-color var(--ui-speed) ease, box-shadow var(--ui-speed) ease;padding:0 36px 0 12px;font-weight:550}:root:root .tools-surface :is(.gif-text-field,.qr-text-field,.image-number,.target-input,.time-field input,.qr-fields textarea,.qr-colors label>div,.gif-selects select,.gif-font-trigger,.gif-destination select,.video-simple-fps select,.qr-fields label:not(.qr-text-field)>select,.qr-option-row label>select):hover:not(:disabled,:focus-within){border-color:var(--ui-hover-border)}:root:root .tools-surface :is(.gif-text-field,.qr-text-field,.image-number,.target-input,.time-field input,.qr-fields textarea,.qr-colors label>div,.gif-selects select,.gif-font-trigger,.gif-destination select,.video-simple-fps select,.qr-fields label:not(.qr-text-field)>select,.qr-option-row label>select):is(:focus-visible,:focus-within){border-color:var(--green);box-shadow:var(--ui-ring);outline:0}:root:root .tools-surface :is(.image-number,.target-input) input:focus-visible{outline:0}@supports (appearance:base-select){:root:root .tools-surface select{appearance:base-select!important}:root:root .tools-surface select::picker(select){appearance:base-select!important}:root:root .tools-surface :is(.gif-selects select,.gif-destination select,.video-simple-fps select,.qr-fields label:not(.qr-text-field)>select,.qr-option-row label>select)::picker-icon{display:none}:root:root .tools-surface select::picker-icon{content:"";block-size:12px;inline-size:12px;-webkit-mask:var(--ui-chevron) center / contain no-repeat;mask:var(--ui-chevron) center / contain no-repeat;opacity:.75;transition:rotate var(--ui-speed) ease;background-color:currentColor;margin-inline-start:6px}:root:root .tools-surface select:open::picker-icon{rotate:180deg}:root:root .tools-surface select{white-space:nowrap;text-overflow:ellipsis;align-items:center;overflow:hidden}:root:root .tools-surface select::picker(select){box-sizing:border-box;min-inline-size:anchor-size(self-inline);max-inline-size:calc(100vw - 2 * var(--phone-gutter,16px));border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);max-block-size:min(320px,60vh);color:var(--ink);box-shadow:0 12px 32px color-mix(in srgb, var(--forest) 18%, transparent), 0 2px 6px color-mix(in srgb, var(--forest) 10%, transparent);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;margin-block:6px;padding:5px}:root:root .tools-surface select option{border-radius:var(--ui-radius-inner);min-block-size:38px;font-size:var(--ui-text-size);white-space:normal;cursor:pointer;padding:8px 10px;font-weight:550}:root:root .tools-surface select option::checkmark{color:var(--green)}:root:root .tools-surface select option:is(:hover,:focus-visible){background:var(--ui-track);outline:0}:root:root .tools-surface select option:checked{background:var(--ui-selected-bg);color:var(--ui-selected-ink);font-weight:700}:root:root .tools-surface select optgroup{color:var(--ui-label-color);font-size:var(--ui-label-size);font-weight:var(--ui-label-weight);letter-spacing:var(--ui-label-tracking);text-transform:uppercase;padding-block-start:4px}:root:root .tools-surface select optgroup option{color:var(--ink);letter-spacing:0;text-transform:none}}:root:root .tools-surface :is(.image-check,.audio-checkbox,.qr-check){color:var(--ink);font-size:var(--ui-text-size);letter-spacing:0;text-transform:none;font-weight:550}:root:root .tools-surface input[type=checkbox]{width:18px;height:18px;accent-color:var(--green)}@media (max-width:900px){:root:root .tools-surface{--ui-input-size:16px}:root:root .tools-surface :is(.gif-selects select,.gif-font-trigger,.gif-destination select,.video-simple-fps select,.qr-fields label:not(.qr-text-field)>select,.qr-option-row label>select,.time-field input,.target-input input){font-size:16px}}@media (prefers-reduced-motion:reduce){:root:root .tools-surface :is(button,select,input){transition:none}}@media (forced-colors:active){:root:root .tools-surface :is(.compression-levels button,.platform-target-grid button,.target-shortcuts button,.image-ratios button,.image-scale-presets button,.gif-presets button,.qr-presets button,.audio-format-grid button,.audio-segmented button,.bg-formats button,.convert-format):is(.active,[aria-pressed=true],[aria-checked=true]){border:2px solid highlight}}
