:root{--color-page: #f4f7f7;--color-surface: #ffffff;--color-surface-soft: #f8fbfb;--color-primary: #087f8c;--color-primary-hover: #066772;--color-primary-active: #055965;--color-primary-subtle: #e4f4f5;--color-text: #17252b;--color-text-muted: #53666d;--color-border: #cbd8da;--color-border-strong: #91a7ab;--color-focus: #f0a229;--color-success: #176b4b;--color-success-subtle: #e9f6ef;--color-warning: #78520b;--color-warning-subtle: #fff6df;--color-error: #a22d35;--color-error-subtle: #fcebed;--radius-sm: .4rem;--radius-md: .7rem;--radius-lg: 1rem;--shadow-sm: 0 1px 2px rgb(23 37 43 / 6%);--shadow-panel: 0 10px 30px rgb(34 65 73 / 7%);color:var(--color-text);background:var(--color-page);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.6;text-rendering:optimizeLegibility}*{box-sizing:border-box}[hidden]{display:none!important}html{color-scheme:light}body{min-width:20rem;margin:0;background:var(--color-page)}img,canvas{max-width:100%}button,input,select{font:inherit}:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}a{color:var(--color-primary-hover);text-underline-offset:.18em}a:hover{color:var(--color-primary-active)}h1,h2,h3{color:var(--color-text);letter-spacing:-.025em;line-height:1.18}h2{font-size:clamp(1.25rem,2vw,1.5rem)}p,li{text-wrap:pretty}.container{width:min(72rem,calc(100% - 2.5rem));margin-inline:auto}.site-header{position:relative;z-index:10;border-bottom:1px solid var(--color-border);background:#fffffff0;box-shadow:var(--shadow-sm)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.5rem}.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--color-text);font-size:1.2rem;font-weight:800;letter-spacing:-.025em;text-decoration:none;white-space:nowrap}.brand-icon,.footer-icon{flex:0 0 auto;padding:.2rem;border-radius:.45rem;background:#0b3ea9;object-fit:contain}.brand:hover{color:var(--color-primary-hover)}.site-nav ul{display:flex;flex-wrap:wrap;gap:.25rem;margin:0;padding:0;list-style:none}.site-nav a{display:inline-flex;align-items:center;min-height:2.6rem;padding:.45rem .75rem;border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.95rem;font-weight:650;text-decoration:none}.site-nav a:hover{background:var(--color-surface-soft);color:var(--color-text)}.site-nav a[aria-current=page]{background:var(--color-primary-subtle);color:var(--color-primary-hover)}main{min-height:calc(100vh - 11.5rem)}.hero{max-width:54rem;padding-block:clamp(3.25rem,7vw,5.75rem) clamp(2.5rem,5vw,4.25rem);text-align:center}.hero h1,.page-intro h1{margin:0;font-size:clamp(2.25rem,6vw,4rem);letter-spacing:-.045em;line-height:1.05}.hero p{max-width:39rem;margin:1.15rem auto 0;color:var(--color-text-muted);font-size:clamp(1.05rem,2vw,1.25rem)}.privacy-note{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.65rem!important;padding:.55rem .85rem;border:1px solid #b7ddcf;border-radius:999px;background:var(--color-success-subtle);color:var(--color-success)!important;font-size:.95rem!important;font-weight:750}.privacy-note:before{width:.55rem;height:.55rem;border-radius:50%;background:var(--color-success);content:""}.tools{padding-bottom:clamp(3.25rem,7vw,5rem)}.tools h2{margin:0 0 1.25rem;text-align:center}.tool-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;margin:0;padding:0;list-style:none}.tool-card{display:block;position:relative;height:100%;min-height:9.5rem;padding:1.25rem 1.15rem 1.1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm);color:var(--color-text-muted);text-decoration:none}.tool-card:after{position:absolute;right:1rem;bottom:.85rem;color:var(--color-primary);content:"→";font-size:1.2rem;font-weight:800}.tool-card:hover{border-color:#76b2b8;box-shadow:0 8px 22px #22414917;color:var(--color-text-muted);transform:translateY(-2px)}.tool-card strong{display:block;margin-bottom:.45rem;color:var(--color-text);font-size:1.05rem;line-height:1.3}.page-intro{max-width:48rem;padding-block:clamp(3rem,8vw,5.5rem)}.page-intro p{color:var(--color-text-muted);font-size:1.1rem}.placeholder{margin-top:2rem;padding:1.25rem;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface)}.tool-page{padding-bottom:clamp(3.5rem,7vw,5.5rem)}.content-page{max-width:48rem;padding-block:clamp(2.75rem,7vw,5rem)}.content-page h1{margin:0 0 1.5rem;font-size:clamp(2.15rem,5vw,3.25rem);letter-spacing:-.04em;line-height:1.08}.content-page h2{margin:2.25rem 0 .65rem}.content-page p{color:var(--color-text-muted)}.tool-intro{max-width:50rem;padding-block:clamp(2.25rem,5vw,3.5rem) 1.5rem}.tool-intro h1{margin:0;font-size:clamp(2.15rem,5vw,3.25rem);letter-spacing:-.04em;line-height:1.08}.tool-intro>p{max-width:44rem;margin:.8rem 0 0;color:var(--color-text-muted);font-size:1.08rem}.tool-intro .local-note{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;margin-top:.8rem;color:var(--color-success);font-size:.94rem;font-weight:700}.tool-intro .local-note:before{width:.45rem;height:.45rem;border-radius:50%;background:currentColor;content:""}.compress-workspace,.resize-workspace,.convert-workspace,.batch-workspace,.crop-workspace,.aligner-workspace{display:grid;gap:1rem}.panel{padding:clamp(1.15rem,3vw,1.75rem);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-panel)}.panel h2{margin:0 0 1rem;font-size:1.25rem}.drop-zone{display:grid;place-items:center;gap:.35rem;min-height:11.5rem;padding:1.5rem;border:2px dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-soft);color:var(--color-text-muted);text-align:center;cursor:pointer}.drop-zone strong{color:var(--color-text);font-size:1.15rem}.drop-zone:hover,.drop-zone:focus-within,.drop-zone.is-dragging,.visually-hidden:focus-visible+.drop-zone{border-color:var(--color-primary);background:var(--color-primary-subtle);box-shadow:inset 0 0 0 1px var(--color-primary)}.drop-zone.is-dragging{border-style:solid}.visually-hidden:focus-visible+.drop-zone{outline:3px solid var(--color-focus);outline-offset:3px}.button-like,.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:2.875rem;border-radius:var(--radius-sm);padding:.65rem 1.05rem;font-weight:750;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}.button-like,.primary-button{border:1px solid var(--color-primary);background:var(--color-primary);box-shadow:0 2px 5px #087f8c29;color:#fff}.button-like{margin-top:.65rem}.button-like:hover,.primary-button:hover{border-color:var(--color-primary-hover);background:var(--color-primary-hover);color:#fff}.primary-button:active{background:var(--color-primary-active)}.primary-button:disabled{border-color:#a9b7ba;background:#a9b7ba;box-shadow:none;color:#f8fafa;cursor:not-allowed}.secondary-button{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text)}.secondary-button:hover{border-color:var(--color-primary);background:var(--color-primary-subtle);color:var(--color-primary-hover)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.help-text{margin:.65rem 0 0;color:var(--color-text-muted);font-size:.94rem;line-height:1.5}.media-panel,.result-panel{display:grid;grid-template-columns:minmax(12rem,1fr) minmax(15rem,1fr);gap:clamp(1.25rem,4vw,2.25rem);align-items:start}.image-preview{display:block;width:100%;min-height:10rem;max-height:25rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:#e9eeee;background-image:linear-gradient(45deg,#dce5e5 25%,transparent 25%),linear-gradient(-45deg,#dce5e5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce5e5 75%),linear-gradient(-45deg,transparent 75%,#dce5e5 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;object-fit:contain}.detail-list{margin:0}.detail-list div{display:grid;grid-template-columns:minmax(7rem,1fr) 2fr;gap:.75rem;padding-block:.7rem;border-bottom:1px solid #e5ebec}.detail-list div:last-child{border-bottom:0}.detail-list dt{color:var(--color-text-muted);font-weight:650}.detail-list dd{margin:0;color:var(--color-text);font-weight:650;overflow-wrap:anywhere}.settings-grid{display:grid;grid-template-columns:minmax(8rem,2fr) minmax(6rem,1fr) minmax(10rem,2fr);gap:1rem}.settings-grid label,.dimension-grid label,.output-settings label,.crop-controls label,.crop-controls legend{display:block;margin-bottom:.35rem;color:var(--color-text);font-size:.95rem;font-weight:700}.settings-grid input,.settings-grid select,.dimension-grid input,.output-settings select,.crop-controls select,.coordinate-grid input{width:100%;min-height:2.875rem;padding:.55rem .7rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text)}.settings-grid input:hover,.settings-grid select:hover,.dimension-grid input:hover,.output-settings select:hover,.crop-controls select:hover,.coordinate-grid input:hover{border-color:#66878c}.settings-grid input:focus,.settings-grid select:focus,.dimension-grid input:focus,.output-settings select:focus,.crop-controls select:focus,.coordinate-grid input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #087f8c1f}.dimension-grid,.output-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem;margin-bottom:1rem}.output-settings{margin-top:1.35rem;padding-top:1.25rem;border-top:1px solid #e5ebec}.output-settings input[type=range]{width:100%;min-height:2rem;accent-color:var(--color-primary);cursor:pointer}.range-setting{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid #e5ebec}.range-setting label{display:block;margin-bottom:.35rem;color:var(--color-text);font-size:.95rem;font-weight:700}.range-setting input[type=range]{width:100%;min-height:2rem;accent-color:var(--color-primary);cursor:pointer}.detection-preview{height:auto}.batch-operation-setting{margin-top:0;padding-top:0;border-top:0}.output-settings input[type=color]{width:4.5rem;height:2.875rem;padding:.2rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer}.checkbox-label{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;font-weight:700;cursor:pointer}.checkbox-label input{width:1.2rem;height:1.2rem;margin:0;accent-color:var(--color-primary)}.warning,.result-note,.info-note{padding:.8rem .9rem;border:1px solid;border-radius:var(--radius-sm);font-size:.95rem}.warning,.result-note{border-color:#ead194;background:var(--color-warning-subtle);color:var(--color-warning)}.info-note{border-color:#b5d9dc;background:var(--color-primary-subtle);color:#155d65}.status{min-height:1.7em;margin:.9rem .25rem;color:var(--color-text-muted);font-size:.95rem;font-weight:700}.status[data-kind=error],.status[data-kind=success],.status[data-kind=warning]{padding:.7rem .85rem;border:1px solid;border-radius:var(--radius-sm)}.status[data-kind=error]{border-color:#ebbdc1;background:var(--color-error-subtle);color:var(--color-error)}.status[data-kind=success]{border-color:#b7ddcf;background:var(--color-success-subtle);color:var(--color-success)}.status[data-kind=warning]{border-color:#ead194;background:var(--color-warning-subtle);color:var(--color-warning)}.result-panel,#batch-summary{border-color:#a9d2c3;box-shadow:0 12px 34px #176b4b17}.result-panel h2,#batch-summary h2{color:var(--color-success)}.action-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}.section-heading-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.section-heading-row h2{margin-bottom:0}.text-button{display:inline-flex;align-items:center;min-height:2.75rem;border:0;border-radius:var(--radius-sm);padding:.5rem .65rem;background:transparent;color:var(--color-primary-hover);font-weight:700;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}.text-button:hover{background:var(--color-primary-subtle)}.text-button:disabled{color:#7b8b8f;cursor:not-allowed}.batch-list{display:grid;gap:.6rem;margin:1rem 0 0;padding:0;list-style:none}.batch-row{display:grid;grid-template-columns:minmax(10rem,2fr) minmax(10rem,2fr) auto;gap:1rem;align-items:center;padding:.85rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-soft)}.batch-row>div:first-child{min-width:0}.batch-row strong,.batch-row span{display:block;overflow-wrap:anywhere}.batch-row span{color:var(--color-text-muted);font-size:.94rem}.batch-row-actions{display:flex;flex-wrap:wrap;gap:.5rem}.batch-row-actions a{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:.55rem;font-weight:700}.batch-item-status--failed{color:var(--color-error)!important;font-weight:700}.batch-item-status--success{color:var(--color-success)!important;font-weight:700}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.75rem;margin-bottom:1.25rem}.summary-grid div{padding:.85rem;border:1px solid #d8e6e1;border-radius:var(--radius-sm);background:var(--color-success-subtle)}.summary-grid dt{color:var(--color-text-muted);font-size:.9rem;font-weight:650}.summary-grid dd{margin:.2rem 0 0;color:var(--color-text);font-size:1.08rem;font-weight:750}.source-inline{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin:0 0 1.15rem;padding-bottom:1rem;border-bottom:1px solid #e5ebec}.source-inline div{display:flex;gap:.4rem}.source-inline dt{color:var(--color-text-muted);font-weight:650}.source-inline dd{margin:0;font-weight:650;overflow-wrap:anywhere}.crop-stage{min-height:20rem;max-height:70vh;overflow:hidden;border:1px solid #30484d;border-radius:var(--radius-md);background:#1f2c30}.crop-stage img{display:block;max-width:100%}.crop-controls{display:grid;grid-template-columns:minmax(10rem,1fr) minmax(18rem,3fr);gap:1rem;margin-top:1.25rem}.crop-controls fieldset{margin:0;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;background:var(--color-surface-soft)}.crop-controls legend{padding-inline:.35rem}.coordinate-grid{display:grid;grid-template-columns:repeat(4,minmax(5rem,1fr));gap:.75rem;margin-bottom:.85rem}.tool-guide{max-width:50rem;padding-block:clamp(2.5rem,5vw,3.75rem) 0;color:var(--color-text-muted)}.tool-guide h2{margin:1.8rem 0 .6rem}.tool-guide h2:first-child{margin-top:0}.tool-guide ol{padding-left:1.4rem}.tool-guide li{margin-block:.45rem;padding-left:.25rem}.related-tools{margin-top:1.5rem;padding:1rem 1.1rem;border:1px solid #b5d9dc;border-left:.3rem solid var(--color-primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--color-primary-subtle);color:#315b60}.site-footer{border-top:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted)}.site-footer .container{padding-block:1.65rem}.site-footer p{display:flex;align-items:center;gap:.55rem;margin:0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem}.site-footer ul{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0;padding:0;list-style:none}.site-footer a{color:var(--color-text-muted)}.brand,.site-nav a,.tool-card,.drop-zone,.button-like,.primary-button,.secondary-button,.text-button,input,select{transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease,transform .14s ease}@media(max-width:62rem){.tool-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:48rem){.container{width:min(100% - 2rem,72rem)}.header-inner{align-items:flex-start;flex-direction:column;gap:.55rem;padding-block:.85rem .7rem}.site-nav{width:100%;overflow-x:auto;scrollbar-width:thin}.site-nav ul{width:max-content;min-width:100%}.site-nav a{min-height:2.75rem}.hero{padding-block:2.8rem 2.4rem}.tool-grid{grid-template-columns:repeat(2,1fr)}.tool-card{min-height:8.75rem}.media-panel,.result-panel{grid-template-columns:1fr}.settings-grid{grid-template-columns:2fr 1fr}.settings-grid>:last-child{grid-column:1 / -1}.batch-row{grid-template-columns:1fr;gap:.45rem}.crop-controls{grid-template-columns:1fr}.coordinate-grid{grid-template-columns:repeat(2,1fr)}.footer-inner{align-items:flex-start;flex-direction:column}}@media(max-width:30rem){.container{width:min(100% - 1.25rem,72rem)}.hero h1,.tool-intro h1,.content-page h1{font-size:2.1rem}.tool-intro{padding-block:1.8rem 1.25rem}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:auto;padding-right:2.75rem}.panel{padding:1rem;border-radius:var(--radius-md)}.drop-zone{min-height:10.5rem;padding:1.1rem}.settings-grid{grid-template-columns:1fr}.settings-grid>:last-child{grid-column:auto}.action-row>*{width:100%}.section-heading-row{align-items:flex-start}.crop-stage{min-height:14rem}.detail-list div{grid-template-columns:1fr;gap:.15rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}.tool-card:hover{transform:none}}