:root{--bg:#f7f8fb;--card:#fff;--ink:#14161f;--mut:#5b6170;--line:#e3e6ee;--acc:#4f46e5;--acc2:#eef0ff;--r:14px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{color:var(--ink);background:var(--bg);margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif}a{color:var(--acc)}.wrap{max-width:960px;margin:0 auto;padding:0 16px}header.top{border-bottom:1px solid var(--line);background:#fff}header.top .wrap{justify-content:space-between;align-items:center;height:56px;display:flex}.brand{color:var(--ink);align-items:center;gap:8px;font-weight:700;text-decoration:none;display:flex}.brand img{width:26px;height:26px}.lang{font-size:14px}.hero{text-align:center;padding:32px 0 8px}h1{margin:0 0 8px;font-size:clamp(28px,5vw,42px);line-height:1.15}.lead{color:var(--mut);max-width:640px;margin:0 auto}.grid{grid-template-columns:1fr;gap:16px;margin:24px 0;display:grid}@media (width>=800px){.grid{grid-template-columns:1fr 1fr}}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}.card h2{margin:0 0 12px;font-size:19px}.row{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}label{color:var(--mut);margin-bottom:4px;font-size:13px;font-weight:600;display:block}.field{flex:1;min-width:110px}input,select{width:100%;font:inherit;border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:10px;padding:10px 12px;font-size:18px}input:focus,select:focus{outline:2px solid var(--acc);border-color:#0000}.times{color:var(--mut);padding-bottom:12px}.result{justify-content:space-between;align-items:center;gap:16px;margin-top:16px;display:flex}.big{color:var(--acc);font-size:40px;font-weight:800;line-height:1}.meta{color:var(--mut);font-size:14px}.preview-wrap{background:var(--acc2);border-radius:10px;flex:0 0 120px;justify-content:center;align-items:center;width:120px;height:120px;margin-left:auto;display:flex}#preview{background:var(--acc);border-radius:4px;transition:all .15s}code,.code{background:#f1f2f6;border-radius:6px;padding:2px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}.codebar{align-items:center;gap:8px;margin-top:12px;display:flex}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:14px}button:hover{border-color:var(--acc)}button[aria-pressed=true]{background:var(--acc);color:#fff;border-color:var(--acc)}.presets{flex-wrap:wrap;gap:6px;margin:12px 0;display:flex}.err{color:#c0262d;min-height:1em;font-size:13px}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:6px 8px}th{color:var(--mut);font-size:13px}#drop{border:2px dashed var(--line);text-align:center;color:var(--mut);border-radius:12px;padding:20px}#drop.over{border-color:var(--acc);background:var(--acc2)}#drop input{display:none}#drop label{color:var(--acc);cursor:pointer;margin-top:8px;font-size:15px;display:inline-block}.content{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin:24px 0;padding:8px 24px 24px}.content h2{margin-top:28px}details{border-bottom:1px solid var(--line);padding:12px 0}summary{cursor:pointer;font-weight:600}footer{color:var(--mut);text-align:center;padding:24px 0 40px;font-size:14px}