/* CSS filter generator */
.container--filter-tool{max-width:1320px}.filter-tool-intro{max-width:940px}.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-panel{overflow:hidden}.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,.filter-color-field,.filter-hex-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,.filter-hex-field 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}.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,.filter-shadow-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-color-control{display:grid;grid-template-columns:minmax(92px,.65fr) minmax(0,1fr);gap:.65rem;min-width:0}.filter-color-field input[type="color"]{box-sizing:border-box;width:100%;min-width:0;height:44px;padding:.2rem;border:1px solid #9ebdb8;border-radius:9px;background:#fff}.filter-generator-panel [aria-invalid="true"]{border-color:var(--color-danger);background:#fff5f4}.filter-background-field{width:min(150px,100%)}.filter-preview-card{overflow:hidden}.filter-preview-stage{display:grid;place-items:center;min-width:0;min-height:300px;margin-top:1rem;padding:clamp(.75rem,3vw,1.5rem);overflow:hidden;border:1px solid #c6dcda;border-radius:14px;background:#f5faf9}.filter-preview-stage[data-preview-background="dark"]{background:#18322f}.filter-preview-stage[data-preview-background="checker"]{background-color:#fff;background-image:linear-gradient(45deg,#dce9e7 25%,transparent 25%),linear-gradient(-45deg,#dce9e7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce9e7 75%),linear-gradient(-45deg,transparent 75%,#dce9e7 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.filter-preview-object{position:relative;isolation:isolate;display:grid;place-items:center;width:min(100%,360px);aspect-ratio:16/10;overflow:hidden;border-radius:24px;background:linear-gradient(135deg,#0d746b,#1f8c82 48%,#f3a712);box-shadow:0 18px 40px rgba(18,67,62,.2)}.filter-preview-orb{position:absolute;border-radius:50%;mix-blend-mode:screen}.filter-preview-orb--one{top:-15%;left:-5%;width:55%;aspect-ratio:1;background:#ffd966}.filter-preview-orb--two{right:-12%;bottom:-22%;width:65%;aspect-ratio:1;background:#5fd2ff}.filter-preview-orb--three{top:12%;right:12%;width:28%;aspect-ratio:1;background:#f26b8a}.filter-preview-content{position:relative;z-index:2;display:grid;gap:.25rem;padding:1rem 1.2rem;border:1px solid rgba(255,255,255,.65);border-radius:14px;background:rgba(255,255,255,.82);color:#123f3b;text-align:center;box-shadow:0 8px 24px rgba(17,60,56,.14)}.filter-preview-content strong{font-size:clamp(1.2rem,5vw,2rem)}.filter-preview-content span{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase}.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)}.filter-tool-article code{overflow-wrap:anywhere;word-break:break-word}
@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{width:100%}.filter-add-row{grid-template-columns:1fr}.filter-add-row .button{width:100%}.filter-simple-controls,.filter-shadow-controls{grid-template-columns:1fr}.filter-background-field{width:100%}.filter-preview-stage{min-height:240px}.filter-copy-actions .button{flex:1 1 100%}}
@media(max-width:420px){.container--filter-tool{width:min(100% - 1rem,82rem);padding-inline:0}.filter-preset-card,.filter-generator-panel{padding:.75rem;border-radius:14px}.filter-generator-card{padding:.78rem}.filter-preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}.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-color-control{grid-template-columns:1fr}.filter-preview-stage{min-height:210px;padding:.6rem}.filter-preview-object{border-radius:17px}.filter-preview-content{padding:.75rem}.filter-code-card pre{padding:.75rem;font-size:.8rem}}