.tool{width:min(100%,920px);padding:var(--space-lg) 0;margin-inline:auto}.tool-header{margin-bottom:var(--space-lg)}.tool-header h1{margin:0 0 .5rem}.tool-header p{margin:0}.mode-switch{border-radius:var(--radius);margin-bottom:var(--space-md);border:1px solid #ccc;display:inline-flex;overflow:hidden}.mode-button{font:inherit;cursor:pointer;background:#fff;border:none;padding:.55rem 1.25rem;font-size:.9rem}.mode-button+.mode-button{border-left:1px solid #ccc}.mode-button.is-active{color:#fff;background:#3a6f64}.dropzone{border-radius:var(--radius);padding:var(--space-xl) var(--space-md);text-align:center;cursor:pointer;border:2px dashed #ccc;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone.is-dragover{background:#fafafa;border-color:#999}.dropzone-title{margin:0 0 .35rem;font-weight:600}.dropzone-hint{color:#666;margin:0;font-size:.85rem}.editor-grid{gap:var(--space-lg);grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start;display:grid}.stage-column{flex-direction:column;align-items:center;gap:.75rem;display:flex}.settings-column{gap:var(--space-sm);flex-direction:column;display:flex}.stage-wrap{padding:14px;position:relative}.crop-stage{background:#eee;border-radius:2px;width:300px;height:300px;position:relative;overflow:hidden}.crop-stage img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;cursor:grab;max-width:none;position:absolute;top:0;left:0}.crop-stage img:active{cursor:grabbing}.face-guide{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.face-guide ellipse,.face-guide line{fill:none;stroke:#f2b134d9;stroke-width:.6px;stroke-dasharray:2 2}.crosshair{border:0 solid #3a6f64;width:22px;height:22px;position:absolute}.crosshair-tl{border-top-width:3px;border-left-width:3px;top:0;left:0}.crosshair-tr{border-top-width:3px;border-right-width:3px;top:0;right:0}.crosshair-bl{border-bottom-width:3px;border-left-width:3px;bottom:0;left:0}.crosshair-br{border-bottom-width:3px;border-right-width:3px;bottom:0;right:0}.stage-controls{align-items:center;gap:.6rem;width:100%;max-width:300px;font-size:.85rem;display:flex}.stage-controls input[type=range]{flex:1}.checkbox-row{color:#444;align-items:center;gap:.4rem;font-size:.85rem;display:flex}.readout{color:#f2b134;letter-spacing:.03em;text-align:center;overflow-wrap:break-word;background:#33393f;border-radius:8px;width:100%;max-width:300px;padding:.6rem .75rem;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.8rem}.field-group{flex-direction:column;flex:1;gap:.3rem;display:flex}.field-label{font-size:.85rem;font-weight:600}.field-row{gap:.75rem;display:flex}.field-group label{font-size:.85rem;font-weight:600}.field-group input,.field-group select{font:inherit;border-radius:var(--radius);background:#fff;border:1px solid #ccc;padding:.5rem .6rem;font-size:.9rem}.divider{border:none;border-top:1px solid #e5e5e5;margin:.25rem 0}.preset-description{color:#777;min-height:1.1em;margin:.15rem 0 0;font-size:.8rem}.secondary-button,.primary-button{font:inherit;border-radius:var(--radius);cursor:pointer;text-align:center;padding:.6rem 1rem;font-size:.9rem;text-decoration:none;display:inline-block}.secondary-button{color:inherit;background:#fff;border:1px solid #ccc}.secondary-button:hover{background:#f0f0f0;border-color:#999}.primary-button{color:#fff;background:#3a6f64;border:1px solid #3a6f64}.primary-button:hover{background:#2f5b52}.generate-button{margin-top:.25rem}.result-box{border-radius:var(--radius);text-align:center;background:#fafafa;border:1px solid #ddd;flex-direction:column;align-items:center;gap:.6rem;margin-top:.5rem;padding:1rem;display:flex}.result-box[hidden]{display:none}.result-box img{border:1px solid #ccc;border-radius:4px;max-width:160px}.result-readout{color:#333;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.8rem}.result-actions{gap:.6rem;display:flex}@media (width<=720px){.editor-grid{grid-template-columns:1fr}.crop-stage{aspect-ratio:1;width:min(100%,300px);height:auto}}.tool-info{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid #e5e5e5}.tool-info h2{margin:0 0 .75rem;font-size:1.35rem}.tool-info h3{margin:1.5rem 0 .5rem;font-size:1.05rem}.tool-info p{color:#333;margin:0 0 .75rem}.tool-info ul,.tool-info ol{margin:0 0 .75rem;padding-left:1.25rem}.tool-info li{margin-bottom:.35rem}.faq-item{margin-bottom:1rem}.faq-item h4{margin:0 0 .25rem;font-size:.95rem}.faq-item p{color:#444;margin:0;font-size:.95rem}