:root{color-scheme:light;--bg: #f6f1e8;--panel: #fff7ef;--ink: #1c1b19;--muted: #6c6157;--accent: #e85d3f;--accent-dark: #b93b22;--border: #e7d9c8;--shadow: 0 20px 60px rgba(28, 27, 25, .1)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,PingFang SC,Helvetica Neue,sans-serif;background:radial-gradient(circle at top left,#fff9f0,#f3e7d7 60%,#ead3bc);color:var(--ink)}a{color:inherit;text-decoration:none}.page{min-height:100vh;display:flex;flex-direction:column}.hero{padding:60px 24px 40px;background:linear-gradient(120deg,#fff6ea,#f8e6d2,#f1d7bd);border-bottom:1px solid var(--border)}.hero.compact{padding:40px 24px 28px}.hero-content{max-width:960px;margin:0 auto}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--muted);margin:0 0 12px}.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 12px}.sub{margin:0;color:var(--muted);max-width:520px;font-size:16px}.meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--muted)}.content{flex:1;padding:32px 24px 64px;display:flex;justify-content:center}.editor-content{padding-bottom:24px}.content.split{align-items:flex-start;gap:24px;flex-wrap:wrap}.card{background:var(--panel);border:1px solid var(--border);border-radius:24px;padding:24px;box-shadow:var(--shadow);width:min(960px,100%)}.card.preview{max-width:520px;background:#f1f1f1}.editor-preview-card{width:min(640px,100%)}.card.form{max-width:380px;background:#f1f1f1}.card h2{margin:0 0 12px;font-size:20px}.hint{margin:0 0 20px;color:var(--muted)}.upload{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.upload:hover{transform:translateY(-1px);box-shadow:0 10px 24px #1c1b1933}.upload input{display:none}.status{margin-top:12px;font-size:14px;color:var(--muted)}.magnet-display{width:100%;margin:0 auto;background-image:var(--magnet-image);background-size:contain;background-repeat:no-repeat;background-position:center;display:flex;align-items:center;justify-content:center}.magnet-square{max-width:500px;aspect-ratio:1 / 1;padding:9%}.magnet-landscape{max-width:520px;aspect-ratio:1156 / 828;padding:8.5% 10% 9.5%}.magnet-portrait{max-width:420px;aspect-ratio:5 / 6;padding:8.5% 11.5% 9.5% 9.5%}.magnet-image-window{width:100%;border-radius:8px;overflow:hidden;background:#f3f3f3;box-shadow:inset 0 1px #ffffffb3}.magnet-image-window img,.magnet-image-window .preview-shell,.magnet-image-window .placeholder{width:100%;height:100%}.magnet-image-window img{display:block;object-fit:cover}.ratio-1-1{aspect-ratio:1 / 1}.ratio-4-3{aspect-ratio:4 / 3}.ratio-3-4{aspect-ratio:3 / 4}.preview-shell{border-radius:0;border:0;background:#f7f8fa;position:relative;overflow:hidden}.shimmer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.8),transparent);transform:translate(-100%);animation:shimmer 1.6s infinite}.placeholder{border:0;border-radius:0;padding:32px;text-align:center;color:var(--muted);background:#ffffffa6;display:flex;align-items:center;justify-content:center}.variants{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.thumb{width:64px;height:64px;border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;background:#fffaf4;cursor:pointer;position:relative}.thumb:disabled{opacity:.6;cursor:not-allowed}.thumb.active{border-color:var(--accent-dark);box-shadow:0 0 0 3px #e85d3f47}.thumb img,.thumb-shimmer{width:100%;height:100%;display:block;border-radius:8px;border:1px solid var(--border);object-fit:cover}.thumb-shimmer{background:#f1f3f6;position:relative;overflow:hidden}.thumb-shimmer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.85),transparent);transform:translate(-100%);animation:shimmer 1.6s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}label,.field-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-size:14px;color:var(--muted)}.ratio-group{display:flex;flex-wrap:wrap;gap:10px}.ratio-option{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0;padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}.ratio-option.active{border-color:var(--accent-dark);box-shadow:0 0 0 2px #e85d3f33}.ratio-input{display:none}.ratio-icon{display:inline-block;border:1.5px solid var(--ink);border-radius:3px;opacity:.85}.ratio-icon-square{width:12px;height:12px}.ratio-icon-landscape{width:14px;height:10px}.ratio-icon-portrait{width:10px;height:14px}textarea{border:1px solid var(--border);border-radius:12px;padding:12px;font-family:inherit;font-size:14px;resize:vertical;background:#fff}textarea::placeholder{color:#bcc3cb}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.editor-cta-bar{width:min(640px,calc(100% - 48px));margin:0 auto 36px;display:flex;gap:12px}.editor-cta-bar button{flex:1;width:auto}.convert-panel-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#15131161;opacity:0;pointer-events:none;transition:opacity .24s ease;z-index:120}.convert-panel-backdrop.open{opacity:1;pointer-events:auto}.convert-panel{position:absolute;top:0;right:0;width:min(460px,92vw);height:100%;background:#f1f1f1;border-left:1px solid var(--border);box-shadow:-16px 0 36px #1c1b192e;transform:translate(102%);transition:transform .28s ease;display:flex;flex-direction:column}.convert-panel.open{transform:translate(0)}.convert-panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px;border-bottom:1px solid var(--border)}.convert-panel-header h2{margin:0;font-size:20px}.panel-close{border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink);padding:8px 14px}.panel-close-icon{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1}.convert-panel-content{padding:18px 20px;overflow-y:auto;flex:1}.original-preview-wrap{margin-bottom:16px}.original-preview-wrap p{margin:0 0 8px;font-size:14px;color:var(--muted)}.original-preview{width:50%;min-width:120px;max-width:220px;border-radius:14px;border:1px solid var(--border);aspect-ratio:1 / 1;object-fit:cover;display:block;background:#fff;margin:0 auto}.convert-panel-actions{border-top:1px solid var(--border);background:#f1f1f1;padding:14px 20px 20px;display:flex;gap:10px}.convert-panel-actions button{flex:1}.confirm-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#15131161;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:140;display:flex;align-items:center;justify-content:center;padding:20px}.confirm-dialog-backdrop.open{opacity:1;pointer-events:auto}.confirm-dialog{width:min(420px,100%);background:#f1f1f1;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 16px 36px #1c1b192e;transform:translateY(10px);transition:transform .2s ease}.confirm-dialog.open{transform:translateY(0)}.confirm-dialog h3{margin:0 0 8px;font-size:18px}.confirm-dialog p{margin:0;color:var(--ink)}.confirm-dialog-actions{margin-top:16px;display:flex;gap:10px}.confirm-dialog-actions button{flex:1}button{border:none;border-radius:999px;padding:12px 20px;font-family:inherit;cursor:pointer;transition:transform .2s ease,background .2s ease}button.primary{background:var(--accent);color:#fff}button.primary:hover{background:var(--accent-dark);transform:translateY(-1px)}button.ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}.message{margin-top:12px;padding:12px;border-radius:12px;background:#fff2f0;color:#a6362b;font-size:14px}.page.error{padding:80px 24px;align-items:center;justify-content:center}@media (max-width: 900px){.content.split{flex-direction:column;align-items:stretch}.card.preview,.card.form{max-width:100%}}@media (max-width: 600px){.hero{padding:40px 16px 24px}.content{padding:24px 16px 40px}.editor-content{padding-bottom:136px}.card{padding:18px}.editor-cta-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;margin:0;padding:10px;border-radius:16px;border:1px solid var(--border);background:#f1f1f1f5;box-shadow:0 10px 24px #1c1b1924;z-index:80}.convert-panel{left:0;right:0;top:auto;bottom:0;width:100%;max-height:88vh;height:auto;border-left:0;border-top:1px solid var(--border);border-radius:20px 20px 0 0;box-shadow:0 -18px 30px #1c1b192e;transform:translateY(102%)}.convert-panel.open{transform:translateY(0)}.convert-panel-header{padding:16px 16px 10px}.convert-panel-content{padding:14px 16px}.convert-panel-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.confirm-dialog-backdrop{padding:12px}.actions{flex-direction:column}button,.upload{width:100%;justify-content:center}}