.tool-detail-page p{font-size:var(--font-size-9);color:inherit;line-height:var(--line-height-snug);margin-bottom:var(--listing-intro-space)}.tool-workspace{display:flex;align-items:flex-start;gap:var(--tool-workspace-gap);margin-bottom:var(--inner-gap)}.catalog:has(+ .tool-workspace){margin-bottom:0}.catalog + .tool-workspace{margin-top:var(--home-section-gap)}.tool-panel{flex:0 1 22rem;min-width:0;padding-top:var(--space-1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) transparent}.tool-panel,.tool-preview{padding:var(--tool-panel-padding)}.tool-preview{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;height:36rem;background:var(--color-bg-surface)}@media (min-width:48.01rem){.tool-detail-page.landing-intro{padding-left:calc(22rem + var(--tool-workspace-gap))}}.tool-controls{display:flex;flex-direction:column;gap:var(--tool-controls-gap);margin-top:var(--tool-controls-space-top)}.tool-controls[inert]{opacity:0.5}.tool-field[hidden]{display:none}.tool-actions{display:flex;align-items:center;gap:var(--space-6);margin-top:var(--tool-actions-space-top)}.tool-range{appearance:none;-webkit-appearance:none;width:100%;height:0.3rem;border-radius:999px;background:var(--color-border-field);cursor:pointer}.tool-range::-webkit-slider-thumb{-webkit-appearance:none;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--color-text-accent);border:none}.tool-range::-moz-range-track{height:0.3rem;border-radius:999px;background:var(--color-border-field)}.tool-range::-moz-range-thumb{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--color-text-accent);border:none}.tool-field-label-row{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-5);font-weight:700}#tool-canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block}#tool-canvas[hidden]{display:none}.tool-hint{font-size:var(--font-size-4);color:var(--color-text-secondary);line-height:var(--line-height-snug);text-align:center;margin:0}.tool-preview.bg-transparent{background-image:linear-gradient(45deg,var(--color-text-hover) 25%,transparent 25%),linear-gradient(-45deg,var(--color-text-hover) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-text-hover) 75%),linear-gradient(-45deg,transparent 75%,var(--color-text-hover) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0px;background-color:var(--color-bg-field-focus)}.tool-info-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--font-size-6);color:var(--color-text-secondary)}.tool-info-line[hidden]{display:none}.tool-info-field{align-items:center;text-align:center}.tool-info-sep{color:var(--color-text-secondary)}.tool-dimension-row{display:flex;align-items:center;gap:var(--tool-field-gap)}.tool-dimension-row[hidden]{display:none}.tool-dimension-x{color:var(--color-text-secondary);font-size:var(--font-size-5);flex-shrink:0}.tool-color-picker{display:flex;flex-direction:column;gap:var(--tool-field-gap)}.tool-color-sv{position:relative;width:100%;height:8rem;border-radius:var(--radius-md);border:1px solid var(--color-border-box);background-image:linear-gradient(to top,#000000,transparent),linear-gradient(to right,#ffffff,transparent);background-color:#ff0000;cursor:crosshair;touch-action:none}.tool-color-sv-cursor{position:absolute;width:0.9rem;height:0.9rem;border-radius:50%;border:2px solid var(--color-text-footer-primary);box-shadow:0 0 0 1px var(--color-shadow-strong);transform:translate(-50%,-50%);pointer-events:none}.tool-color-hue-row{display:flex;align-items:center;gap:var(--tool-field-gap)}.tool-color-hue{position:relative;flex:1 1 0;min-width:0;height:1rem;border-radius:999px;border:1px solid var(--color-border-box);background-image:linear-gradient(to right,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000);cursor:pointer;touch-action:none}.tool-color-hue-cursor{position:absolute;top:50%;width:1rem;height:1rem;border-radius:50%;border:2px solid var(--color-text-footer-primary);box-shadow:0 0 0 1px var(--color-shadow-strong);transform:translate(-50%,-50%);pointer-events:none}.tool-color-preview{flex-shrink:0;width:2rem;height:2rem;border-radius:var(--radius-md);border:1px solid var(--color-border-box)}.tool-color-field{gap:var(--tool-field-gap)}.tool-color-field[hidden]{display:none}.tool-color-row{display:flex;align-items:center;gap:var(--tool-field-gap)}.tool-color-hex-input{flex:1 1 0;min-width:0;padding:var(--tool-number-input-padding-y) var(--tool-number-input-padding-x);background:var(--color-bg-field);border:0.0625rem solid var(--color-border-field);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-6);text-transform:uppercase}.tool-color-hex-input:focus{border-color:var(--color-text-accent);outline:none}.tool-color-hex-input[hidden]{display:none}.tool-color-rgb-row{display:flex;flex:1 1 0;gap:var(--tool-field-gap)}.tool-color-rgb-row[hidden]{display:none}.tool-number-input,.tool-color-rgb-input{appearance:textfield;color-scheme:light;width:0;flex:1 1 0;min-width:0;padding:var(--tool-number-input-padding-y) var(--tool-number-input-padding-x);background:var(--color-bg-field);border:0.0625rem solid var(--color-border-field);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-6);text-align:center}.tool-number-input::-webkit-inner-spin-button,.tool-number-input::-webkit-outer-spin-button,.tool-color-rgb-input::-webkit-inner-spin-button,.tool-color-rgb-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tool-number-stepper{position:relative;display:flex;flex:1 1 0;min-width:0}.tool-number-stepper>.tool-number-input,.tool-number-stepper>.tool-color-rgb-input{padding-right:calc(var(--tool-number-step-width) + var(--space-1))}.tool-number-steps{position:absolute;top:0.0625rem;bottom:0.0625rem;right:var(--space-1);display:flex;flex-direction:column-reverse}.tool-number-step{display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;width:var(--tool-number-step-width);min-height:0;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-icon-secondary);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.tool-number-step svg{width:0.75rem;height:0.75rem}.tool-number-stepper:focus-within .tool-number-step,.tool-number-step.touch-active{color:var(--color-text-primary)}.tool-number-stepper:has(>input:disabled) .tool-number-step{opacity:0.5;cursor:default;pointer-events:none}.tool-number-input:focus,.tool-color-rgb-input:focus{border-color:var(--color-text-accent);outline:none}@media (hover:hover){.tool-number-step:hover{color:var(--color-text-primary);transition:color var(--duration-3) ease}}.tool-panel::-webkit-scrollbar{width:0.4rem}.tool-panel::-webkit-scrollbar-track{background:transparent}.tool-panel::-webkit-scrollbar-thumb{background-color:var(--color-text-secondary);border-radius:var(--radius-md)}.tool-panel:has(#tool-controls[inert]){scrollbar-color:color-mix(in srgb,var(--color-text-secondary),transparent 50%) transparent}.tool-panel:has(#tool-controls[inert])::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--color-text-secondary),transparent 50%)}.tool-dropzone{display:block;cursor:pointer;text-align:center;padding:var(--space-9) var(--space-6);background:var(--color-bg-field);border:0.125rem dashed color-mix(in srgb,var(--color-text-secondary),transparent 35%);border-radius:var(--radius-md)}body.dark-mode .tool-dropzone:not(:hover):not(.is-dragover){border-color:color-mix(in srgb,var(--color-text-secondary),transparent 35%)}.tool-dropzone:hover{border-color:var(--color-text-accent);transition:border-color var(--duration-3) ease}.tool-dropzone.is-dragover{border-color:var(--color-text-accent);background:var(--color-bg-surface);transition:border-color var(--duration-3) ease,background-color var(--duration-3) ease}html.user-is-tabbing #tool-file-input:focus + .tool-dropzone{border-color:var(--color-text-accent);outline:2px solid color-mix(in srgb,var(--color-text-hover),transparent 20%);border-radius:4px;box-shadow:0 0 10px 2px color-mix(in srgb,var(--color-text-hover),transparent 70%)}.tool-dropzone-compact{padding:var(--space-5) var(--space-4)}.tool-dropzone-prompt{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--color-text-secondary)}.tool-dropzone-text{font-size:var(--font-size-7);color:var(--color-text-primary)}.tool-dropzone-hint{font-size:var(--font-size-3);text-transform:uppercase;letter-spacing:0.05rem}.tool-error{color:var(--color-feedback-error);font-size:var(--font-size-5);margin-top:var(--space-4)}.tool-file-list{display:flex;flex-direction:column;align-self:stretch;text-align:left;list-style:none;max-height:12rem;overflow-y:auto;border:0.0625rem solid var(--color-border-box);border-radius:var(--radius-md)}.tool-file-list[hidden]{display:none}.tool-file-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-bg-field);font-size:var(--font-size-5)}.tool-file-item + .tool-file-item{border-top:0.0625rem solid var(--color-border-box)}.tool-file-item-info{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-width:0;gap:0.15rem;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}.tool-file-item.is-selected{box-shadow:inset 0.1875rem 0 0 var(--color-text-accent)}.tool-file-item.is-selected .tool-file-item-info{cursor:default}.tool-file-item-name,.tool-file-item-meta{max-width:100%}.tool-file-item-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.tool-file-item-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-3);color:var(--color-text-secondary)}.tool-file-item-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:none;background:transparent;color:var(--color-icon-field-clear);cursor:pointer;-webkit-tap-highlight-color:transparent}body.dark-mode .tool-file-item-remove{color:var(--color-icon-secondary)}@media (hover:hover){.tool-file-item-remove:hover{color:var(--color-icon-field-clear-hover);transition:color var(--duration-3) ease}body.dark-mode .tool-file-item-remove:hover{color:var(--color-text-footer-primary)}}body.dark-mode .tool-file-item-remove.touch-active{color:var(--color-text-footer-primary)}.tool-file-item-remove.touch-active{color:var(--color-icon-field-clear-hover)}.tool-field{display:flex;flex-direction:column;gap:var(--tool-field-gap)}.tool-field-label{font-size:var(--font-size-9);font-weight:700;text-transform:uppercase}.tool-bg-field{align-items:center;text-align:center}.tool-toggle-group{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--tool-field-gap)}.tool-icon-btn{width:3.05rem;height:3.05rem;padding:0;border-radius:999px;flex-shrink:0;color:var(--color-icon-secondary)}.tool-actions-split{flex-wrap:wrap}.tool-actions-split .btn{flex:1 1 0;min-width:max-content}.tool-icon-btn svg{width:1.3rem;height:1.3rem}.tool-preview-empty{color:var(--color-text-secondary);font-size:var(--font-size-7)}.tool-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);color:var(--color-text-secondary);font-size:var(--font-size-7)}.tool-loading[hidden]{display:none}.tool-spinner{width:2rem;height:2rem;border:0.2rem solid var(--color-border-box);border-top-color:var(--color-text-accent);border-radius:50%;animation:tool-spin 0.8s linear infinite}.tool-preview.bg-light{background:var(--color-bg-preview-light)}.tool-preview.bg-dark{background:var(--color-bg-preview-dark)}.tool-preview.bg-light .tool-preview-empty,.tool-preview.bg-light .tool-loading,.tool-preview.bg-transparent .tool-preview-empty,.tool-preview.bg-transparent .tool-loading{color:var(--color-text-preview-light)}.tool-preview.bg-dark .tool-preview-empty,.tool-preview.bg-dark .tool-loading{color:var(--color-text-preview-dark)}.tool-preview.bg-light .tool-spinner,.tool-preview.bg-transparent .tool-spinner{border-color:var(--color-border-preview-light);border-top-color:var(--color-text-accent)}.tool-preview.bg-dark .tool-spinner{border-color:var(--color-border-btn);border-top-color:var(--color-text-accent)}@keyframes tool-spin{to{transform:rotate(360deg)}}@media (hover:hover){.tool-actions .btn:hover::before{box-shadow:none}}.tool-actions .btn.touch-active::before{box-shadow:none}.tool-preview-sticky-wrap{display:contents}.tool-panel-toggle,.tool-preview-sentinel{display:none}@media (max-width:48rem){.tool-range{height:var(--header-touch-target);background:transparent}.tool-range::-webkit-slider-runnable-track{height:0.3rem;border-radius:999px;background:var(--color-border-field)}.tool-range::-webkit-slider-thumb{margin-top:calc((0.3rem - 1.1rem) / 2)}.tool-dimension-row{flex-direction:column;align-items:stretch}.tool-workspace{flex-direction:column;align-items:stretch;gap:var(--home-section-gap);margin-bottom:0}.breadcrumbs:has(+ .tool-detail-page.landing-intro + .catalog + .tool-workspace){margin-bottom:0}.tool-detail-page.landing-intro:has(+ .catalog + .tool-workspace){margin-top:var(--home-section-gap);margin-bottom:0}.catalog:has(+ .tool-workspace){margin-bottom:0}.tool-workspace:has(#tool-controls.tool-controls-expanded) .tool-preview-sticky-wrap{display:block;order:-1;position:sticky;top:4rem;z-index:1;background:var(--color-bg-page);box-shadow:0 1rem 1rem -0.375rem color-mix(in srgb,var(--color-bg-page),transparent 5%)}.tool-workspace:has(#tool-controls.tool-controls-expanded) .tool-preview-sticky-wrap.is-stuck{padding-top:var(--home-section-gap)}.tool-panel{flex:0 1 auto;overflow-y:visible;overflow-x:visible}.tool-preview{flex:0 0 auto;height:16rem}.tool-icon-btn{border-radius:var(--radius-md)}#tool-controls{max-height:0;overflow:hidden;transition:max-height var(--duration-3) ease}#tool-controls.tool-controls-expanded{max-height:100rem}.tool-workspace:has(#tool-controls.tool-controls-expanded) .tool-preview{height:12rem}.tool-workspace:has(#tool-controls.tool-controls-expanded) .tool-preview-sticky-wrap.is-stuck .tool-preview{border-bottom-left-radius:0;border-bottom-right-radius:0}.tool-workspace:has(#tool-controls.tool-controls-expanded) .tool-preview-sentinel{display:block;order:-2;height:0}.tool-panel-toggle{display:flex;width:100%;margin-top:var(--tool-actions-space-top)}}@media (max-width:48rem){.tool-detail-page p{font-size:var(--font-size-8)}.tool-actions{gap:var(--space-4)}}.tool-format-field{align-items:center;text-align:center}#tool-resize-label{text-align:center}#tool-resize-label + .tool-toggle-group{align-self:center}.tool-hint[hidden]{display:none}#tool-quality-field.is-disabled{opacity:0.5}.tool-savings-badge{color:var(--color-feedback-success);font-weight:700}.tool-savings-badge[hidden]{display:none}.tool-range:disabled{opacity:0.5;cursor:default}#tool-lock-aspect svg[hidden]{display:none}