:root{font-family:Inter,Arial,"Noto Sans JP",sans-serif;color:#203c37;background:#f4f7f5;font-size:14px;--green:#275e49;--accent:#2b866d;--line:#d9e3dd;--muted:#718177}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer;border:1px solid #d4dfda;border-radius:7px;padding:9px 13px;background:#fff;color:#36564a;font-weight:700;font-size:12px;letter-spacing:.03em}button:hover{background:#edf4f0}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary{background:var(--green);color:#fff;border-color:var(--green)}.primary:hover{background:#1d4939}.topbar{height:76px;background:#fff;border-bottom:1px solid #dfe6e2;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.topbar p{font-size:11px;color:var(--muted)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.brand-mark{background:#234f40;color:#fff;font-size:30px;border-radius:11px;width:42px;height:42px;text-align:center}.brand strong{font-size:18px}.brand small{display:block;font-size:9px;letter-spacing:1.8px;color:#718278;margin-top:5px}.brand b{font-size:8px;background:#eaf0e9;padding:3px 5px;border-radius:3px}main{max-width:1440px;margin:auto;padding:22px 28px 48px}.back{margin:0 0 15px;font-size:12px}.back a{color:#365c4d;text-decoration:none}.intro{display:flex;align-items:end;justify-content:space-between;margin:0 0 22px}.eyebrow{display:block;font-size:9px;letter-spacing:1.5px;color:#7a8c82;font-weight:800}.intro h1{font-size:28px;margin:6px 0 7px}.intro p{color:var(--muted);font-size:12px;margin:0}.lofi-note{border-left:3px solid var(--accent);padding:5px 0 5px 12px}.lofi-note strong,.lofi-note span{display:block}.lofi-note strong{font-size:9px;letter-spacing:1.2px;color:#718177}.lofi-note span{font-weight:700;margin-top:5px}.drop-zone{background:#fff;border:1px dashed #9fb7ac;border-radius:10px;padding:18px 21px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:.15s}.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:#f1f8f5}.drop-zone>div:first-of-type{display:grid;grid-template-columns:34px auto;column-gap:11px}.upload-icon{grid-row:1/3;width:34px;height:34px;border-radius:50%;background:#e5f2ec;color:#27745b;display:grid;place-items:center;font-size:20px}.drop-zone strong{font-size:13px;align-self:end}.drop-zone p{margin:4px 0 0;font-size:11px;color:var(--muted)}.drop-actions{display:flex;gap:8px}.workspace{display:grid;grid-template-columns:minmax(420px,1.35fr) minmax(260px,.65fr);gap:18px;margin-top:18px}.panel{background:#fff;border:1px solid #dfe6e2;box-shadow:0 10px 28px #1d40320c}.crop-panel{grid-row:span 2}.panel-title{min-height:66px;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e9e5}.panel-title h2{font-size:16px;margin:4px 0 0}.panel-title>span{font-size:10px;color:var(--muted)}.canvas-frame{position:relative;background:repeating-conic-gradient(#e9eeeb 0 25%,#f8faf9 0 50%) 0/18px 18px;overflow:hidden}.crop-frame{margin:18px;height:min(440px,48vw)}#crop-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#crop-canvas.dragging{cursor:grabbing}.empty-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center;color:#819087;font-size:12px;pointer-events:none}.loaded~.workspace .empty-message{display:none}.crop-tools{display:flex;align-items:center;gap:8px;padding:0 18px}.crop-tools label{display:flex;align-items:center;gap:10px;margin-right:auto;font-size:11px;font-weight:700}.crop-tools input{width:160px;accent-color:var(--accent)}.crop-tools output{width:35px;color:var(--muted)}.help{font-size:10px;line-height:1.6;color:var(--muted);margin:12px 18px 17px}.settings-panel{padding:18px}.control-group+.control-group{border-top:1px solid #e7ece9;margin-top:18px;padding-top:18px}.segmented{display:grid;gap:6px;margin-top:9px}.segmented.sizes{grid-template-columns:repeat(4,1fr)}.segmented.palettes{grid-template