*{box-sizing:border-box} :root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:#252637;background:#f5f6fa;font-synthesis:none}body{margin:0}header,main,footer{max-width:1280px;margin:auto}header{height:94px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e1e3ee}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:27px;font-weight:750;letter-spacing:-1px}.brand-note{font-size:14px;color:#737487;font-weight:400;letter-spacing:0;margin-left:8px}.logo{width:28px;height:28px;display:grid;grid-template-columns:1fr 1fr;gap:3px}.logo i:nth-child(1){background:#695cff}.logo i:nth-child(2){background:#f55dac}.logo i:nth-child(3){background:#ffbe4b}.logo i:nth-child(4){background:#3ac8be}.privacy{font-size:14px;color:#646579}main{padding:38px 32px 0}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.eyebrow{font-size:12px;letter-spacing:2px;color:#695cff;font-weight:700;margin:0 0 12px}h1{font-size:32px;letter-spacing:-1px;margin:0 0 12px}.intro p:not(.eyebrow){margin:0;color:#727486;font-size:16px}.badge{border:1px solid #dad8ff;border-radius:6px;padding:10px 14px;color:#675bc4;font:13px monospace;white-space:nowrap}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px;align-items:start}.panel{background:white;border:1px solid #e1e3ed;border-radius:16px;box-shadow:0 6px 24px #28315b04;padding:24px}h2{font-size:16px;margin:0 0 22px;display:flex;align-items:center;gap:10px}.step{font:12px monospace;color:#9292a3}.drop{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:202px;background:#fafaff;border:1.5px dashed #c9c8e8;border-radius:10px;cursor:pointer;text-align:center}.drop:hover,.drop.over{background:#f0efff;border-color:#695cff}.drop:focus-within{outline:3px solid #bcb6ff}.drop input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.upload-icon{font-size:32px;color:#695cff}.drop strong{font-size:16px}.drop span:not(.upload-icon){font-size:14px;color:#777889}.drop small{font-size:12px;color:#898999}.source{display:flex;gap:12px;margin-top:16px;align-items:center;min-width:0}.source img{width:46px;height:46px;object-fit:contain;border-radius:5px;background:#f2f3f7}.source div{min-width:0}.source strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source small{display:block;margin-top:5px;color:#818192}hr{border:0;border-top:1px solid #eeeff5;margin:25px 0}.label-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;gap:12px}input[type=number]{width:76px;padding:8px;border:1px solid #dcddea;border-radius:7px;font:600 17px inherit;text-align:center;color:#695cff;background:#fafaff}input[type=range]{width:100%;accent-color:#695cff;margin:20px 0 8px}.range-labels{display:flex;justify-content:space-between;font-size:12px;color:#9292a3}.hint{font-size:13px;line-height:1.8;color:#818192;margin:14px 0 0}.field{display:flex;flex-direction:column;gap:9px;font-size:14px;margin-top:22px}select{width:100%;background:#fff;color:#424254;border:1px solid #dedfea;border-radius:7px;padding:11px;font-size:14px}.background-row{margin-top:23px}input[type=color]{width:40px;height:30px;border:1px solid #dedfea;background:#fff;border-radius:5px;padding:3px;cursor:pointer}.result-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.result-head h2{margin:0}.stats{font-size:12px;color:#79798d;font-variant-numeric:tabular-nums}.preview{height:345px;border:1px solid #e9eaf2;border-radius:10px;background-color:#f8f9fc;background-image:linear-gradient(#eceef660 1px,transparent 1px),linear-gradient(90deg,#eceef660 1px,transparent 1px);background-size:20px 20px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px}.preview canvas{image-rendering:pixelated;object-fit:contain;max-width:100%;max-height:100%;box-shadow:0 3px 15px #262a4020}#empty{text-align:center;color:#808193}#empty strong{display:block;font-size:16px;font-weight:500}#empty p{font-size:14px}.pixel-mark{font-size:80px;line-height:1.2;color:#cac6f5;margin-bottom:12px}.preview-note{font-size:12px;color:#9494a4;margin-top:10px}.export-head{display:flex;justify-content:space-between;font-size:14px;margin:24px 0 12px}.export-head span{color:#88899a;font-size:12px}textarea{resize:vertical;width:100%;height:110px;display:block;border:1px solid #e1e3ed;background:#fafbfe;border-radius:8px;padding:12px;font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;color:#54556f;white-space:pre;overflow:auto}textarea::placeholder{color:#a4a5b5}.actions{display:flex;gap:12px;margin-top:18px}button{padding:12px 20px;border:1px solid #dedeea;background:white;color:#4e4f67;border-radius:8px;font:600 14px inherit;cursor:pointer;min-height:44px}button.primary{background:#695cff;color:white;border-color:#695cff;flex:1}button:hover:enabled{filter:brightness(.95)}button:disabled{opacity:.4;cursor:not-allowed}.export-hint{font-size:12px}.warning{color:#a35c04;background:#fff6df;border-radius:6px;padding:10px;font-size:13px}#status{min-height:24px;font-size:14px;color:#695cff}footer{display:flex;justify-content:space-between;padding:16px 32px 30px;font-size:12px;color:#9696a5}[hidden]{display:none!important}:focus-visible{outline:3px solid #b9b1ff;outline-offset:3px}@media(max-width:850px){.badge{display:none}.workspace{grid-template-columns:280px minmax(0,1fr);gap:16px}.panel{padding:18px}.brand-note{display:none}}@media(max-width:650px){header{height:72px;padding:0 20px}main{padding:26px 16px 0}.intro{margin-bottom:24px}h1{font-size:25px}.workspace{grid-template-columns:1fr}.drop{min-height:155px}.preview{height:300px}.privacy{font-size:12px}footer{padding:12px 20px 24px;gap:12px;flex-direction:column}.result-head{flex-wrap:wrap}}@media(prefers-reduced-motion:no-preference){button,.drop{transition:background .15s,filter .15s}}
.presets{display:flex;gap:8px;margin-top:14px}.presets button{flex:1;padding:9px 12px;font-size:14px}.presets button[aria-pressed=true]{color:#695cff;border-color:#a69cff;background:#f1efff}