:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#172033;background:#f4f7ff}
*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{margin:0}.tool-shell{display:grid;gap:16px;width:100%;max-width:1120px;min-width:0;margin:auto;padding:20px}.tool-head,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;max-width:100%}.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{min-width:0;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;min-width:0;gap:8px;font-weight:700}.file-field input{display:block;width:100%;min-width:0;max-width:100%;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{min-width:0;padding:12px;border-radius:12px;background:#f5f7fc}.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(260px,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;background:conic-gradient(#283044 25%,#1b2232 0 50%,#283044 0 75%,#1b2232 0) 0/20px 20px}.canvas-wrap .hint{margin:10px 4px 0;color:#d7deed;font-size:.8rem}.controls{display:grid;min-width:0;align-content:start;gap:14px}.controls fieldset{min-width:0;border:1px solid #dfe5f2;border-radius:14px;padding:14px}.controls legend{padding:0 6px;font-weight:750}.controls label,.output-grid label{display:grid;min-width:0;gap:6px;color:#536078;font-size:.8rem}.controls input[type=text],.output-grid select{width:100%;min-width:0;padding:10px;border:1px solid #cbd4e3;border-radius:9px;font:inherit}.position-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.position-grid label{position:relative}.position-grid input{position:absolute;opacity:0}.position-grid span{display:block;text-align:center;padding:9px;border:1px solid #cbd4e3;border-radius:10px;cursor:pointer;font-size:1.1rem}.position-grid input:focus-visible+span{outline:3px solid #8c7cf5;outline-offset:2px}.position-grid input:checked+span{background:#ebe9ff;border-color:#6958df;color:#4431b0;font-weight:800}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.control-grid input[type=range],.output-grid input[type=range]{width:100%;min-width:0}.control-grid input[type=color],.output-grid input[type=color]{width:100%;height:40px;border:1px solid #cbd4e3;border-radius:9px}.primary{display:inline-block;border:0;border-radius:11px;padding:11px 16px;background:linear-gradient(135deg,#614ad9,#128ba1);color:#fff;font:inherit;font-weight:800;cursor:pointer;text-align:center}.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}.tool-head>*,.section-head>*,.panel,.controls,.controls fieldset,.controls label,.output-grid label{min-width:0}.tool-head h1,.lead,.section-head p,.notice{overflow-wrap:anywhere}
@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,.control-grid{grid-template-columns:1fr}}