@liuk123/insui 0.0.1-alpha.1

package/styles/ins-ui-global.css

@@ -0,0 +1,1109 @@
+:root {
+  --ins-font-heading: -apple-system, BlinkMacSystemFont, system-ui, Roboto, Segoe UI, Helvetica Neue, sans-serif;
+  --ins-font-text: -apple-system, BlinkMacSystemFont, system-ui, Roboto, Segoe UI, Helvetica Neue, sans-serif;
+  --ins-font-code: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  --ins-font-heading-1: 400 2.75rem / 3.5rem var(--ins-font-heading);
+  --ins-font-heading-2: 400 2.25rem / 3rem var(--ins-font-heading);
+  --ins-font-heading-3: 400 1.75rem / 2.5rem var(--ins-font-heading);
+  --ins-font-heading-4: 400 1.5rem / 2rem var(--ins-font-heading);
+  --ins-font-heading-5: 400 1.25rem / 1.75rem var(--ins-font-heading);
+  --ins-font-heading-6: 400 1.125rem / 1.5rem var(--ins-font-heading);
+  --ins-font-text-xl: normal 1.5rem / 1.75rem var(--ins-font-text);
+  --ins-font-text-l: normal 1.25rem / 1.75rem var(--ins-font-text);
+  --ins-font-text-m: normal 1rem / 1.5rem var(--ins-font-text);
+  --ins-font-text-s: normal 0.875rem / 1.25rem var(--ins-font-text);
+  --ins-font-text-xs: normal 0.7875rem / 1rem var(--ins-font-text);
+  --ins-radius-xs: 0.25rem;
+  --ins-radius-s: 0.5rem;
+  --ins-radius-m: 0.725rem;
+  --ins-radius-l: 1rem;
+  --ins-radius-xl: 1.5rem;
+  --ins-height-xs: 1.5rem;
+  --ins-height-s: 2rem;
+  --ins-height-m: 2.5rem;
+  --ins-height-l: 3.25rem;
+  --ins-padding-xs: 0.25rem;
+  --ins-padding-s: 0.625rem;
+  --ins-padding-m: 1rem;
+  --ins-padding-l: 1.5rem;
+  --ins-padding-xl: 2rem;
+  --ins-duration: 0.3s;
+  --ins-disabled-opacity: 0.56;
+}
+@media screen {
+  [insTheme='dark'] {
+    color-scheme: dark;
+    --ins-background-base: #222;
+    --ins-background-base-alt: #333;
+    --ins-background-neutral-1: rgba(255, 255, 255, 0.08);
+    --ins-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
+    --ins-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
+    --ins-background-accent-opposite: #fff;
+    --ins-background-accent-opposite-hover: #f6f6f6;
+    --ins-background-accent-opposite-pressed: #ededed;
+    --ins-background-elevation-1: #292929;
+    --ins-background-elevation-2: #333;
+    --ins-service-autofill-background: #554a2a;
+    --ins-border-normal: rgba(255, 255, 255, 0.14);
+    --ins-border-hover: rgba(255, 255, 255, 0.6);
+    --ins-border-focus: rgba(255, 255, 255, 0.64);
+    --ins-status-negative: #ff8c67;
+    --ins-status-negative-pale: rgba(244, 87, 37, 0.32);
+    --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.4);
+    --ins-status-positive: #4ac99b;
+    --ins-status-positive-pale: rgba(74, 201, 155, 0.32);
+    --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
+    --ins-status-warning: #ffc700;
+    --ins-status-warning-pale: rgba(255, 199, 0, 0.32);
+    --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
+    --ins-status-info: #70b6f6;
+    --ins-status-info-pale: rgba(112, 182, 246, 0.32);
+    --ins-status-info-pale-hover: rgba(112, 182, 246, 0.4);
+    --ins-status-neutral: #959ba4;
+    --ins-text-primary: rgba(255, 255, 255, 0.95);
+    --ins-text-secondary: rgba(255, 255, 255, 0.72);
+    --ins-text-tertiary: rgba(255, 255, 255, 0.6);
+    --ins-text-action: #6788ff;
+    --ins-text-action-hover: #526ed3;
+    --ins-text-positive: #44c596;
+    --ins-text-positive-hover: #3aa981;
+    --ins-text-negative: #ff8c67;
+    --ins-text-negative-hover: #bb593a;
+  }
+  :root {
+    color-scheme: light;
+    --ins-background-base: #fafafa;
+    --ins-background-base-alt: #f6f6f6;
+    --ins-background-neutral-1: rgba(0, 0, 0, 0.06);
+    --ins-background-neutral-1-hover: rgba(0, 0, 0, 0.1);
+    --ins-background-neutral-1-pressed: rgba(0, 0, 0, 0.15);
+    --ins-background-accent-1: #526ed3;
+    --ins-background-accent-1-hover: #6c86e2;
+    --ins-background-accent-1-pressed: #314692;
+    --ins-background-accent-2: #ff7043;
+    --ins-background-accent-2-hover: #ff9a94;
+    --ins-background-accent-2-pressed: #e7716a;
+    --ins-background-accent-opposite: #000;
+    --ins-background-accent-opposite-hover: #333;
+    --ins-background-accent-opposite-pressed: #808080;
+    --ins-background-elevation-1: #fafafa;
+    --ins-background-elevation-2: #f3f3f3;
+    --ins-service-autofill-background: #fff5c0;
+    --ins-service-backdrop: rgba(0, 0, 0, 0.45);
+    --ins-border-normal: rgba(0, 0, 0, 0.1);
+    --ins-border-hover: rgba(0, 0, 0, 0.25);
+    --ins-border-focus: rgba(51, 51, 51, 0.64);
+    --ins-status-negative: #f45725;
+    --ins-status-negative-pale: rgba(244, 87, 37, 0.12);
+    --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
+    --ins-status-positive: #4ac99b;
+    --ins-status-positive-pale: rgba(74, 201, 155, 0.12);
+    --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
+    --ins-status-warning: #ffc700;
+    --ins-status-warning-pale: rgba(255, 199, 0, 0.12);
+    --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
+    --ins-status-info: #70b6f6;
+    --ins-status-info-pale: rgba(112, 182, 246, 0.12);
+    --ins-status-info-pale-hover: rgba(112, 182, 246, 0.24);
+    --ins-status-neutral: #79818c;
+    --ins-text-primary: #1b1f3b;
+    --ins-text-secondary: rgba(27, 31, 59, 0.65);
+    --ins-text-tertiary: rgba(27, 31, 59, 0.4);
+    --ins-text-primary-on-accent: #fff;
+    --ins-text-action: #4c66c3;
+    --ins-text-action-hover: #6c86e2;
+    --ins-text-positive: #3aa981;
+    --ins-text-positive-hover: #7ac5aa;
+    --ins-text-negative: #dd4c1e;
+    --ins-text-negative-hover: #e38163;
+    --ins-shadow-small: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+    --ins-shadow-small-hover: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.14);
+    --ins-shadow-medium: 0 0.125rem 0.55rem rgba(0, 0, 0, 0.12);
+    --ins-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
+  }
+}
+@media print {
+  :root,
+  [insTheme] {
+    color-scheme: light;
+    --ins-background-base: #fafafa;
+    --ins-background-base-alt: #f6f6f6;
+    --ins-background-neutral-1: rgba(0, 0, 0, 0.06);
+    --ins-background-neutral-1-hover: rgba(0, 0, 0, 0.1);
+    --ins-background-neutral-1-pressed: rgba(0, 0, 0, 0.15);
+    --ins-background-accent-1: #526ed3;
+    --ins-background-accent-1-hover: #6c86e2;
+    --ins-background-accent-1-pressed: #314692;
+    --ins-background-accent-2: #ff7043;
+    --ins-background-accent-2-hover: #ff9a94;
+    --ins-background-accent-2-pressed: #e7716a;
+    --ins-background-accent-opposite: #000;
+    --ins-background-accent-opposite-hover: #333;
+    --ins-background-accent-opposite-pressed: #808080;
+    --ins-background-elevation-1: #fafafa;
+    --ins-background-elevation-2: #f3f3f3;
+    --ins-service-autofill-background: #fff5c0;
+    --ins-service-backdrop: rgba(0, 0, 0, 0.45);
+    --ins-border-normal: rgba(0, 0, 0, 0.1);
+    --ins-border-hover: rgba(0, 0, 0, 0.25);
+    --ins-border-focus: rgba(51, 51, 51, 0.64);
+    --ins-status-negative: #f45725;
+    --ins-status-negative-pale: rgba(244, 87, 37, 0.12);
+    --ins-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
+    --ins-status-positive: #4ac99b;
+    --ins-status-positive-pale: rgba(74, 201, 155, 0.12);
+    --ins-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
+    --ins-status-warning: #ffc700;
+    --ins-status-warning-pale: rgba(255, 199, 0, 0.12);
+    --ins-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
+    --ins-status-info: #70b6f6;
+    --ins-status-info-pale: rgba(112, 182, 246, 0.12);
+    --ins-status-info-pale-hover: rgba(112, 182, 246, 0.24);
+    --ins-status-neutral: #79818c;
+    --ins-text-primary: #1b1f3b;
+    --ins-text-secondary: rgba(27, 31, 59, 0.65);
+    --ins-text-tertiary: rgba(27, 31, 59, 0.4);
+    --ins-text-primary-on-accent: #fff;
+    --ins-text-action: #4c66c3;
+    --ins-text-action-hover: #6c86e2;
+    --ins-text-positive: #3aa981;
+    --ins-text-positive-hover: #7ac5aa;
+    --ins-text-negative: #dd4c1e;
+    --ins-text-negative-hover: #e38163;
+    --ins-shadow-small: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+    --ins-shadow-small-hover: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.14);
+    --ins-shadow-medium: 0 0.125rem 0.55rem rgba(0, 0, 0, 0.12);
+    --ins-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
+  }
+}
+[insAppearance][data-appearance='accent'] {
+  background: var(--ins-background-accent-2);
+  color: var(--ins-text-primary-on-accent);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='accent']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    background: var(--ins-background-accent-2-hover);
+  }
+}
+[insAppearance][data-appearance='accent'][data-state='hover'] {
+  background: var(--ins-background-accent-2-hover);
+}
+[insAppearance][data-appearance='accent']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  background: var(--ins-background-accent-2-pressed);
+}
+[insAppearance][data-appearance='accent'][data-state='active'] {
+  background: var(--ins-background-accent-2-pressed);
+}
+[insAppearance][data-appearance='action'] {
+  color: var(--ins-text-action);
+  background: transparent;
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='action']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    color: var(--ins-text-action-hover);
+  }
+}
+[insAppearance][data-appearance='action'][data-state='hover'] {
+  color: var(--ins-text-action-hover);
+}
+[insAppearance][data-appearance='action']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  color: var(--ins-text-action-hover);
+}
+[insAppearance][data-appearance='action'][data-state='active'] {
+  color: var(--ins-text-action-hover);
+}
+[insAppearance][data-appearance='action-destructive'] {
+  color: var(--ins-text-negative);
+  background: transparent;
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='action-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    color: var(--ins-text-negative-hover);
+  }
+}
+[insAppearance][data-appearance='action-destructive'][data-state='hover'] {
+  color: var(--ins-text-negative-hover);
+}
+[insAppearance][data-appearance='action-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  color: var(--ins-text-negative-hover);
+}
+[insAppearance][data-appearance='action-destructive'][data-state='active'] {
+  color: var(--ins-text-negative-hover);
+}
+[insAppearance][data-appearance='action-grayscale'] {
+  color: var(--ins-text-secondary);
+  background: transparent;
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='action-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    color: var(--ins-text-primary);
+  }
+}
+[insAppearance][data-appearance='action-grayscale'][data-state='hover'] {
+  color: var(--ins-text-primary);
+}
+[insAppearance][data-appearance='action-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  color: var(--ins-text-primary);
+}
+[insAppearance][data-appearance='action-grayscale'][data-state='active'] {
+  color: var(--ins-text-primary);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='flat']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='flat-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='flat-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    background: var(--ins-background-neutral-1-hover);
+  }
+}
+[insAppearance][data-appearance='flat'][data-state='hover'],
+[insAppearance][data-appearance='flat-destructive'][data-state='hover'],
+[insAppearance][data-appearance='flat-grayscale'][data-state='hover'] {
+  background: var(--ins-background-neutral-1-hover);
+}
+[insAppearance][data-appearance='flat']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='flat-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='flat-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  background: var(--ins-background-neutral-1-pressed);
+}
+[insAppearance][data-appearance='flat'][data-state='active'],
+[insAppearance][data-appearance='flat-destructive'][data-state='active'],
+[insAppearance][data-appearance='flat-grayscale'][data-state='active'] {
+  background: var(--ins-background-neutral-1-pressed);
+}
+[insAppearance][data-appearance='flat'] {
+  color: var(--ins-text-action);
+}
+[insAppearance][data-appearance='flat-destructive'] {
+  color: var(--ins-text-negative);
+}
+[insAppearance][data-appearance='flat-grayscale'] {
+  color: var(--ins-text-primary);
+}
+[insAppearance][data-appearance='outline'],
+[insAppearance][data-appearance='outline-destructive'],
+[insAppearance][data-appearance='outline-grayscale'] {
+  --t-bs: var(--ins-border-normal);
+  color: var(--ins-text-action);
+  box-shadow: inset 0 0 0 1px var(--t-bs);
+}
+[insAppearance][data-appearance='outline']:checked:not([data-mode]),
+[insAppearance][data-appearance='outline-destructive']:checked:not([data-mode]),
+[insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode]),
+[insAppearance][data-appearance='outline'][data-mode~='checked'],
+[insAppearance][data-appearance='outline-destructive'][data-mode~='checked'],
+[insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'] {
+  --t-bs: var(--ins-background-accent-1);
+  box-shadow: inset 0 0 0 2px var(--t-bs);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='outline']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='outline-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='outline'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='outline-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='outline-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    --t-bs: var(--ins-background-accent-1-hover);
+  }
+}
+[insAppearance][data-appearance='outline']:checked:not([data-mode])[data-state='hover'],
+[insAppearance][data-appearance='outline-destructive']:checked:not([data-mode])[data-state='hover'],
+[insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode])[data-state='hover'],
+[insAppearance][data-appearance='outline'][data-mode~='checked'][data-state='hover'],
+[insAppearance][data-appearance='outline-destructive'][data-mode~='checked'][data-state='hover'],
+[insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'][data-state='hover'] {
+  --t-bs: var(--ins-background-accent-1-hover);
+}
+[insAppearance][data-appearance='outline']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='outline-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='outline'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='outline-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='outline-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  --t-bs: var(--ins-background-accent-1-pressed);
+}
+[insAppearance][data-appearance='outline']:checked:not([data-mode])[data-state='active'],
+[insAppearance][data-appearance='outline-destructive']:checked:not([data-mode])[data-state='active'],
+[insAppearance][data-appearance='outline-grayscale']:checked:not([data-mode])[data-state='active'],
+[insAppearance][data-appearance='outline'][data-mode~='checked'][data-state='active'],
+[insAppearance][data-appearance='outline-destructive'][data-mode~='checked'][data-state='active'],
+[insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'][data-state='active'] {
+  --t-bs: var(--ins-background-accent-1-pressed);
+}
+[insAppearance][data-appearance='outline']:invalid:not([data-mode]),
+[insAppearance][data-appearance='outline-destructive']:invalid:not([data-mode]),
+[insAppearance][data-appearance='outline-grayscale']:invalid:not([data-mode]),
+[insAppearance][data-appearance='outline'][data-mode~='invalid'],
+[insAppearance][data-appearance='outline-destructive'][data-mode~='invalid'],
+[insAppearance][data-appearance='outline-grayscale'][data-mode~='invalid'] {
+  box-shadow: inset 0 0 0 1px var(--ins-status-negative-pale-hover);
+}
+[insAppearance][data-appearance='outline']:checked:invalid:not([data-mode]),
+[insAppearance][data-appearance='outline-destructive']:checked:invalid:not([data-mode]),
+[insAppearance][data-appearance='outline-grayscale']:checked:invalid:not([data-mode]),
+[insAppearance][data-appearance='outline'][data-mode~='checked'][data-mode~='invalid'],
+[insAppearance][data-appearance='outline-destructive'][data-mode~='checked'][data-mode~='invalid'],
+[insAppearance][data-appearance='outline-grayscale'][data-mode~='checked'][data-mode~='invalid'] {
+  box-shadow: inset 0 0 0 2px var(--ins-status-negative);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='outline']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='outline-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='outline-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    background: var(--ins-background-neutral-1);
+    cursor: pointer;
+    --t-bs: var(--ins-border-hover);
+  }
+}
+[insAppearance][data-appearance='outline'][data-state='hover'],
+[insAppearance][data-appearance='outline-destructive'][data-state='hover'],
+[insAppearance][data-appearance='outline-grayscale'][data-state='hover'] {
+  background: var(--ins-background-neutral-1);
+  cursor: pointer;
+  --t-bs: var(--ins-border-hover);
+}
+[insAppearance][data-appearance='outline']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='outline-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='outline-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  background: var(--ins-background-neutral-1);
+  --t-bs: var(--ins-border-hover);
+}
+[insAppearance][data-appearance='outline'][data-state='active'],
+[insAppearance][data-appearance='outline-destructive'][data-state='active'],
+[insAppearance][data-appearance='outline-grayscale'][data-state='active'] {
+  background: var(--ins-background-neutral-1);
+  --t-bs: var(--ins-border-hover);
+}
+[insAppearance][data-appearance='outline-grayscale'] {
+  color: var(--ins-text-primary);
+}
+[insAppearance][data-appearance='outline-destructive'] {
+  color: var(--ins-text-negative);
+}
+[insAppearance][data-appearance='primary'] {
+  --t-bg: var(--ins-background-accent-1);
+  background: var(--t-bg);
+  color: var(--ins-text-primary-on-accent);
+}
+[insAppearance][data-appearance='primary']:invalid:not([data-mode]),
+[insAppearance][data-appearance='primary'][data-mode~='invalid'] {
+  background: var(--ins-status-negative);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='primary']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    --t-bg: var(--ins-background-accent-1-hover);
+  }
+}
+[insAppearance][data-appearance='primary'][data-state='hover'] {
+  --t-bg: var(--ins-background-accent-1-hover);
+}
+[insAppearance][data-appearance='primary']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  --t-bg: var(--ins-background-accent-1-pressed);
+}
+[insAppearance][data-appearance='primary'][data-state='active'] {
+  --t-bg: var(--ins-background-accent-1-pressed);
+}
+[insAppearance][data-appearance='primary-destructive'] {
+  color: #fff;
+  background: var(--ins-status-negative);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='primary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    filter: saturate(1) brightness(1.3);
+  }
+}
+[insAppearance][data-appearance='primary-destructive'][data-state='hover'] {
+  filter: saturate(1) brightness(1.3);
+}
+[insAppearance][data-appearance='primary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  filter: saturate(0.8) brightness(1);
+}
+[insAppearance][data-appearance='primary-destructive'][data-state='active'] {
+  filter: saturate(0.8) brightness(1);
+}
+[insAppearance][data-appearance='primary-grayscale'] {
+  --ins-border-focus: #979797;
+  background: var(--ins-background-accent-opposite);
+  color: var(--ins-background-base);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='primary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    background: var(--ins-background-accent-opposite-hover);
+  }
+}
+[insAppearance][data-appearance='primary-grayscale'][data-state='hover'] {
+  background: var(--ins-background-accent-opposite-hover);
+}
+[insAppearance][data-appearance='primary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  background: var(--ins-background-accent-opposite-pressed);
+}
+[insAppearance][data-appearance='primary-grayscale'][data-state='active'] {
+  background: var(--ins-background-accent-opposite-pressed);
+}
+[insAppearance][data-appearance='secondary'],
+[insAppearance][data-appearance='secondary-destructive'],
+[insAppearance][data-appearance='secondary-grayscale'] {
+  background: var(--ins-background-neutral-1);
+  color: var(--ins-text-action);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='secondary']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    background: var(--ins-background-neutral-1-hover);
+  }
+}
+[insAppearance][data-appearance='secondary'][data-state='hover'],
+[insAppearance][data-appearance='secondary-destructive'][data-state='hover'],
+[insAppearance][data-appearance='secondary-grayscale'][data-state='hover'] {
+  background: var(--ins-background-neutral-1-hover);
+}
+[insAppearance][data-appearance='secondary']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-destructive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-grayscale']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  background: var(--ins-background-neutral-1-pressed);
+}
+[insAppearance][data-appearance='secondary'][data-state='active'],
+[insAppearance][data-appearance='secondary-destructive'][data-state='active'],
+[insAppearance][data-appearance='secondary-grayscale'][data-state='active'] {
+  background: var(--ins-background-neutral-1-pressed);
+}
+[insAppearance][data-appearance='secondary']:checked:not([data-mode]),
+[insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode]),
+[insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode]),
+[insAppearance][data-appearance='secondary'][data-mode~='checked'],
+[insAppearance][data-appearance='secondary-destructive'][data-mode~='checked'],
+[insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked'] {
+  background: var(--ins-background-accent-1);
+  color: var(--ins-text-primary-on-accent);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='secondary']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    background: var(--ins-background-accent-1-hover);
+  }
+}
+[insAppearance][data-appearance='secondary']:checked:not([data-mode])[data-state='hover'],
+[insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode])[data-state='hover'],
+[insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode])[data-state='hover'],
+[insAppearance][data-appearance='secondary'][data-mode~='checked'][data-state='hover'],
+[insAppearance][data-appearance='secondary-destructive'][data-mode~='checked'][data-state='hover'],
+[insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked'][data-state='hover'] {
+  background: var(--ins-background-accent-1-hover);
+}
+[insAppearance][data-appearance='secondary']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-destructive'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  background: var(--ins-background-accent-1-pressed);
+}
+[insAppearance][data-appearance='secondary']:checked:not([data-mode])[data-state='active'],
+[insAppearance][data-appearance='secondary-destructive']:checked:not([data-mode])[data-state='active'],
+[insAppearance][data-appearance='secondary-grayscale']:checked:not([data-mode])[data-state='active'],
+[insAppearance][data-appearance='secondary'][data-mode~='checked'][data-state='active'],
+[insAppearance][data-appearance='secondary-destructive'][data-mode~='checked'][data-state='active'],
+[insAppearance][data-appearance='secondary-grayscale'][data-mode~='checked'][data-state='active'] {
+  background: var(--ins-background-accent-1-pressed);
+}
+[insAppearance][data-appearance='secondary']:invalid:not([data-mode]),
+[insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode]),
+[insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode]),
+[insAppearance][data-appearance='secondary'][data-mode~='invalid'],
+[insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid'],
+[insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid'] {
+  color: var(--ins-text-negative);
+  background: var(--ins-status-negative-pale);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='secondary']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]),
+  [insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    color: var(--ins-text-negative-hover);
+    background: var(--ins-status-negative-pale-hover);
+  }
+}
+[insAppearance][data-appearance='secondary']:invalid:not([data-mode])[data-state='hover'],
+[insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode])[data-state='hover'],
+[insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode])[data-state='hover'],
+[insAppearance][data-appearance='secondary'][data-mode~='invalid'][data-state='hover'],
+[insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid'][data-state='hover'],
+[insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid'][data-state='hover'] {
+  color: var(--ins-text-negative-hover);
+  background: var(--ins-status-negative-pale-hover);
+}
+[insAppearance][data-appearance='secondary']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode]):is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]),
+[insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  color: var(--ins-text-negative-hover);
+  background: var(--ins-status-negative-pale-hover);
+}
+[insAppearance][data-appearance='secondary']:invalid:not([data-mode])[data-state='active'],
+[insAppearance][data-appearance='secondary-destructive']:invalid:not([data-mode])[data-state='active'],
+[insAppearance][data-appearance='secondary-grayscale']:invalid:not([data-mode])[data-state='active'],
+[insAppearance][data-appearance='secondary'][data-mode~='invalid'][data-state='active'],
+[insAppearance][data-appearance='secondary-destructive'][data-mode~='invalid'][data-state='active'],
+[insAppearance][data-appearance='secondary-grayscale'][data-mode~='invalid'][data-state='active'] {
+  color: var(--ins-text-negative-hover);
+  background: var(--ins-status-negative-pale-hover);
+}
+[insAppearance][data-appearance='secondary-destructive'] {
+  color: var(--ins-text-negative);
+}
+[insAppearance][data-appearance='secondary-grayscale'] {
+  color: var(--ins-text-primary);
+}
+[insAppearance][data-appearance='negative'],
+[insAppearance][data-appearance='positive'],
+[insAppearance][data-appearance='warning'],
+[insAppearance][data-appearance='info'],
+[insAppearance][data-appearance='neutral'] {
+  background: var(--t-bg);
+  color: var(--ins-text-primary);
+}
+[insAppearance][data-appearance='negative']:checked:not([data-mode]),
+[insAppearance][data-appearance='positive']:checked:not([data-mode]),
+[insAppearance][data-appearance='warning']:checked:not([data-mode]),
+[insAppearance][data-appearance='info']:checked:not([data-mode]),
+[insAppearance][data-appearance='neutral']:checked:not([data-mode]),
+[insAppearance][data-appearance='negative'][data-mode~='checked'],
+[insAppearance][data-appearance='positive'][data-mode~='checked'],
+[insAppearance][data-appearance='warning'][data-mode~='checked'],
+[insAppearance][data-appearance='info'][data-mode~='checked'],
+[insAppearance][data-appearance='neutral'][data-mode~='checked'] {
+  color: #fff;
+}
+[insAppearance][data-appearance='negative'] {
+  --t-bg: var(--ins-status-negative-pale);
+}
+[insAppearance][data-appearance='negative']::before,
+[insAppearance][data-appearance='negative']::after {
+  color: var(--ins-status-negative);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='negative']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    --t-bg: var(--ins-status-negative-pale-hover);
+  }
+}
+[insAppearance][data-appearance='negative'][data-state='hover'] {
+  --t-bg: var(--ins-status-negative-pale-hover);
+}
+[insAppearance][data-appearance='negative']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  --t-bg: var(--ins-status-negative-pale-hover);
+}
+[insAppearance][data-appearance='negative'][data-state='active'] {
+  --t-bg: var(--ins-status-negative-pale-hover);
+}
+[insAppearance][data-appearance='negative']:checked:not([data-mode]),
+[insAppearance][data-appearance='negative'][data-mode~='checked'] {
+  background: var(--ins-status-negative);
+}
+[insAppearance][data-appearance='positive'] {
+  --t-bg: var(--ins-status-positive-pale);
+}
+[insAppearance][data-appearance='positive']::before,
+[insAppearance][data-appearance='positive']::after {
+  color: var(--ins-status-positive);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='positive']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    --t-bg: var(--ins-status-positive-pale-hover);
+  }
+}
+[insAppearance][data-appearance='positive'][data-state='hover'] {
+  --t-bg: var(--ins-status-positive-pale-hover);
+}
+[insAppearance][data-appearance='positive']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  --t-bg: var(--ins-status-positive-pale-hover);
+}
+[insAppearance][data-appearance='positive'][data-state='active'] {
+  --t-bg: var(--ins-status-positive-pale-hover);
+}
+[insAppearance][data-appearance='positive']:checked:not([data-mode]),
+[insAppearance][data-appearance='positive'][data-mode~='checked'] {
+  background: var(--ins-status-positive);
+}
+[insAppearance][data-appearance='warning'] {
+  --t-bg: var(--ins-status-warning-pale);
+}
+[insAppearance][data-appearance='warning']::before,
+[insAppearance][data-appearance='warning']::after {
+  color: var(--ins-status-warning);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='warning']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    --t-bg: var(--ins-status-warning-pale-hover);
+  }
+}
+[insAppearance][data-appearance='warning'][data-state='hover'] {
+  --t-bg: var(--ins-status-warning-pale-hover);
+}
+[insAppearance][data-appearance='warning']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  --t-bg: var(--ins-status-warning-pale-hover);
+}
+[insAppearance][data-appearance='warning'][data-state='active'] {
+  --t-bg: var(--ins-status-warning-pale-hover);
+}
+[insAppearance][data-appearance='warning']:checked:not([data-mode]),
+[insAppearance][data-appearance='warning'][data-mode~='checked'] {
+  background: var(--ins-status-warning);
+}
+[insAppearance][data-appearance='info'] {
+  --t-bg: var(--ins-status-info-pale);
+}
+[insAppearance][data-appearance='info']::before,
+[insAppearance][data-appearance='info']::after {
+  color: var(--ins-status-info);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='info']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    --t-bg: var(--ins-status-info-pale-hover);
+  }
+}
+[insAppearance][data-appearance='info'][data-state='hover'] {
+  --t-bg: var(--ins-status-info-pale-hover);
+}
+[insAppearance][data-appearance='info']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  --t-bg: var(--ins-status-info-pale-hover);
+}
+[insAppearance][data-appearance='info'][data-state='active'] {
+  --t-bg: var(--ins-status-info-pale-hover);
+}
+[insAppearance][data-appearance='info']:checked:not([data-mode]),
+[insAppearance][data-appearance='info'][data-mode~='checked'] {
+  background: var(--ins-status-info);
+}
+[insAppearance][data-appearance='neutral'] {
+  --t-bg: var(--ins-background-neutral-1);
+}
+[insAppearance][data-appearance='neutral']::before,
+[insAppearance][data-appearance='neutral']::after {
+  color: var(--ins-status-neutral);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='neutral']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    --t-bg: var(--ins-background-neutral-1-hover);
+  }
+}
+[insAppearance][data-appearance='neutral'][data-state='hover'] {
+  --t-bg: var(--ins-background-neutral-1-hover);
+}
+[insAppearance][data-appearance='neutral']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  --t-bg: var(--ins-background-neutral-1-pressed);
+}
+[insAppearance][data-appearance='neutral'][data-state='active'] {
+  --t-bg: var(--ins-background-neutral-1-pressed);
+}
+[insAppearance][data-appearance='neutral']:checked:not([data-mode]),
+[insAppearance][data-appearance='neutral'][data-mode~='checked'] {
+  background: var(--ins-status-neutral);
+}
+[insAppearance][data-appearance='glass'] {
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  backdrop-filter: blur(1rem);
+  --ins-border-focus: rgba(255, 255, 255, 0.64);
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='glass']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    background: rgba(0, 0, 0, 0.48);
+  }
+}
+[insAppearance][data-appearance='glass'][data-state='hover'] {
+  background: rgba(0, 0, 0, 0.48);
+}
+[insAppearance][data-appearance='glass']:is(a, button, select, textarea, input, label):not(:disabled):active:not(:disabled):not([data-state]) {
+  background: rgba(0, 0, 0, 0.6);
+}
+[insAppearance][data-appearance='glass'][data-state='active'] {
+  background: rgba(0, 0, 0, 0.6);
+}
+/*
+Every max-width of breakpoint is equal:
+next min-width - 60% from 1px (1/16 * 0.6 = 0.0375)
+*/
+[insAppearance][data-appearance='textfield'] {
+  transition-property: box-shadow, background, outline-color, border-color;
+  transition-duration: var(--ins-duration, 300ms);
+  transition-timing-function: ease-in-out;
+  --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+  background-color: var(--ins-background-base);
+  color: var(--ins-text-primary);
+  box-shadow: var(--t-shadow);
+  outline: 1px solid var(--ins-border-normal);
+  outline-offset: -1px;
+  border: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  [insAppearance][data-appearance='textfield']:is(a, button, select, textarea, input, label):not(:disabled):hover:not(:disabled):not([data-state]) {
+    --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
+  }
+}
+[insAppearance][data-appearance='textfield'][data-state='hover'] {
+  --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
+}
+[insAppearance][data-appearance='textfield']:focus-visible:not([data-focus='false']) {
+  box-shadow: none;
+  outline: 0.125rem solid var(--ins-background-accent-1);
+  outline-offset: -0.125rem;
+}
+[insAppearance][data-appearance='textfield'][data-focus='true'] {
+  box-shadow: none;
+  outline: 0.125rem solid var(--ins-background-accent-1);
+  outline-offset: -0.125rem;
+}
+[insAppearance][data-appearance='textfield']:disabled:not([data-state]),
+[insAppearance][data-appearance='textfield'][data-state='disabled'] {
+  box-shadow: none;
+}
+[insAppearance][data-appearance='textfield'][data-mode~='invalid'][data-mode~='invalid'],
+[insAppearance][data-appearance='textfield']:invalid:not([data-mode]) {
+  outline-color: var(--ins-status-negative);
+}
+[insAppearance][data-appearance='textfield'][data-mode~='readonly'],
+input[insAppearance][data-appearance='textfield']:read-only:not([data-mode]) {
+  background: transparent !important;
+  box-shadow: none !important;
+  outline-color: var(--ins-border-normal) !important;
+}
+[insAppearance][data-appearance='textfield']:-webkit-autofill {
+  -webkit-text-fill-color: var(--ins-text-primary) !important;
+  box-shadow: 0 0 0 100rem var(--ins-service-autofill-background) inset !important;
+  transition: background-color 600000s 0s;
+}
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+hr {
+  margin: 0;
+  block-size: 1px;
+  border: none;
+  background: var(--ins-border-normal);
+}
+iframe {
+  border: none;
+}
+::-ms-clear {
+  display: none;
+}
+::-ms-reveal {
+  display: none;
+}
+.ins-list {
+  font: var(--ins-font-text-m);
+  line-height: 1.5rem;
+  list-style-type: none;
+  color: var(--ins-text-primary);
+}
+.ins-list_large {
+  font: var(--ins-font-text-l);
+  line-height: 1.75rem;
+}
+.ins-list_small,
+.ins-list_extra-small {
+  font: var(--ins-font-text-s);
+  line-height: 1.25rem;
+}
+.ins-list_nested {
+  margin: 0.75rem 0 0.75rem 1.25rem;
+  color: var(--ins-text-secondary);
+}
+.ins-list_large .ins-list_nested {
+  margin-inline-start: 0.75rem;
+}
+.ins-list_small .ins-list_nested {
+  margin-block-start: 0.5rem;
+  margin-block-end: 0.5rem;
+}
+.ins-list_ordered {
+  counter-reset: counter;
+}
+.ins-list__item {
+  position: relative;
+  padding-inline-start: 1.5rem;
+  overflow-wrap: break-word;
+  margin-block-start: 0.75rem;
+}
+.ins-list__item:first-child {
+  margin-block-start: 0;
+}
+.ins-list__item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.5rem;
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 100%;
+  background-color: var(--ins-background-accent-1);
+}
+.ins-list_large > .ins-list__item::before {
+  top: 0.625rem;
+}
+.ins-list_small > .ins-list__item::before {
+  top: 0.375rem;
+}
+.ins-list_extra-small > .ins-list__item {
+  margin-block-start: 0.5rem;
+}
+.ins-list_linear .ins-list__item {
+  padding-inline-start: 1.75rem;
+}
+.ins-list_linear .ins-list__item::before {
+  content: '\2014';
+  left: 0;
+  top: auto;
+  inline-size: auto;
+  block-size: auto;
+  background-color: transparent;
+}
+.ins-list_ordered .ins-list__item {
+  padding-inline-start: 1.25rem;
+}
+.ins-list_ordered .ins-list__item::before {
+  content: counter(counter) '.';
+  left: 0;
+  top: auto;
+  counter-increment: counter;
+  inline-size: auto;
+  block-size: auto;
+  color: var(--ins-text-tertiary);
+  background-color: transparent;
+}
+.ins-list_triangle > .ins-list__item {
+  padding-inline-start: 1.75rem;
+}
+.ins-list_triangle > .ins-list__item::before {
+  content: '\25E4';
+  left: 0;
+  top: 1px;
+  inline-size: auto;
+  block-size: auto;
+  background-color: transparent;
+  color: var(--ins-text-tertiary);
+  font-size: 0.75rem;
+}
+.ins-list__item-title {
+  font: var(--ins-font-heading-5);
+  margin: 0;
+}
+.ins-list_small .ins-list__item-title {
+  line-height: 1.25rem;
+  font-weight: bold;
+}
+.ins-list__description {
+  margin: 0.5rem 0 0;
+  color: var(--ins-text-secondary);
+}
+.ins-list_small .ins-list__description {
+  margin-block-start: 0.25rem;
+}
+.ins-list_large .ins-list__description {
+  line-height: 1.75rem;
+  margin-block-start: 0.75rem;
+}
+.ins-table {
+  inline-size: 100%;
+}
+.ins-table_layout_fixed {
+  table-layout: fixed;
+}
+.ins-table__tr {
+  transition-property: background;
+  transition-duration: var(--ins-duration, 300ms);
+  transition-timing-function: ease-in-out;
+  outline: none;
+}
+.ins-table__tr:not(.ins-table__tr_hover_disabled):hover {
+  background: var(--ins-background-base-alt);
+}
+.ins-table__tr:not(.ins-table__tr_border_none) {
+  border-block-end: 1px solid var(--ins-border-normal);
+}
+.ins-table__tr_border_top {
+  border-block-start: 1px solid var(--ins-border-normal);
+}
+.ins-table__tr_cursor_pointer {
+  cursor: pointer;
+}
+.ins-table__th {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--ins-font-text-s);
+  padding: 0.5rem 1rem;
+  vertical-align: middle;
+  block-size: 2.5rem;
+  color: var(--ins-text-secondary);
+  background: inherit;
+}
+.ins-table__th_font-size_l,
+.ins-table_font-size_l .ins-table__th {
+  font: var(--ins-font-text-m);
+}
+.ins-table__td {
+  font: var(--ins-font-text-m);
+  padding: 1rem 1rem 0.875rem;
+  vertical-align: top;
+  overflow-wrap: break-word;
+  block-size: 3.4375rem;
+  color: var(--ins-text-primary);
+  background: inherit;
+}
+.ins-table__td_size_l,
+.ins-table_size_l .ins-table__td {
+  block-size: 4.9375rem;
+}
+.ins-table__td_font-size_l,
+.ins-table_font-size_l .ins-table__td {
+  font: var(--ins-font-text-l);
+}
+.ins-table__td_font-size_s,
+.ins-table_font-size_s .ins-table__td {
+  font: var(--ins-font-text-s);
+}
+.ins-table__td_align_center {
+  vertical-align: middle;
+}
+.ins-table__td,
+.ins-table__th {
+  box-sizing: border-box;
+  text-align: start;
+}
+.ins-table_size_l .ins-table__td::before,
+.ins-table_size_l .ins-table__th::before {
+  inline-size: 1rem;
+  border-start-start-radius: 1rem;
+  border-end-start-radius: 1rem;
+}
+.ins-table__td_first::before,
+.ins-table__th_first::before,
+.ins-table__td_last::before,
+.ins-table__th_last::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  inline-size: 0.75rem;
+  block-size: 100%;
+  background: inherit;
+  border-start-start-radius: 0.75rem;
+  border-end-start-radius: 0.75rem;
+}
+.ins-table__td_first,
+.ins-table__th_first {
+  position: relative;
+  padding-left: 0;
+  overflow: visible;
+}
+.ins-table__td_first::before,
+.ins-table__th_first::before {
+  right: 100%;
+}
+.ins-table__td_last,
+.ins-table__th_last {
+  position: relative;
+  padding-right: 0;
+  overflow: visible;
+}
+.ins-table__td_last::before,
+.ins-table__th_last::before {
+  left: 100%;
+  transform: scaleX(-1);
+}
+.ins-table__td_text_center,
+.ins-table__th_text_center {
+  text-align: center;
+}
+.ins-table__td_text_right,
+.ins-table__th_text_right {
+  text-align: end;
+}
+.ins-table__td_text_overflow,
+.ins-table__th_text_overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ins-table__subtext {
+  font: var(--ins-font-text-s);
+  margin: 0.25rem 0 0;
+  color: var(--ins-text-tertiary);
+}
+.ins-table__sort {
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  line-height: inherit;
+  text-decoration: none;
+  transition-property: color;
+  transition-duration: var(--ins-duration, 300ms);
+  transition-timing-function: ease-in-out;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+}
+.ins-table__sort:hover {
+  color: var(--ins-text-primary);
+}
+.ins-table__sort_active {
+  color: var(--ins-text-action);
+}
+.ins-table__sort_active:hover {
+  color: var(--ins-text-action-hover);
+}
+.ins-table__sort-icon {
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+  left: 100%;
+  margin-left: 0.125rem;
+  inline-size: 1rem;
+  block-size: 1rem;
+  flex-shrink: 0;
+  opacity: 0;
+}
+.ins-table__sort_active .ins-table__sort-icon,
+.ins-table__sort:hover .ins-table__sort-icon {
+  transition-property: transform;
+  transition-duration: var(--ins-duration, 300ms);
+  transition-timing-function: ease-in-out;
+  opacity: 1;
+}
+.ins-table__sort_active.ins-table__sort_up .ins-table__sort-icon {
+  transform: rotate(180deg) translateY(50%);
+}
+.ins-required::after {
+  content: '*';
+}
+.ins-required_float::after {
+  position: absolute;
+}
+.ins-required_spacing::after {
+  content: '\0000a0*';
+}