@layer legacy{.tool-hero{padding-bottom:24px}.tool{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:24px;gap:16px;padding:24px;display:grid}.drop{border:2px dashed var(--border);background:var(--bg);text-align:center;cursor:pointer;border-radius:18px;place-items:center;gap:6px;padding:40px 16px;display:grid}.drop strong{color:var(--accent);font-size:18px}.drop span{color:var(--muted);font-size:15px}.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}.drop:focus-within{outline:3px solid var(--accent);outline-offset:2px}.drop[data-error]:after{content:attr(data-error);color:var(--danger,#c22a2a);font-weight:600}.tool-body{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:24px;display:grid}.tool-body[hidden],.tool-result[hidden],.tool-progress[hidden]{display:none}.tool-body-narrow{grid-template-columns:minmax(0,1fr);max-width:640px}.tool-preview,.tool-result video,.tool-result img{object-fit:contain;background:#000;border-radius:12px;width:100%;height:auto;max-height:480px;display:block}.tool-result img{background:repeating-conic-gradient(#d9dee8 0 25%, #fff 0 50%) 0 0 / 16px 16px}.tool-options{gap:14px;display:grid}.tool-options label,.tool-options legend{gap:6px;font-weight:600;display:grid}.tool-options input[type=number],.tool-options select{border:1px solid var(--border);background:var(--bg);width:100%;min-height:42px;color:var(--text);font:inherit;border-radius:10px;padding:0 12px;font-weight:400}.tool-options input[type=range]{width:100%;accent-color:var(--accent)}.tool-options fieldset{border:0;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;display:flex}.tool-options legend{margin-bottom:6px}.tool-options .choice{align-items:center;gap:8px;font-weight:400;display:inline-flex}.tool-options .choice input{accent-color:var(--accent)}.row-2{grid-template-columns:1fr 1fr;gap:12px;display:grid}.tool-progress progress{width:100%;height:10px;accent-color:var(--accent)}.tool-status:empty,.tool-error:empty{display:none}.tool-status,.tool-error{margin:0}.tool-error{color:var(--danger,#c22a2a);font-weight:600}.tool-result{border-top:1px solid var(--border);grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:24px;padding-top:8px;display:grid}.tool-result p{margin:0 0 12px}.beautify{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.canvas-wrap{background:repeating-conic-gradient(#d9dee8 0 25%, #fff 0 50%) 0 0 / 16px 16px;border-radius:14px;place-items:center;padding:12px;display:grid}.canvas-wrap canvas{max-width:100%;height:auto;max-height:520px;display:block}.swatches{gap:8px!important}.swatch{cursor:pointer;position:relative}.swatch input{opacity:0;position:absolute}.swatch span:not(.visually-hidden){border:2px solid var(--border);border-radius:10px;width:36px;height:36px;display:block}.swatch .transparent{background:repeating-conic-gradient(#d9dee8 0 25%, #fff 0 50%) 0 0 / 10px 10px}.swatch input:checked+span{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.swatch input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}@media (width<=860px){.tool{padding:16px}.tool-body,.beautify,.tool-result{grid-template-columns:minmax(0,1fr)}}}