body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--background-color:#f0f2f5;--canvas-background:#e0e0e0;--controls-background:#fff;--text-color:#333;--border-color:#d9d9d9;--primary-color:#1890ff;--primary-hover-color:#40a9ff;--error-color:#f5222d}body{background-color:#f0f2f5;background-color:var(--background-color);color:#333;color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0}.App{display:flex;flex-direction:column;height:100vh;overflow:hidden}.topbar{align-items:center;background:#0000;box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;margin-bottom:0;padding:24px 36px 0;width:100%}.actions-right{align-items:center;display:inline-flex;gap:12px}.back-home{background:#fff;border:1px solid #cfe0ff;border-radius:10px;box-shadow:0 2px 6px #1e50b414;color:#0b61ff;font-weight:700;padding:6px 10px;text-decoration:none}.back-home:hover{background:#f2f6ff;border-color:#b6cdfd}.brand{gap:12px;min-width:0}.brand-logo{border-radius:9px}.brand-link{align-items:center;border-radius:10px;display:inline-flex;justify-content:center;text-decoration:none}.brand-link:focus-visible{box-shadow:0 0 0 3px #0b61ff40;outline:none}.main-title{color:#222;flex:1 1 auto;font-size:2rem;font-weight:700;letter-spacing:.01em;line-height:1.2;margin:0;min-width:0}.lang-select{background:#fff;border:1.2px solid #d3e0f3;border-radius:7px;box-shadow:0 1px 8px #5078dc0f;font-size:1.08rem;font-weight:600;padding:7px 18px;transition:border-color .15s}.lang-select:focus{border-color:#7bb2f7;outline:none}.main-card-layout{display:flex;flex-direction:row;gap:24px;height:calc(100vh - 80px);overflow:auto;padding:24px 36px}.left-column{display:flex;flex-direction:column;gap:16px;height:-webkit-fit-content;height:fit-content;max-width:340px;min-width:260px}.right-column{display:flex;flex:1 1;flex-direction:column;min-width:0}.info-card,.palette-card,.preview-card,.rotation-card,.upload-card{background:linear-gradient(135deg,#fafdff 60%,#e9f1fd);border:1.5px solid #e3eaf4;border-radius:18px;box-shadow:0 4px 24px #1e50b414,0 1.5px 4px #00000008;padding:24px;transition:box-shadow .18s}.upload-card{gap:22px;padding:32px 28px 28px}.upload-card,.upload-card form{display:flex;flex-direction:column}.upload-card form{align-items:stretch}.upload-card:hover{border-color:#b3d1fa;box-shadow:0 8px 32px #1e50b421,0 2px 8px #0000000d}.info-card,.palette-card,.rotation-card{padding:16px}.preview-card{flex:1 1;overflow:hidden}.form-group,.preview-card{display:flex;flex-direction:column}.form-group{margin-bottom:20px;text-align:left}.form-group label{color:#333;font-weight:500;margin-bottom:8px}.form-group input[type=number],.form-group input[type=text]{border:1px solid #ccc;border-radius:8px;box-sizing:border-box;font-size:1rem;max-width:100%;padding:10px;transition:border-color .2s,box-shadow .2s;width:100%}.form-group input[type=number]:focus,.form-group input[type=text]:focus{border-color:#007bff;box-shadow:0 0 0 3px #007bff33;outline:none}.input-group{display:flex;flex-wrap:wrap;gap:15px}.input-group .form-group{flex:1 1 120px;min-width:0}.file-input-wrapper{align-items:center;cursor:pointer;display:inline-flex;overflow:hidden;position:relative}.file-input-wrapper input[type=file]{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.file-input-button{background:linear-gradient(180deg,#2f80ff,#0b61ff);border:0;border-radius:12px;box-shadow:0 6px 18px #1650c840;color:#fff;font-weight:700;padding:10px 16px;transition:transform .08s ease,box-shadow .2s ease,filter .2s ease}.form-group .file-input-button,label.file-input-button{color:#fff!important}.file-input-wrapper:hover .file-input-button{box-shadow:0 10px 26px #1650c852;filter:brightness(1.04)}.file-input-button:active{transform:translateY(1px) scale(.99)}.file-thumb{margin-top:10px;width:100%}.file-thumb img{border:1px solid #e3eaf4;border-radius:12px;box-shadow:0 2px 12px #1e50b41a;height:auto;max-width:100%}.checkbox-group{align-items:center;cursor:pointer;display:flex;gap:10px;justify-content:flex-start;margin:8px 0 12px;-webkit-user-select:none;user-select:none}.checkbox-group input[type=checkbox]{display:none}.custom-checkbox{align-items:center;border:2px solid #ccc;border-radius:4px;display:flex;height:20px;justify-content:center;margin-right:10px;transition:background-color .2s,border-color .2s;width:20px}.custom-checkbox .checkmark{background-color:#fff;-webkit-clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);display:none;height:12px;width:12px}.checkbox-group input[type=checkbox]:checked+.custom-checkbox{background-color:#007bff;border-color:#007bff}.checkbox-group input[type=checkbox]:checked+.custom-checkbox .checkmark{display:block}.rotation-controls{gap:24px;margin:0}.rotation-button,.rotation-controls{align-items:center;display:flex;justify-content:center}.rotation-button{background:linear-gradient(90deg,#3a8dde,#005bea);border:none;border-radius:12px;box-shadow:0 2px 8px #00000012;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:700;outline:none;padding:12px 24px;position:relative;transition:background .2s,transform .15s,box-shadow .15s}.rotation-button:active{transform:scale(.96)}.rotation-button:focus-visible{box-shadow:0 0 0 2px #1890ff44}.rotation-button:hover{background:linear-gradient(90deg,#005bea,#3a8dde);box-shadow:0 4px 16px #0000001c}.rotation-button svg{font-size:1.2em;margin-right:6px}.rotation-value{font-weight:700;min-width:40px;padding:0 10px;text-align:center}.start-position-controls{display:flex;gap:10px;margin-top:5px}.start-position-controls div{align-items:center;display:flex}.start-position-controls label{margin-right:5px;min-width:20px}.start-position-controls input{border:1px solid #ccc;border-radius:4px;font-size:.9rem;padding:8px;text-align:center;width:60px}input[type=file]{font-size:.9rem}button{background-color:#1890ff;background-color:var(--primary-color);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:10px 15px;transition:background-color .2s}button:hover:not(:disabled){background-color:#40a9ff;background-color:var(--primary-hover-color)}button:disabled{background-color:#ccc;cursor:not-allowed}.process-btn{background:linear-gradient(90deg,#3a8dde,#005bea);border-radius:8px;font-size:1.1rem;margin-top:10px;padding:12px;width:100%}.process-btn:hover:not(:disabled){background:linear-gradient(90deg,#005bea,#3a8dde);box-shadow:0 4px 16px #0000001c}.submit-button{background:linear-gradient(180deg,#2f80ff,#0b61ff);border:none;border-radius:12px;box-shadow:0 6px 18px #1650c840;color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:.2px;padding:12px 16px;transition:transform .08s ease,box-shadow .2s ease,filter .2s ease;width:100%}.submit-button:hover:not(:disabled){box-shadow:0 10px 26px #1650c852;filter:brightness(1.03)}.submit-button:active:not(:disabled){transform:translateY(1px) scale(.99)}.submit-button:disabled{background:linear-gradient(180deg,#bfcdf6,#9fb6f5);box-shadow:none;cursor:not-allowed}.error{background-color:#fff1f0;border:1px solid #ffa39e;color:#f5222d;color:var(--error-color);max-width:100%;overflow-wrap:break-word;text-align:center}.error,.error pre{border-radius:4px;padding:10px}.error pre{background-color:#f8f8f8;font-size:12px;max-height:200px;overflow:auto;text-align:left}.palette-container{background-color:initial;border:none;padding:0}.palette-container h3{font-size:1rem;margin-bottom:10px;margin-top:0}.palette-grid{grid-gap:5px;display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(30px,1fr))}.palette-color{border:1px solid #e8eef9;border-radius:10px;cursor:pointer;padding-bottom:100%;transition:transform .18s ease,box-shadow .18s ease,outline .18s ease;width:100%}.palette-color:hover{box-shadow:0 2px 8px #3250a038;transform:scale(1.06)}.palette-color.selected{border:none;box-shadow:0 0 0 3px #fff,0 0 0 5px #2f80ff;transform:scale(1.06)}.info-bar{align-items:center;background-color:#f7f7f7;border:1px solid #d9d9d9;border:1px solid var(--border-color);border-radius:4px;display:flex;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.9rem;gap:10px;height:24px;padding:10px}.color-preview{border:1px solid #d9d9d9;border:1px solid var(--border-color);border-radius:3px;height:20px;width:20px}.canvas-container{align-items:center;background-color:#ffffff80;border-radius:8px;display:flex;flex:1 1;justify-content:center;min-height:0;overflow:hidden;padding:20px}.placeholder{color:#888;font-size:1.2rem}.pixel-grid-wrapper{aspect-ratio:var(--aspect-ratio);cursor:grab;display:flex;max-height:100%;max-width:100%;overflow:hidden;width:100%}.pixel-grid{border:2px solid #ccc;box-shadow:0 0 10px #0003;display:grid;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;transition:transform .1s ease-out;width:100%;will-change:transform}.zoom-controls{align-items:center;display:flex;gap:10px;justify-content:center;margin-top:15px}.zoom-controls button{background:linear-gradient(180deg,#fff,#f3f8ff);border:1.5px solid #c6d8ff;border-radius:50%;box-shadow:0 4px 14px #1650c829,0 1px 2px #0000000a;color:#0b61ff;cursor:pointer;font-size:1.1rem;font-weight:800;height:42px;transition:background-color .18s,box-shadow .18s,transform .1s,filter .18s;width:42px}.zoom-controls button:hover{background-color:#eef5ff;box-shadow:0 8px 20px #1650c838;transform:translateY(-1px)}.zoom-controls button:active{box-shadow:0 3px 10px #1650c829;transform:scale(.95)}.zoom-controls button:focus-visible{box-shadow:0 0 0 3px #0b61ff40,0 6px 18px #1650c838;outline:none}.zoom-controls span{font-size:1rem;font-weight:500;min-width:50px;text-align:center}.pixel{aspect-ratio:1/1;cursor:pointer;position:relative;transition:transform .1s ease}.pixel:hover{box-shadow:0 0 3px #0000004d}.pixel.selected,.pixel:hover{transform:scale(1.1);z-index:10}.pixel.selected{border:1px solid #fff;box-shadow:0 0 5px #fffc,0 0 10px #00000080}@media (max-width:768px){.main-card-layout{flex-direction:column;height:auto;overflow:auto;padding:16px}.left-column,.right-column{max-width:100%;width:100%}.topbar{padding:16px}.main-title{font-size:1.5rem}}@media (max-width:600px){.topbar{align-items:center;flex-direction:row;gap:8px;justify-content:space-between;padding:12px 10px 0}.actions-right{gap:8px}.back-home{font-size:.9rem;padding:6px 8px}.brand-logo{height:28px;width:28px}.main-title{font-size:1.25rem;text-align:left}.lang-select{align-self:auto;font-size:.95rem;padding:6px 12px}}:root{--primary:#2d6cdf;--primary-600:#1f56c4;--text:#0f172a;--muted:#475569;--bg:#f6f8fc;--card:#fff;--ring:#2d6cdf40;--shadow:0 10px 24px #0206170f,0 2px 6px #0206170a;--radius:14px}.container{margin:0 auto;max-width:1160px;padding-left:24px;padding-right:24px}.home{background:#f6f8fc;background:var(--bg);color:#0f172a;color:var(--text);min-height:100vh}.home-header{-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px);background:#f6f8fccc;border-bottom:1px solid #0f172a0f;position:-webkit-sticky;position:sticky;top:0;z-index:20}.home-header.scrolled{box-shadow:0 8px 18px #0206170f}.nav-inner{height:64px;justify-content:space-between}.brand,.nav-inner{align-items:center;display:flex}.brand{gap:14px}.brand-logo{border-radius:8px;box-shadow:0 6px 14px #2d6cdf40;height:36px;width:36px}.brand-text .site-name{font-size:18px;font-weight:700;line-height:1}.brand-text .sub{color:#475569;color:var(--muted);font-size:14px;margin:2px 0 0}.lang-note{align-items:center;-webkit-backdrop-filter:saturate(1.2) blur(4px);backdrop-filter:saturate(1.2) blur(4px);background:#ffffffe6;border:1px solid #0f172a14;border-radius:12px;box-shadow:0 8px 18px #0206170f;display:flex;font-weight:600;gap:8px;padding:8px 10px}.lang-note,.lang-note select{color:#0f172a;color:var(--text)}.lang-note select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:linear-gradient(180deg,#fff,#f7f9ff);border:1px solid #0f172a1f;border-radius:10px;box-shadow:0 2px 6px #0206170f;margin-left:0;padding:6px 28px 6px 10px}.lang-note select:focus{border-color:#2d6cdf;box-shadow:0 0 0 3px #2d6cdf40,0 2px 6px #0206170f;box-shadow:0 0 0 3px var(--ring),0 2px 6px #0206170f;outline:none}.home-main{padding-bottom:56px}.home-main section{padding:56px 0}.hero{background:#0000}.hero-inner{grid-gap:32px;background:linear-gradient(180deg,#eef4ff,#f7faff);border:1px solid #2d6cdf24;border-radius:18px;box-shadow:0 8px 24px #0000000f;display:grid;gap:32px;grid-template-columns:1.2fr 1fr;padding:40px 30px}.hero-right{background:radial-gradient(120% 120% at 20% 0,#dce8ff 0,#f5f8ff 60%,#0000 100%);border:1px dashed #2d6cdf33;border-radius:14px;min-height:160px}.badge{align-items:center;background:linear-gradient(180deg,#d9e8ff,#cfe2ff);border:1px solid #2d6cdf59;border-radius:999px;box-shadow:0 10px 20px #2d6cdf2e,0 2px 4px #2d6cdf2e;color:#0b3a8a;display:inline-flex;font-size:12px;gap:6px;height:28px;margin-bottom:12px;padding:0 12px}.badge,.hero h1{font-weight:700;letter-spacing:.2px}.hero h1{color:#0f172a;font-size:clamp(34px,3.8vw,48px);margin:0 0 12px}.hero-desc{color:#475569;color:var(--muted);margin:0 0 22px;max-width:760px}.cta-group{display:flex;flex-wrap:wrap;gap:12px}.btn{align-items:center;border:1px solid #0000;border-radius:12px;display:inline-flex;font-weight:600;justify-content:center;letter-spacing:.2px;min-height:44px;padding:0 16px;text-decoration:none;transition:all .18s ease}.btn:focus-visible{box-shadow:0 0 0 3px #2d6cdf40;box-shadow:0 0 0 3px var(--ring);outline:none}.btn.primary{background:#2d6cdf;background:var(--primary);box-shadow:0 14px 28px #2d6cdf59,0 2px 6px #0f172a1f;color:#fff}.btn.primary:hover{background:#1f56c4;background:var(--primary-600);transform:translateY(-1px)}.btn.ghost{background:#0000;border-color:#2d6cdf59;color:#2d6cdf;color:var(--primary)}.btn.ghost:hover{background:#2d6cdf0f}.features{margin-top:0}.section-title{font-weight:700}.features h3,.section-title{font-size:22px;margin:0 0 16px}.feature-grid{grid-gap:16px;display:grid;gap:16px;grid-auto-rows:minmax(0,auto);grid-template-columns:repeat(3,1fr);list-style:none;margin:0;padding:0}.feature-grid li{min-height:160px}.feature-card{align-items:flex-start;background:#fff;background:var(--card);border:1px solid #0f172a0f;border-radius:16px;box-shadow:0 8px 24px #0000000f;color:inherit;display:flex;flex-direction:row;gap:12px;height:100%;isolation:isolate;justify-content:space-between;padding:18px;position:relative;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease;z-index:0}.feature-card:hover{box-shadow:0 14px 28px #02061714,0 4px 10px #0206170f;transform:translateY(-2px);z-index:1}.feature-card:focus-visible{box-shadow:0 0 0 3px #2d6cdf40,0 8px 24px #0000000f;box-shadow:0 0 0 3px var(--ring),0 8px 24px #0000000f;outline:none}.feature-card.disabled{opacity:.7;pointer-events:none}.feature-text{flex:1 1 auto;min-width:0}.feature-text h3{font-size:18px;font-weight:600;margin:0 0 8px}.feature-text p{color:#475569;color:var(--muted);margin:0}.arrow{align-self:flex-end;color:#2d6cdf;color:var(--primary);flex:0 0 auto;font-weight:700}.clamp-2{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.feature-grid h4{font-size:18px;margin:0 0 8px}.feature-grid p{color:#475569;color:var(--muted);margin:0 0 10px}.link{border-bottom:1px dashed #2d6cdf66;color:#2d6cdf;color:var(--primary);font-weight:600;text-decoration:none}.link:hover{border-bottom-color:#1f56c4;border-bottom-color:var(--primary-600);color:#1f56c4;color:var(--primary-600)}.home-footer{color:#64748b;margin:28px auto 0;max-width:1100px;padding:8px 20px 32px}@media (max-width:992px){.hero-inner{grid-template-columns:1fr}.feature-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.nav-inner{height:auto;padding-bottom:10px;padding-top:10px}.feature-grid{gap:40px;grid-template-columns:1fr;margin-top:6px;row-gap:40px}.feature-grid li{margin:0 0 8px}.feature-card{align-items:flex-start;flex-direction:column;padding:20px;transform:none!important}.feature-card:hover{transform:none}.feature-grid li{min-height:auto}.arrow{align-self:flex-end}.brand-text .site-name{font-size:16px}.lang-note{align-self:stretch;justify-content:space-between}}
/*# sourceMappingURL=main.362db455.css.map*/