/* CSS transform generator */
.filter-preset-card,.filter-generator-panel{min-width:0;margin:1.4rem 0 2rem;padding:clamp(1rem,2.6vw,1.7rem);border:1px solid #bdd9d5;border-radius:22px;background:linear-gradient(145deg,#f3fbf9,#fff);box-shadow:0 14px 38px rgba(19,73,68,.08)}.filter-preset-card h2,.filter-preset-card p,.filter-generator-heading h2,.filter-generator-heading p,.filter-card-heading h3,.filter-card-heading p{margin:0}.filter-preset-card>div:first-child p,.filter-generator-heading>div>p:last-child,.filter-card-heading p{margin-top:.3rem;color:var(--color-text-muted)}.filter-preset-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.55rem;margin-top:1rem}.filter-preset-list button,.filter-action-button{box-sizing:border-box;min-width:0;min-height:42px;padding:.55rem .65rem;border:1px solid #99c2bc;border-radius:10px;background:#fff;color:#174c47;font:inherit;font-weight:800;cursor:pointer}.filter-preset-list button:hover,.filter-action-button:hover{border-color:var(--color-primary);background:#edf8f6}.filter-preset-list button:focus-visible,.filter-action-button:focus-visible,.filter-generator-panel .button:focus-visible,.filter-generator-panel input:focus-visible,.filter-generator-panel select:focus-visible{outline:3px solid #f3a712;outline-offset:2px}.filter-generator-heading,.filter-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;min-width:0}.filter-generator-heading>div,.filter-card-heading>div{min-width:0}.filter-generator-step{margin:0 0 .3rem!important;color:var(--color-primary)!important;font-size:.78rem;font-weight:900;letter-spacing:.12em}.filter-workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:1rem;margin-top:1.25rem;align-items:start}.filter-settings-column,.filter-result-column{display:grid;gap:1rem;min-width:0}.filter-generator-card{min-width:0;padding:1.1rem;border:1px solid #cae0dc;border-radius:17px;background:#fff;box-shadow:0 8px 22px rgba(21,80,73,.05)}.filter-card-heading output{flex:0 0 auto;padding:.35rem .65rem;border-radius:999px;background:#e8f5f3;color:#145f57;font-weight:900;font-variant-numeric:tabular-nums}.filter-add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.7rem;margin-top:.9rem;align-items:end}.filter-add-row label,.filter-background-field,.filter-number-field,.filter-range-field,.filter-unit-field{display:grid;min-width:0;gap:.35rem;color:#294943;font-weight:800}.filter-add-row select,.filter-background-field select,.filter-number-field input,.filter-unit-field select{box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:44px;padding:.55rem .65rem;border:1px solid #9ebdb8;border-radius:9px;background:#fff;color:#183c38;font:inherit}.filter-add-row .button{min-height:44px}.filter-empty{margin:1rem 0 0;padding:1rem;border:1px dashed #a9c9c4;border-radius:12px;background:#f7fbfa;color:var(--color-text-muted);text-align:center}.filter-item-list{display:grid;gap:.8rem;margin-top:.8rem}.filter-item-card{box-sizing:border-box;min-width:0;margin:0;padding:.85rem;border:1px solid #c9dfdb;border-radius:13px;background:#f9fcfb}.filter-item-legend{max-width:100%;padding:0 .35rem;color:#164e49;font-weight:900;overflow-wrap:anywhere}.filter-item-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}.filter-action-button{min-height:38px;padding:.4rem .65rem}.filter-action-button--danger{border-color:#e1b6b2;color:#9c2d26}.filter-action-button:disabled,.filter-preset-list button:disabled{cursor:not-allowed;opacity:.48}.filter-simple-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;min-width:0}.filter-number-control{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;min-width:0}.filter-range-field input[type="range"]{box-sizing:border-box;width:100%;max-width:100%;min-width:0;height:36px;accent-color:var(--color-primary)}.filter-control-label{font-size:.86rem}.filter-unit-field{align-content:start}.filter-background-field{width:min(150px,100%)}.filter-preview-card{overflow:hidden}.filter-preview-note{margin:.8rem 0 0;color:var(--color-text-muted);font-size:.9rem}.filter-code-card{position:sticky;top:1rem}.filter-code-card h3{margin:0}.filter-code-card pre{box-sizing:border-box;max-width:100%;margin:.75rem 0 0;padding:1rem;overflow:auto;border-radius:11px;background:#172724;color:#effaf8;font-size:.86rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.filter-value-output{max-height:180px}.filter-output-label{margin:1rem 0 0;color:var(--color-text-muted);font-size:.86rem;font-weight:800}.filter-copy-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.9rem}.filter-copy-actions .button{min-height:44px}.filter-status{min-height:1.6em;margin:.8rem 0 0;color:var(--color-text-muted);font-weight:800}.filter-status[data-status-kind="error"]{color:var(--color-danger)}.filter-status[data-status-kind="success"]{color:var(--color-primary-dark)}
.container--transform-tool{max-width:1320px}.transform-generator-panel{overflow:hidden}.transform-generator-panel input[type="range"]{margin-inline:0}.transform-order-warning{margin-top:.55rem!important;padding:.7rem .8rem;border-left:4px solid #b7791f;border-radius:7px;background:#fff8e7;color:#664d14!important}.transform-control-grid{align-items:start}.transform-origin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(92px,.42fr) minmax(0,1fr) minmax(92px,.42fr);gap:.7rem;margin-top:1rem;min-width:0}.transform-origin-grid label{display:grid;min-width:0;gap:.35rem;color:#294943;font-weight:800}.transform-origin-grid input,.transform-origin-grid select,.transform-matrix-grid input{box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:44px;padding:.55rem .65rem;border:1px solid #9ebdb8;border-radius:9px;background:#fff;color:#183c38;font:inherit}.transform-origin-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-top:.8rem}.transform-origin-presets button{box-sizing:border-box;min-width:0;min-height:40px;padding:.45rem .35rem;border:1px solid #a9c9c4;border-radius:9px;background:#f7fbfa;color:#174c47;font:inherit;font-size:.85rem;font-weight:800;cursor:pointer}.transform-origin-presets button:hover{border-color:var(--color-primary);background:#e9f6f3}.transform-origin-presets button:focus-visible,.transform-matrix-details summary:focus-visible{outline:3px solid #f3a712;outline-offset:2px}.transform-matrix-details{min-width:0;margin-top:.3rem;padding:.7rem;border:1px solid #c9dfdb;border-radius:10px;background:#fff}.transform-matrix-details summary{cursor:pointer;color:#164e49;font-weight:900}.transform-matrix-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;min-width:0;margin-top:.8rem}.transform-matrix-grid label{display:grid;min-width:0;gap:.3rem}.transform-preview-stage{position:relative;display:grid;place-items:center;box-sizing:border-box;max-width:100%;min-width:0;min-height:380px;margin-top:1rem;padding:4rem;overflow:hidden;border:1px solid #c6dcda;border-radius:14px;background:#f5faf9}.transform-preview-stage[data-preview-background="dark"]{background:#18322f}.transform-preview-stage[data-preview-background="grid"]{background-color:#fff;background-image:linear-gradient(rgba(20,107,99,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(20,107,99,.1) 1px,transparent 1px);background-size:20px 20px}.transform-preview-object{position:relative;box-sizing:border-box;display:grid;width:min(100%,260px);min-height:170px;place-items:center;padding:2.6rem 1rem 1rem;overflow:hidden;border:3px solid #0f625b;border-radius:18px;background:linear-gradient(145deg,#d8f2ee 0,#fff 56%,#f8d08b 56%,#f3a712 100%);color:#123f3b;box-shadow:0 18px 42px rgba(18,67,62,.2);will-change:transform}.transform-preview-object::after{position:absolute;right:-25px;bottom:-25px;width:72px;height:72px;border-radius:50%;background:#156f67;content:""}.transform-preview-top,.transform-preview-left{position:absolute;z-index:2;padding:.2rem .4rem;border-radius:5px;background:#164e49;color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.08em}.transform-preview-top{top:.5rem;left:50%;transform:translateX(-50%)}.transform-preview-left{top:50%;left:.5rem;transform:translateY(-50%);writing-mode:vertical-rl}.transform-preview-content{position:relative;z-index:3;display:grid;gap:.15rem;text-align:center}.transform-preview-content strong{font-size:clamp(1.05rem,4vw,1.65rem)}.transform-preview-content span{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}.transform-generator-panel [aria-invalid="true"]{border-color:var(--color-danger);background:#fff5f4}
@media(max-width:780px){.transform-origin-grid{grid-template-columns:minmax(0,1fr) minmax(78px,.35fr)}.transform-preview-stage{min-height:310px;padding:3rem 2rem}}
@media(max-width:980px){.filter-workspace{grid-template-columns:1fr}.filter-code-card{position:static}}
@media(max-width:760px){.filter-preset-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.filter-generator-heading,.filter-card-heading{align-items:stretch;flex-direction:column}.filter-generator-heading>.button,.filter-add-row .button{width:100%}.filter-add-row,.filter-simple-controls{grid-template-columns:1fr}.filter-background-field{width:100%}.filter-copy-actions .button{flex:1 1 100%}}
@media(max-width:420px){.container--transform-tool{width:min(100% - 1rem,82rem);max-width:100%;padding-inline:0}.transform-generator-panel,.transform-generator-panel .filter-workspace,.transform-generator-panel .filter-settings-column,.transform-generator-panel .filter-result-column,.transform-generator-panel .filter-generator-card,.transform-item-card,.transform-control-grid,.transform-origin-grid,.transform-matrix-grid,.transform-preview-stage,.transform-generator-panel pre{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.transform-origin-grid{grid-template-columns:minmax(0,1fr) minmax(70px,.38fr);gap:.5rem}.transform-origin-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.transform-origin-presets button{padding-inline:.2rem;overflow-wrap:anywhere}.transform-matrix-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.transform-preview-stage{min-height:250px;padding:2.25rem 1.25rem}.transform-preview-object{width:min(100%,210px);min-height:145px}.transform-preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.filter-preset-card,.filter-generator-panel{padding:.75rem;border-radius:14px}.filter-generator-card{padding:.78rem}.filter-preset-list button{padding-inline:.35rem}.filter-item-card{padding:.7rem}.filter-item-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.filter-action-button{width:100%;padding-inline:.3rem}.filter-code-card pre{padding:.75rem;font-size:.8rem}}