:root{--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--color-bg:#fff;--color-bg-soft:#f6f7fb;--color-surface:#fff;--color-border:#e3e6ee;--color-text:#1b1f2a;--color-text-muted:#5f6577;--color-text-faint:#8b91a3;--color-primary:#0f7cf5;--color-primary-hover:#0b6bd6;--color-primary-soft:#e8f2ff;--color-danger:#e5484d;--color-success:#2fb36b;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;--shadow-card:0 10px 40px #141e3c1f;--shadow-soft:0 2px 10px #141e3c14;--checker:repeating-conic-gradient(#e6e8ee 0% 25%, #fff 0% 50%) 50% / 20px 20px;--header-h:72px;--max-w:1180px}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;line-height:1.5}button{font:inherit;cursor:pointer}img{max-width:100%;display:block}.app{background:var(--color-bg);flex-direction:column;min-height:100%;display:flex}.spinner{border:3px solid var(--color-primary-soft);border-top-color:var(--color-primary);border-radius:50%;flex:none;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.btn{border-radius:var(--radius-pill);white-space:nowrap;border:0;justify-content:center;align-items:center;gap:10px;font-weight:600;line-height:1.2;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform 50ms;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:default;opacity:.55}.btn.is-busy{opacity:.85;cursor:progress}.btn:focus-visible{outline:3px solid var(--color-primary-soft);outline-offset:2px}.btn-sm{padding:8px 16px;font-size:14px}.btn-md{padding:12px 28px;font-size:16px}.btn-lg{padding:16px 44px;font-size:18px}.btn-primary{background:var(--color-primary);color:var(--color-surface);box-shadow:var(--shadow-soft)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-primary .spinner{border-color:var(--color-primary-hover);border-top-color:var(--color-surface)}.btn-secondary{background:var(--color-surface);color:var(--color-text);box-shadow:inset 0 0 0 1.5px var(--color-border)}.btn-secondary:hover:not(:disabled),.btn-secondary.is-active{color:var(--color-primary);box-shadow:inset 0 0 0 1.5px var(--color-primary)}.btn-secondary.is-active{background:var(--color-primary-soft)}.btn-link{color:var(--color-primary);background:0 0;padding-left:4px;padding-right:4px}.btn-link:hover:not(:disabled){text-decoration:underline}.header{z-index:20;height:var(--header-h);background:var(--color-bg);border-bottom:1px solid var(--color-border);position:sticky;top:0}.header-inner{max-width:var(--max-w);justify-content:space-between;align-items:center;gap:16px;height:100%;margin:0 auto;padding:0 24px;display:flex}.header-logo{color:var(--color-text);align-items:center;gap:10px;text-decoration:none;display:inline-flex}.header-wordmark{letter-spacing:-.02em;font-size:22px;font-weight:500}.header-wordmark b{font-weight:800}.header-nav{align-items:center;gap:28px;display:flex}.header-link{color:var(--color-text-muted);font-size:15px;font-weight:500;text-decoration:none}.header-link:hover{color:var(--color-text)}.header-pill{color:var(--color-primary);background:var(--color-primary-soft);border-radius:var(--radius-pill);white-space:nowrap;padding:6px 12px;font-size:13px;font-weight:600}.home{flex:1}.home-hero{max-width:var(--max-w);grid-template-columns:1fr 1fr;align-items:center;gap:56px;margin:0 auto;padding:72px 24px 64px;display:grid}.home-title{letter-spacing:-.03em;margin:0 0 20px;font-size:clamp(40px,5vw,60px);font-weight:800;line-height:1.08}.home-sub{max-width:460px;color:var(--color-text-muted);margin:0;font-size:19px}.home-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);text-align:center;outline-offset:-12px;outline:2px dashed #0000;flex-direction:column;align-items:center;padding:48px 40px 36px;transition:outline-color .15s;display:flex;position:relative}.home-card.is-dragging{outline-color:var(--color-primary)}.home-upload{min-width:240px;padding-top:18px;padding-bottom:18px;font-size:20px}.home-hint{color:var(--color-text-muted);margin:16px 0 24px;font-size:15px}.home-url{gap:8px;width:100%;max-width:360px;display:flex}.home-url-input{min-width:0;font:inherit;color:var(--color-text);background:var(--color-bg-soft);border:1.5px solid var(--color-border);border-radius:var(--radius-pill);flex:1;padding:8px 16px;font-size:14px}.home-url-input::placeholder{color:var(--color-text-faint)}.home-url-input:focus{border-color:var(--color-primary);background:var(--color-surface);outline:none}.home-samples{width:100%;margin-top:32px}.home-samples-label{color:var(--color-text-muted);margin:0 0 12px;font-size:14px}.home-samples-row{justify-content:center;gap:10px;display:flex}.home-sample{background:var(--color-bg-soft);border-radius:var(--radius-sm);border:0;width:64px;height:64px;padding:0;transition:transform .15s,box-shadow .15s;overflow:hidden}.home-sample img{object-fit:cover;width:100%;height:100%}.home-sample:hover{box-shadow:var(--shadow-soft);transform:translateY(-2px)}.home-sample:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.home-how{background:var(--color-bg-soft);padding:64px 24px 48px}.home-how-title{text-align:center;letter-spacing:-.02em;margin:0 0 36px;font-size:30px;font-weight:800}.home-steps{max-width:var(--max-w);grid-template-columns:repeat(3,1fr);gap:24px;margin:0 auto;padding:0;list-style:none;display:grid}.home-step{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:28px}.home-step h3{margin:16px 0 6px;font-size:18px;font-weight:700}.home-step p{color:var(--color-text-muted);margin:0;font-size:15px}.home-step-icon{border-radius:var(--radius-md);width:48px;height:48px;color:var(--color-primary);background:var(--color-primary-soft);justify-content:center;align-items:center;display:inline-flex}.home-footer{max-width:var(--max-w);text-align:center;color:var(--color-text-faint);margin:40px auto 0;font-size:14px}.proc{flex:1;justify-content:center;align-items:center;padding:48px 24px;display:flex}.proc-stage{width:100%;max-width:var(--max-w);flex-direction:column;align-items:center;gap:28px;display:flex}.proc-frame{border-radius:var(--radius-lg);max-width:100%;box-shadow:var(--shadow-card);background:var(--color-bg-soft);position:relative;overflow:hidden}.proc-img{filter:brightness(.6)saturate(.7);max-width:100%;max-height:58vh}.proc-overlay{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.proc-spinner{border-width:4px;border-color:var(--color-primary-soft);border-top-color:var(--color-surface)}.proc-status{text-align:center;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:380px;display:flex}.proc-text{margin:0;font-size:18px;font-weight:600}.proc-bar{border-radius:var(--radius-pill);background:var(--color-primary-soft);width:100%;height:6px;position:relative;overflow:hidden}.proc-bar span{border-radius:inherit;background:var(--color-primary);transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.proc-bar.is-indeterminate span{width:35%;animation:1.3s ease-in-out infinite proc-slide}@keyframes proc-slide{0%{left:-35%}to{left:100%}}.proc-note{color:var(--color-text-faint);margin:4px 0 0;font-size:13px}.result{width:100%;max-width:var(--max-w);flex:1;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:32px;margin:0 auto;padding:32px 24px 48px;display:grid}.result-main{flex-direction:column;align-items:center;gap:20px;min-width:0;display:flex}.result-toggle{border-radius:var(--radius-pill);background:var(--color-bg-soft);box-shadow:inset 0 0 0 1px var(--color-border);gap:4px;padding:4px;display:inline-flex}.result-tab{color:var(--color-text-muted);border-radius:var(--radius-pill);background:0 0;border:0;padding:8px 20px;font-size:15px;font-weight:600;transition:background-color .15s,color .15s}.result-tab:hover{color:var(--color-text)}.result-tab.is-active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-soft)}.result-preview{flex-direction:column;width:100%;min-height:360px;display:flex}.result-side{top:calc(var(--header-h) + 24px);position:sticky}.result-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);text-align:center;flex-direction:column;align-items:stretch;gap:12px;padding:32px 28px 24px;display:flex}.result-title{letter-spacing:-.01em;margin:0;font-size:22px;font-weight:800}.result-size{color:var(--color-text-muted);margin:0 0 8px;font-size:14px}.result-download,.result-edit{width:100%}.result-new{align-self:center}.result-error{color:var(--color-danger);margin:0;font-size:14px}.result-meta{color:var(--color-text-faint);margin:4px 0 0;font-size:13px}.error{flex:1;justify-content:center;align-items:center;padding:48px 24px;display:flex}.error-card{background:var(--color-surface);border-radius:var(--radius-lg);width:100%;max-width:460px;box-shadow:var(--shadow-card);text-align:center;flex-direction:column;align-items:center;gap:12px;padding:40px 32px;display:flex}.error-thumb{object-fit:cover;border-radius:var(--radius-md);opacity:.6;width:96px;height:96px;margin-bottom:8px}.error-title{margin:0;font-size:22px;font-weight:800}.error-text{color:var(--color-text-muted);margin:0 0 12px}.app-drop{z-index:50;background:color-mix(in srgb, var(--color-primary-soft) 88%, transparent);pointer-events:none;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.app-drop span{border:2px dashed var(--color-primary);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-primary);text-align:center;padding:28px 40px;font-size:20px;font-weight:700}@media (max-width:900px){.home-hero{text-align:center;grid-template-columns:1fr;gap:32px;padding-top:40px}.home-sub{margin:0 auto}.home-steps,.result{grid-template-columns:1fr}.result-side{position:static}.result-preview{min-height:0}}@media (max-width:640px){.header-inner{padding:0 16px}.header-nav{gap:14px}.header-link{display:none}.home-hero{padding-left:16px;padding-right:16px}.home-card{padding:36px 20px 28px}.home-upload{width:100%;min-width:0}.home-sample{width:56px;height:56px}.result{padding:20px 16px 40px}.result-tab{padding:8px 14px;font-size:14px}}.editor-root{flex-direction:column;gap:20px;width:100%;display:flex}@media (min-width:900px){.editor-root{flex-direction:row;align-items:flex-start}.editor-preview-wrap{flex:60%;min-width:0}.editor-panel{flex:0 0 320px}}.editor-preview-wrap{background:var(--color-bg-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);justify-content:center;align-items:center;padding:12px;display:flex;position:relative;overflow:hidden}.editor-canvas{border-radius:var(--radius-md);background:var(--checker);touch-action:none;width:auto;max-width:100%;height:auto;max-height:70vh;display:block}.editor-canvas--brush{cursor:none}.editor-brush-cursor{pointer-events:none;border:2px solid var(--color-primary);border-radius:50%;position:absolute;box-shadow:0 0 0 1px #fffc}.editor-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:16px}.editor-tabs{border-bottom:1px solid var(--color-border);gap:24px;margin-bottom:16px;display:flex}.editor-tab{color:var(--color-text-muted);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:8px 2px 12px;font-size:14px;font-weight:600}.editor-tab:hover{color:var(--color-text)}.editor-tab.is-active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.editor-panel-body{min-height:0}.editor-section-stack{flex-direction:column;gap:18px;display:flex}.editor-section-title{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-faint);margin:0 0 8px;font-size:12px;font-weight:600}.editor-hint{color:var(--color-text-muted);background:var(--color-bg-soft);border-radius:var(--radius-sm);margin:0;padding:8px 10px;font-size:13px}.editor-swatch-row{flex-wrap:wrap;gap:10px;display:flex}.editor-swatch{width:36px;height:36px;box-shadow:inset 0 0 0 1px var(--color-border);border:2px solid #0000;border-radius:50%;padding:0;transition:transform .12s,box-shadow .12s;position:relative;overflow:hidden}.editor-swatch:hover{transform:scale(1.08)}.editor-swatch.is-selected{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}.editor-swatch--checker{background:var(--checker)}.editor-swatch--custom{cursor:pointer;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);justify-content:center;align-items:center;display:flex}.editor-swatch--custom input[type=color]{opacity:0;width:1px;height:1px;position:absolute}.editor-blur-row{flex-direction:column;gap:10px;display:flex}.editor-slider{width:100%;accent-color:var(--color-primary)}.editor-photo-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.editor-photo-tile{aspect-ratio:4/3;border-radius:var(--radius-md);background-position:50%;background-size:cover;border:2px solid #0000;padding:0;position:relative;overflow:hidden}.editor-photo-tile:hover{border-color:var(--color-border);box-shadow:var(--shadow-soft)}.editor-photo-upload:hover{color:var(--color-primary)}.editor-photo-tile.is-selected{border-color:var(--color-primary)}.editor-photo-upload{text-align:center;color:var(--color-text-muted);background:var(--color-bg-soft);cursor:pointer;justify-content:center;align-items:center;padding:4px;font-size:11px;font-weight:600;display:flex}.editor-mode-row,.editor-history-row{flex-wrap:wrap;gap:10px;display:flex}.editor-btn{border-radius:var(--radius-pill);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);padding:7px 16px;font-size:13px;font-weight:600;line-height:1.2}.editor-btn:hover:not(:disabled):not(.is-active){border-color:var(--color-primary);color:var(--color-primary)}.editor-btn.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.editor-btn.editor-btn--danger:hover:not(:disabled):not(.is-active){border-color:var(--color-danger);color:var(--color-danger)}.editor-btn:disabled{opacity:.4;cursor:not-allowed}