.tool-page{display: grid;gap: 24px;padding-bottom: 24px}@media (min-width: 1200px){.tool-page{grid-template-columns: minmax(0,1fr) 280px;align-items: start}.tool-page__aside{position: sticky;top: 88px;padding-top: 24px}}.tool-page__main{min-width: 0}.tool-page .page-header{max-width: none;padding-bottom: 12px}.local-note{display: inline-flex;align-items: center;gap: 8px;margin: 0;padding: 5px 14px;border: 1px solid var(--border);border-radius: 999px;background: var(--success-soft);color: var(--success);font-size: 0.875rem;font-weight: 600}.local-note .icon{width: 16px;height: 16px}.tool-panel{position: relative;overflow: hidden;padding: 18px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--surface);box-shadow: var(--shadow)}.tool-panel::before{content: "";position: absolute;left: 0;right: 0;top: 0;height: 3px;background: var(--brand-gradient)}@media (min-width: 768px){.tool-panel{padding: 24px}}.tool-options{display: flex;flex-wrap: wrap;align-items: center;gap: 10px 20px;padding-bottom: 14px;margin-bottom: 14px;border-bottom: 1px solid var(--border)}.field{display: inline-flex;align-items: center;gap: 8px}.field__label{font-weight: 600;font-size: 0.9rem}.field__control{min-height: 40px;padding: 6px 10px;border: 1px solid var(--border-strong);border-radius: var(--radius-sm);background: var(--surface);color: var(--text);font: inherit;font-size: 0.95rem}.check{display: inline-flex;align-items: center;gap: 8px;min-height: 40px;font-size: 0.95rem;cursor: pointer}.check input{width: 18px;height: 18px;margin: 0;accent-color: var(--primary)}.tool-io{display: grid;gap: 14px;grid-template-columns: minmax(0,1fr);grid-template-areas: "input" "actions" "output"}.pane--input{grid-area: input}.pane--output{grid-area: output}.tool-actions{grid-area: actions}@media (min-width: 992px){.tool-io{grid-template-columns: minmax(0,1fr) minmax(0,1fr);grid-template-areas: "input output" "actions actions"}}.pane{display: flex;flex-direction: column;min-width: 0}.pane__head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 4px 8px;margin-bottom: 6px}.pane__title{font-weight: 650}.pane__tools{display: flex;flex-wrap: wrap;gap: 2px;margin-right: -6px}.code-area{display: block;width: 100%;min-height: 160px;height: 220px;padding: 12px;resize: vertical;border: 1px solid var(--border-strong);border-radius: var(--radius-sm);background: var(--code-bg);color: var(--text);font-family: var(--mono);font-size: 0.875rem;line-height: 1.55;tab-size: 4;white-space: pre;overflow: auto;overflow-wrap: normal}.code-area:focus{outline: none;border-color: var(--focus);box-shadow: 0 0 0 3px var(--primary-soft)}.code-area[aria-invalid="true"]{border-color: var(--danger)}.code-area[readonly]{background: var(--surface-2)}.code-area::placeholder{color: var(--text-muted);opacity: 1}@media (min-width: 992px){.code-area{height: 420px}}.pane__meta{min-height: 1.5em;margin-top: 4px;color: var(--text-muted);font-size: 0.8rem}.file-btn{position: relative;overflow: hidden}.file-btn:focus-within{outline: 3px solid var(--focus);outline-offset: 2px}.file-btn__input{position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer}.tool-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 10px 16px}.tool-actions__buttons{display: flex;flex-wrap: wrap;gap: 10px}.tool-actions__buttons .btn--primary{min-width: 160px}.btn__shortcut{padding: 1px 6px;border-radius: 4px;background: rgba(255,255,255,0.18);font-size: 0.72rem;font-weight: 500}@media (pointer: coarse){.btn__shortcut{display: none}}.tool-status{flex: 1 1 260px;margin: 0;font-size: 0.925rem}.tool-status:empty{display: none}.tool-status.is-success,.tool-status.is-error,.tool-status.is-info{padding: 8px 12px;border-radius: var(--radius-sm)}.tool-status.is-success{background: var(--success-soft);color: var(--success)}.tool-status.is-error{background: var(--danger-soft);color: var(--danger);font-weight: 500}.tool-status.is-info{background: var(--info-soft);color: var(--info)}.tool-content{padding-top: 32px;max-width: none}.tool-content section{max-width: 820px}.steps li{padding-left: 4px}.related{padding-top: 32px}.tool-options--grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(200px,1fr));align-items: end}.field--stack{display: flex;flex-direction: column;align-items: stretch;gap: 4px}.field--stack .field__control{width: 100%}.field--wide{grid-column: 1 / -1}.field__control--num{width: 7.5em}.field__hint{color: var(--text-muted);font-size: 0.8rem}textarea.field__control{min-height: 96px;font-family: var(--mono);font-size: 0.875rem;resize: vertical}.tool-io--output-only,.tool-io--output-only-wide{grid-template-areas: "actions" "output"}@media (min-width: 992px){.tool-io--output-only{grid-template-columns: minmax(0,1fr);grid-template-areas: "actions" "output"}}.tool-results{margin-top: 16px;min-width: 0}.tool-results:empty{display: none}.tool-results__title{margin: 0 0 8px;font-size: 1rem;font-weight: 650}.table-scroll{max-width: 100%;overflow-x: auto}.result-table{width: 100%;border-collapse: collapse;font-size: 0.925rem}.result-table th,.result-table td{padding: 8px 10px;border-bottom: 1px solid var(--border);text-align: left;vertical-align: top}.result-table thead th{background: var(--surface-2);font-weight: 650;white-space: nowrap}.result-table tbody th{font-weight: 600;white-space: nowrap}.result-table td{font-family: var(--mono);font-size: 0.875rem;overflow-wrap: anywhere}.stat-grid{display: grid;gap: 10px;grid-template-columns: repeat(auto-fill,minmax(140px,1fr))}.stat{padding: 12px 14px;border: 1px solid var(--border);border-radius: var(--radius-sm);background: var(--surface-2)}.stat__value{display: block;font-size: 1.375rem;font-weight: 800;letter-spacing: -0.02em;font-variant-numeric: tabular-nums;overflow-wrap: anywhere}.stat__label{display: block;color: var(--text-muted);font-size: 0.8rem;font-weight: 600;letter-spacing: 0.02em;text-transform: uppercase}.troubleshooting{margin: 0}.troubleshooting__problem{margin-top: 18px;font-weight: 600;color: var(--text)}.troubleshooting__problem:first-child{margin-top: 0}.troubleshooting__solution{margin: 6px 0 0;padding-left: 14px;border-left: 2px solid var(--border);color: var(--text-muted)}.converters-section + .converters-section{margin-top: 20px;padding-top: 16px;border-top: 1px solid var(--border)}.converters-section__title{margin: 0 0 10px;font-size: 1.05rem;font-weight: 650}.converters-section .tool-options{margin-bottom: 0;padding-bottom: 0;border-bottom: 0}.converters-section .tool-results{margin-top: 12px}.converters-field-row{display: flex;flex-wrap: wrap;gap: 8px;align-items: stretch}.converters-field-row .field__control{flex: 1 1 140px;min-width: 0}.converters-value{display: inline-flex;flex-wrap: wrap;align-items: center;gap: 2px 8px;max-width: 100%}.converters-value__text{overflow-wrap: anywhere}.converters-copy{min-height: 28px;padding: 2px 8px;font-family: var(--font);font-size: 0.8rem}.converters-stats{margin-bottom: 4px}.converters-stat{display: flex;flex-direction: column;align-items: flex-start;gap: 2px;min-width: 0}.converters-stat .stat__value{font-size: 1.2rem;max-width: 100%}.converters-stat .converters-copy{margin: 2px 0 0 -8px}.converters-stat__hint{color: var(--text-muted);font-size: 0.8rem}.converters-message{margin: 0;padding: 8px 12px;border-radius: var(--radius-sm);background: var(--info-soft);color: var(--info);font-size: 0.925rem}.converters-message--error{background: var(--danger-soft);color: var(--danger);font-weight: 500}.converters-message--warning{background: var(--danger-soft);color: var(--danger)}.converters-note{margin: 8px 0 0;color: var(--text-muted);font-size: 0.875rem}.converters-now{display: flex;flex-wrap: wrap;align-items: flex-start;gap: 10px}.converters-now .stat-grid{flex: 1 1 280px}.result-table td.converters-formula,.converters-formula{font-family: var(--mono);white-space: nowrap}.tool-io.encoding-io--single{grid-template-columns: minmax(0,1fr);grid-template-areas: "input" "actions"}@media (min-width: 992px){.tool-io.encoding-io--single{grid-template-columns: minmax(0,1fr);grid-template-areas: "input" "actions"}.encoding-io--single .code-area{height: 200px}}.encoding-radios{display: inline-flex;flex-wrap: wrap;align-items: center;gap: 4px 16px}.encoding-radios .field__label{margin-right: 4px}.encoding-file{justify-content: flex-start}.encoding-file__drop{display: flex;flex-direction: column;align-items: flex-start;gap: 10px;min-height: 160px;padding: 16px;border: 2px dashed var(--border-strong);border-radius: var(--radius-sm);background: var(--code-bg)}.encoding-file__drop.is-dragging{border-color: var(--primary);background: var(--primary-soft)}.encoding-file__name{margin: 0;font-weight: 600;overflow-wrap: anywhere}.encoding-file__meta{margin: 0;color: var(--text-muted);font-size: 0.875rem;overflow-wrap: anywhere}@media (min-width: 992px){.encoding-file__drop{min-height: 420px}}.encoding-notice{margin: 0 0 12px;padding: 10px 12px;border-radius: var(--radius-sm);background: var(--info-soft);color: var(--info);font-size: 0.925rem}.encoding-notice--warning{background: var(--danger-soft);color: var(--danger);font-weight: 500}.encoding-notice strong{font-weight: 700}.encoding-binary{display: flex;flex-wrap: wrap;align-items: flex-start;gap: 14px;padding: 14px;border: 1px solid var(--border);border-radius: var(--radius-sm);background: var(--surface-2)}.encoding-binary__info{flex: 1 1 220px;min-width: 0}.encoding-binary__info p{margin: 0 0 8px;overflow-wrap: anywhere}.encoding-binary__preview{display: block;max-width: 100%;max-height: 240px;border: 1px solid var(--border);border-radius: var(--radius-sm);background: var(--surface)}.jwt-grid{display: grid;gap: 16px;grid-template-columns: minmax(0,1fr)}@media (min-width: 992px){.jwt-grid{grid-template-columns: minmax(0,1fr) minmax(0,1fr)}}.jwt-part{min-width: 0}.jwt-part__head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 4px 8px;margin-bottom: 6px}.jwt-part__title{margin: 0;font-size: 1rem;font-weight: 650}.jwt-json{margin: 0;padding: 12px;max-height: 420px;overflow: auto;border: 1px solid var(--border);border-radius: var(--radius-sm);background: var(--code-bg);color: var(--text);font-family: var(--mono);font-size: 0.875rem;line-height: 1.55;white-space: pre}.jwt-section{margin-top: 18px}.jwt-time{display: block;font-family: var(--font);font-size: 0.85rem;color: var(--text-muted)}.jwt-time--expired,.jwt-time--pending,.jwt-time--future,.jwt-time--problem{color: var(--danger);font-weight: 600}.jwt-time--valid{color: var(--success);font-weight: 600}.jwt-claim-desc{display: block;margin-top: 2px;color: var(--text-muted);font-weight: 400;font-size: 0.825rem;white-space: normal}.result-table tbody th .jwt-claim-desc{white-space: normal}.gen-fields{padding-bottom: 14px;margin-bottom: 14px;border-bottom: 1px solid var(--border)}.gen-fields__title{margin: 0 0 8px;font-size: 1rem;font-weight: 650}.gen-fields__list{margin: 0 0 10px;padding: 0;list-style: none;display: grid;gap: 10px}.gen-field{display: grid;grid-template-columns: minmax(0,1fr);gap: 8px;padding: 10px;border: 1px solid var(--border);border-radius: var(--radius-sm);background: var(--surface-2)}.gen-field .field__control{background: var(--surface)}.gen-field__remove{justify-self: start}@media (min-width: 640px){.gen-field{grid-template-columns: minmax(0,1fr) minmax(0,1fr);align-items: end}}@media (min-width: 992px){.gen-field{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) auto;padding: 8px 10px}.gen-field__remove{justify-self: end}}.gen-fields__actions{display: flex;flex-wrap: wrap;align-items: center;gap: 8px 12px}.gen-strength{margin-top: 14px}.gen-strength__bar{height: 8px;margin-top: 10px;border-radius: 999px;background: var(--surface-3);overflow: hidden}.gen-strength__fill{display: block;height: 100%;border-radius: inherit;background: var(--danger)}.gen-strength__fill.is-reasonable{background: var(--info)}.gen-strength__fill.is-strong{background: var(--success)}.gen-strength__note{margin: 8px 0 0;color: var(--text-muted);font-size: 0.85rem}.json-io--input-only{grid-template-areas: "input" "actions"}@media (min-width: 992px){.json-io--input-only{grid-template-columns: minmax(0,1fr);grid-template-areas: "input" "actions"}}.json-results__section + .json-results__section{margin-top: 20px}.json-error-context{margin: 8px 0 0;padding: 10px 12px;max-width: 100%;overflow-x: auto;border: 1px solid var(--danger);border-radius: var(--radius-sm);background: var(--code-bg);color: var(--text);font-family: var(--mono);font-size: 0.875rem;line-height: 1.55;white-space: pre}.sql-cols{padding-bottom: 14px;margin-bottom: 14px;border-bottom: 1px solid var(--border);min-width: 0}.sql-cols__head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 4px 8px;margin-bottom: 8px}.sql-cols__title{margin: 0;font-size: 1rem;font-weight: 650}.sql-cols__tools{display: flex;flex-wrap: wrap;gap: 2px;margin-right: -6px}.sql-cols__list{display: grid;gap: 10px;min-width: 0}.sql-cols__row{min-width: 0;margin: 0;padding: 8px 12px 10px;border: 1px solid var(--border);border-radius: var(--radius-sm);background: var(--surface-2)}.sql-cols__legend{padding: 0 4px;color: var(--text-muted);font-size: 0.825rem;font-weight: 600}.sql-cols__body{display: flex;flex-wrap: wrap;align-items: flex-end;gap: 6px 16px;min-width: 0}.sql-cols__fields{display: grid;flex: 1 1 100%;gap: 8px;grid-template-columns: repeat(auto-fill,minmax(115px,1fr));min-width: 0}.sql-cols__fields .field{min-width: 0}.sql-cols__fields .field__control{min-width: 0;background: var(--surface)}.sql-cols__fields .field__control:disabled{background: var(--surface-3);color: var(--text-muted)}.sql-cols__flags{display: flex;flex-wrap: wrap;gap: 0 16px}.sql-cols__flags .check{min-height: 36px}.sql-cols__flags input:disabled + span{color: var(--text-muted)}.sql-cols__buttons{display: flex;flex-wrap: wrap;gap: 2px;margin-left: auto}.sql-cols__footer{display: flex;flex-wrap: wrap;align-items: center;gap: 6px 16px;margin-top: 10px}.sql-cols__footer .field__hint{flex: 1 1 260px;margin: 0}@media (min-width: 992px){.sql-cols__fields{flex: 1 1 520px;grid-template-columns: minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr)}}.text-split{display: grid;gap: 14px;grid-template-columns: minmax(0,1fr)}@media (min-width: 992px){.text-split{grid-template-columns: minmax(0,3fr) minmax(0,2fr);align-items: start}}.text-split > .pane--input,.text-diff__inputs > .pane--input{grid-area: auto}.text-split .stat-grid{grid-template-columns: repeat(auto-fill,minmax(130px,1fr))}.text-note{margin: 8px 0 0;color: var(--text-muted);font-size: 0.825rem}.text-counter__actions{margin-top: 14px}.text-meter{display: block;min-width: 80px;height: 8px;border-radius: 999px;background: var(--surface-3);overflow: hidden}.text-meter__fill{display: block;height: 100%;width: 0;background: var(--primary)}.text-meter.is-over .text-meter__fill{background: var(--danger)}.text-over{color: var(--danger);font-weight: 600}.text-sms{margin-top: 16px}.text-cases{display: flex;flex-wrap: wrap;gap: 8px;margin: 0;padding: 0;border: 0;min-width: 0}.text-cases legend{width: 100%;margin-bottom: 4px;padding: 0;font-weight: 600;font-size: 0.9rem}.text-chip{position: relative;display: inline-flex}.text-chip input{position: absolute;opacity: 0;width: 1px;height: 1px}.text-chip span{display: inline-flex;align-items: center;min-height: 36px;padding: 4px 12px;border: 1px solid var(--border-strong);border-radius: 999px;background: var(--surface);color: var(--text);font-family: var(--mono);font-size: 0.875rem;cursor: pointer}.text-chip span:hover{background: var(--surface-2)}.text-chip input:checked + span{background: var(--primary);border-color: var(--primary);color: var(--on-primary)}.text-chip input:focus-visible + span{outline: 3px solid var(--focus);outline-offset: 2px}.text-options-row{display: flex;flex-wrap: wrap;align-items: center;gap: 10px 20px}.text-diff__inputs{display: grid;gap: 14px;grid-template-columns: minmax(0,1fr);margin-bottom: 14px}@media (min-width: 768px){.text-diff__inputs{grid-template-columns: minmax(0,1fr) minmax(0,1fr)}}.text-diff__output{margin-top: 16px}.text-diff__summary{display: flex;flex-wrap: wrap;gap: 8px 16px;margin: 0 0 10px;font-size: 0.925rem}.text-diff__badge{padding: 2px 10px;border-radius: 999px;background: var(--surface-2);font-variant-numeric: tabular-nums}.text-diff__badge--add{background: var(--success-soft);color: var(--success)}.text-diff__badge--del{background: var(--danger-soft);color: var(--danger)}.text-diff__scroll{max-height: 70vh;overflow: auto;border: 1px solid var(--border);border-radius: var(--radius-sm)}.text-diff-table{width: 100%;border-collapse: collapse;font-family: var(--mono);font-size: 0.825rem;line-height: 1.5}.text-diff-table--split{min-width: 640px;table-layout: fixed}.text-diff-table--inline{min-width: 420px}.text-diff-table th{position: sticky;top: 0;padding: 6px 8px;background: var(--surface-2);font-family: var(--font);font-weight: 650;text-align: left;white-space: nowrap;z-index: 1}.text-diff-table td{padding: 1px 8px;vertical-align: top}.text-diff-table--split col.text-diff__col-num{width: 4.5em}.text-diff-table--inline col.text-diff__col-num{width: 4.5em}.text-diff-table--inline col.text-diff__col-sign{width: 2em}.text-diff__num{color: var(--text-muted);text-align: right;user-select: none;font-variant-numeric: tabular-nums}.text-diff__code{white-space: pre-wrap;overflow-wrap: anywhere}.text-diff__sign{user-select: none;text-align: center}.text-diff__code.is-del,.text-diff__num.is-del,.text-diff__sign.is-del{background: var(--danger-soft)}.text-diff__code.is-ins,.text-diff__num.is-ins,.text-diff__sign.is-ins{background: var(--success-soft)}.text-diff__code.is-empty{background: var(--surface-2)}.text-diff__word{text-decoration: none;border-radius: 2px}del.text-diff__word{background: var(--danger-soft);box-shadow: inset 0 -2px 0 var(--danger);background: color-mix(in srgb,var(--danger) 22%,transparent)}ins.text-diff__word{background: var(--success-soft);box-shadow: inset 0 -2px 0 var(--success);background: color-mix(in srgb,var(--success) 22%,transparent)}.text-diff__skip td{padding: 4px 8px;background: var(--surface-2);color: var(--text-muted);font-family: var(--font);text-align: center}.text-diff__hint{color: var(--text-muted);font-family: var(--font);font-size: 0.8rem}.text-diff__code:empty::before{content: " "}.text-endings{margin: 10px 0 0;font-size: 0.9rem}.text-endings strong{font-weight: 650}.web-preview{margin-bottom: 14px;min-width: 0}.web-preview__head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 4px 12px;margin-bottom: 8px}.web-preview__head .tool-results__title{margin: 0}.web-counter{font-size: 0.8rem;color: var(--text-muted)}.web-counter.is-good{color: var(--success)}.web-counter.is-long{color: var(--danger)}.web-warnings{margin: 0 0 14px;padding: 0;list-style: none}.web-warnings:empty{display: none}.web-warnings li{margin-top: 6px;padding: 6px 12px;border-radius: var(--radius-sm);background: var(--info-soft);color: var(--info);font-size: 0.9rem}.web-note{margin: 12px 0 0;padding: 8px 12px;border-radius: var(--radius-sm);background: var(--info-soft);color: var(--info);font-size: 0.925rem}.web-note.is-warning{background: var(--danger-soft);color: var(--danger)}.web-serp .is-placeholder,.web-og .is-placeholder{color: var(--text-muted);font-style: italic}.web-serp{max-width: 600px;padding: 12px 16px;border: 1px solid var(--border);border-radius: var(--radius-sm);background: var(--surface);font-family: Arial,var(--font);overflow-wrap: anywhere}.web-serp__url{color: var(--text-muted);font-size: 0.85rem;line-height: 1.4}.web-serp__title{margin: 2px 0 4px;color: var(--primary);font-size: 1.25rem;line-height: 1.3}.web-serp__description{color: var(--text);font-size: 0.875rem;line-height: 1.55}.web-og{max-width: 520px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--surface-2);overflow: hidden}.web-og--summary{display: flex;align-items: stretch}.web-og__image{display: flex;align-items: center;justify-content: center;background: var(--surface-3);overflow: hidden}.web-og--large .web-og__image{aspect-ratio: 1.91 / 1}.web-og--summary .web-og__image{flex: 0 0 120px;min-height: 120px}.web-og__image img{display: block;width: 100%;height: 100%;object-fit: cover}.web-og__image.is-empty{padding: 12px;color: var(--text-muted);font-size: 0.85rem;text-align: center}.web-og__body{min-width: 0;padding: 10px 14px 12px;overflow-wrap: anywhere}.web-og__domain{color: var(--text-muted);font-size: 0.75rem;text-transform: uppercase;letter-spacing: 0.02em}.web-og__title{margin-top: 2px;font-weight: 650;line-height: 1.35}.web-og__description{margin-top: 2px;color: var(--text-muted);font-size: 0.875rem;line-height: 1.45}.web-robots{display: grid;gap: 12px;justify-items: start;margin-bottom: 14px}.web-robots [data-robots-groups]{display: grid;gap: 12px;width: 100%}.web-robots__group{position: relative;min-width: 0;margin: 0;padding: 10px 14px 14px;border: 1px solid var(--border);border-radius: var(--radius-sm);background: var(--surface-2)}.web-robots__legend{padding: 0 6px;font-weight: 650}.web-robots__remove{display: flex;justify-content: flex-end;margin: -4px 0 4px}.web-robots__fields{display: grid;gap: 10px;grid-template-columns: repeat(auto-fill,minmax(220px,1fr))}.web-robots__fields textarea.field__control{min-height: 72px}.web-robots__sitemaps{display: flex;margin-bottom: 14px}.web-robots__table td:first-child{white-space: nowrap}.web-robots__table td:last-child{font-family: var(--font);font-size: 0.925rem}#sitemap-generator [data-sitemap-date][hidden]{display: none}.web-color{display: grid;gap: 16px;grid-template-columns: minmax(0,1fr);align-items: stretch;margin-bottom: 14px}@media (min-width: 640px){.web-color{grid-template-columns: minmax(0,1fr) 200px}}.web-color__controls{display: flex;flex-wrap: wrap;align-items: flex-end;gap: 12px 16px;min-width: 0}.web-color__field{flex: 1 1 220px;min-width: 0}.web-color__text{font-family: var(--mono);font-size: 1rem}.web-color__picker{width: 64px;height: 40px;padding: 2px;border: 1px solid var(--border-strong);border-radius: var(--radius-sm);background: var(--surface);cursor: pointer}.web-color__swatch{display: block;min-height: 120px;border: 1px solid var(--border-strong);border-radius: var(--radius);overflow: hidden;background-color: var(--surface);background-image: linear-gradient(45deg,var(--border-strong) 25%,transparent 25%,transparent 75%,var(--border-strong) 75%),linear-gradient(45deg,var(--border-strong) 25%,transparent 25%,transparent 75%,var(--border-strong) 75%);background-position: 0 0,8px 8px;background-size: 16px 16px}.web-color__swatch-fill{display: block;width: 100%;height: 100%;min-height: 120px}.web-color__swatch-fill.is-empty{background: transparent}#color-converter .tool-status{margin-bottom: 4px}.web-contrast-sample{display: inline-block;min-width: 2.4em;padding: 2px 6px;border: 1px solid var(--border);border-radius: 4px;font-family: var(--font);font-weight: 700;text-align: center}.web-badge{display: inline-block;padding: 1px 8px;border-radius: 999px;font-family: var(--font);font-size: 0.8rem;font-weight: 600}.web-badge.is-pass{background: var(--success-soft);color: var(--success)}.web-badge.is-fail{background: var(--danger-soft);color: var(--danger)}