:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#172033;background:#f4f7ff}
*{box-sizing:border-box}body{margin:0}.tool-shell{display:grid;gap:16px;max-width:1120px;margin:auto;padding:20px}.tool-head,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.tool-head h1{margin:4px 0 8px;font-size:clamp(1.7rem,4vw,2.55rem);line-height:1.05}.lead,.section-head p,.hint{color:#58657b}.eyebrow{margin:0;color:#5b45d7;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.privacy{white-space:nowrap;border-radius:999px;background:#e7f8f3;color:#086b56;padding:8px 12px;font-weight:700}.panel{border:1px solid #dfe5f2;border-radius:20px;background:#fff;padding:20px;box-shadow:0 9px 24px rgba(28,39,68,.06)}h2{margin:0 0 4px;font-size:1.15rem}.file-field{display:grid;gap:8px;font-weight:700}.file-field input,.controls input,.controls select,.output-grid select{font:inherit}.file-field input{padding:16px;border:1px dashed #9aa7bf;border-radius:12px}.summary-grid,.output-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}.summary-grid div{padding:12px;border-radius:12px;background:#f5f7fc;min-width:0}.summary-grid span{display:block;color:#68758b;font-size:.78rem}.summary-grid strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:20px}.canvas-wrap{min-width:0;border-radius:16px;background:#121827;padding:12px}.canvas-wrap canvas{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;margin:auto;touch-action:none;outline-offset:4px}.canvas-wrap .hint{margin:10px 4px 0;color:#d7deed;font-size:.8rem}.controls{display:grid;align-content:start;gap:14px}.controls fieldset{border:1px solid #dfe5f2;border-radius:14px;padding:14px}.controls legend{padding:0 6px;font-weight:750}.ratio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ratio-grid label{position:relative}.ratio-grid input{position:absolute;opacity:0}.ratio-grid span{display:block;text-align:center;padding:9px;border:1px solid #cbd4e3;border-radius:10px;cursor:pointer}.ratio-grid input:checked+span{background:#ebe9ff;border-color:#6958df;color:#4431b0;font-weight:800}.number-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.number-grid label,.output-grid label{display:grid;gap:6px;color:#536078;font-size:.8rem}.number-grid input,.output-grid select{width:100%;padding:9px;border:1px solid #cbd4e3;border-radius:9px}.secondary,.primary{border:0;border-radius:11px;padding:11px 16px;font:inherit;font-weight:800;cursor:pointer;text-align:center}.secondary{background:#edf0f7;color:#263147}.controls .secondary{width:100%}.primary{display:inline-block;background:linear-gradient(135deg,#614ad9,#128ba1);color:#fff}.notice{border-radius:12px;background:#f1f4fa;color:#4d5b70;padding:12px}.error{background:#fff0f0;color:#a32323;border:1px solid #ffcaca}.result-grid{display:grid;grid-template-columns:minmax(180px,1fr) 1fr;gap:18px}.result img{max-width:100%;max-height:420px;border:1px solid #dfe5f2;border-radius:12px;background:conic-gradient(#eee 25%,#fff 0 50%,#eee 0 75%,#fff 0) 0/20px 20px}.result dl{margin:0}.result dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #edf0f5;padding:10px 0}.result dt{color:#647188}.result dd{margin:0;font-weight:800}.download{margin-top:16px;text-decoration:none}.output-grid{align-items:end}.output-grid input[type=range]{width:100%}.output-grid input[type=color]{width:100%;height:40px;border:1px solid #cbd4e3;border-radius:9px}
@media(max-width:760px){.tool-shell{padding:12px}.tool-head,.section-head{display:block}.privacy{display:inline-block;margin-top:8px}.summary-grid,.output-grid{grid-template-columns:1fr 1fr}.editor-grid,.result-grid{grid-template-columns:1fr}.canvas-wrap{padding:8px}.panel{padding:16px}}
@media(max-width:430px){.summary-grid,.output-grid{grid-template-columns:1fr}.number-grid{grid-template-columns:1fr 1fr}}
html,body{max-width:100%;overflow-x:hidden}.tool-shell{width:100%;min-width:0}.tool-shell>*,.tool-head>*,.section-head>*,.panel,.file-field,.controls,.controls fieldset,.number-grid label,.output-grid label{min-width:0}.file-field input{display:block;width:100%;min-width:0;max-width:100%}.tool-head,.section-head{max-width:100%}.tool-head h1,.lead,.section-head p,.notice{overflow-wrap:anywhere}.ratio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.number-grid input,.output-grid select{min-width:0}