:root{color-scheme:light;--ink:#13253a;--muted:#64788d;--blue:#246bfe;--line:#cdddeb;--paper:#f4f9fd}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 82% 8%,#cbe8ff 0,transparent 28%),var(--paper);color:var(--ink);font-family:"Segoe UI","Microsoft YaHei",sans-serif}.shell{width:min(1120px,calc(100% - 32px));margin:auto;padding:36px 0 28px}header{max-width:780px}.eyebrow{font:700 11px/1.4 Consolas,monospace;letter-spacing:.18em;color:var(--blue)}h1{margin:9px 0 10px;font-size:clamp(26px,4vw,42px);line-height:1.08;letter-spacing:-.04em}h1 span{color:var(--blue)}.intro{max-width:620px;color:var(--muted);font-size:14px;line-height:1.7}.workbench{display:grid;grid-template-columns:1.08fr .92fr;margin-top:24px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 26px 70px rgba(46,89,125,.12);overflow:hidden}.controls{padding:38px}.controls>label,legend,.filename,.quality{display:block;margin-bottom:10px;font-size:13px;font-weight:700}input,button{font:inherit}.url-row{display:flex;gap:10px}.url-row input,.filename input{width:100%;height:50px;border:1px solid var(--line);border-radius:12px;padding:0 14px;color:var(--ink);outline:none}.url-row input:focus,.filename input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #246bfe1c}button{border:0;cursor:pointer;font-weight:700}.secondary{flex:none;border:1px solid var(--line);border-radius:12px;background:#edf6fc;padding:0 18px;color:var(--ink)}.message{min-height:20px;margin:10px 0 26px;color:var(--muted);font-size:12px}.message.error{color:#c23838}.message.success{color:#16714f}fieldset{margin:0 0 22px;padding:0;border:0}.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.formats input{position:absolute;opacity:0}.formats span{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer}.formats small{color:var(--muted);font-size:10px;font-weight:400}.formats input:checked+span{border-color:var(--blue);background:#edf4ff;box-shadow:inset 0 0 0 1px var(--blue)}.filename{margin:0 0 20px}.filename input{display:block;margin-top:9px}.quality{margin:0 0 20px}.quality output{float:right;color:var(--blue)}.quality input{width:100%;margin-top:14px;accent-color:var(--blue)}.primary{width:100%;height:54px;border-radius:14px;background:var(--ink);color:#fff;box-shadow:0 10px 24px #13253a28}.primary:hover:not(:disabled){background:var(--blue)}.primary:disabled{cursor:not-allowed;opacity:.4}.primary span{float:right;font-size:20px}.preview-wrap{min-height:470px;background-color:#e7f1f8;background-image:linear-gradient(45deg,#d9e8f2 25%,transparent 25%),linear-gradient(-45deg,#d9e8f2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9e8f2 75%),linear-gradient(-45deg,transparent 75%,#d9e8f2 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;display:grid;place-items:center;padding:38px}.empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted)}.empty strong{color:var(--ink)}.frame-icon{display:grid;place-items:center;width:72px;height:72px;margin-bottom:8px;border:1px dashed #7f9bb2;border-radius:20px;font-size:34px}.preview{width:100%;text-align:center}.preview img{display:block;max-width:100%;max-height:390px;margin:auto;border-radius:10px;box-shadow:0 14px 45px #27445b38}.meta{display:flex;justify-content:center;gap:8px;margin-top:16px}.meta span{border-radius:99px;background:#fff;padding:6px 10px;font:600 11px Consolas,monospace}footer{text-align:center;padding-top:24px;color:var(--muted);font-size:12px}@media(max-width:760px){.shell{padding-top:24px}.workbench{grid-template-columns:1fr}.controls{padding:24px}.preview-wrap{min-height:340px;padding:24px}.url-row{flex-direction:column}.secondary{height:46px}.formats{grid-template-columns:1fr}h1{font-size:28px}}@media(prefers-reduced-motion:no-preference){.primary,.secondary,.formats span{transition:.18s ease}}