@tiny-design/react 1.0.4

package/lib/style/base.css

@@ -0,0 +1,1162 @@
+:root {
+  --ty-color-bg: #fff;
+  --ty-color-bg-elevated: #fff;
+  --ty-color-bg-container: #fff;
+  --ty-color-bg-spotlight: #f5f5f5;
+  --ty-color-bg-disabled: #f5f5f5;
+  --ty-color-bg-layout: #fff;
+  --ty-color-text: rgba(0, 0, 0, 0.85);
+  --ty-color-text-secondary: rgba(0, 0, 0, 0.65);
+  --ty-color-text-tertiary: rgba(0, 0, 0, 0.45);
+  --ty-color-text-quaternary: rgba(0, 0, 0, 0.25);
+  --ty-color-text-heading: rgba(0, 0, 0, 0.85);
+  --ty-color-text-label: rgba(0, 0, 0, 0.85);
+  --ty-color-text-placeholder: #bfbfbf;
+  --ty-color-primary: #6e41bf;
+  --ty-color-primary-hover: #8b62d0;
+  --ty-color-primary-active: #5a30a8;
+  --ty-color-primary-bg: #f3eefa;
+  --ty-color-primary-border: #c4a7e6;
+  --ty-color-primary-bg-hover: #ece3f7;
+  --ty-color-primary-text-hover: #8b62d0;
+  --ty-color-border: #d9d9d9;
+  --ty-color-border-secondary: #e8e8e8;
+  --ty-color-border-light: #f0f0f0;
+  --ty-color-border-btn-default: #d0d0d5;
+  --ty-color-fill: #fafafa;
+  --ty-color-fill-secondary: #f5f5f5;
+  --ty-color-fill-tertiary: #f0f0f0;
+  --ty-color-success: #52c41a;
+  --ty-color-success-bg: #f6ffed;
+  --ty-color-success-border: #b7eb8f;
+  --ty-color-success-text: #49b10e;
+  --ty-color-warning: #ff9800;
+  --ty-color-warning-bg: #fffbe6;
+  --ty-color-warning-border: #ffe58f;
+  --ty-color-warning-text: #d48806;
+  --ty-color-danger: #f44336;
+  --ty-color-danger-bg: #fff1f0;
+  --ty-color-danger-border: #ffa39e;
+  --ty-color-danger-text: #cf1322;
+  --ty-color-danger-hover: #ff7875;
+  --ty-color-info: #1890ff;
+  --ty-color-info-bg: #e6f7ff;
+  --ty-color-info-border: #91d5ff;
+  --ty-color-info-text: #096dd9;
+  --ty-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --ty-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --ty-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --ty-shadow-popup: 0 3px 6px -4px rgba(0, 0, 0, 0.12) , 0 6px 16px 0 rgba(0, 0, 0, 0.08) , 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --ty-shadow-card: 0 1px 6px rgba(0, 0, 0, 0.12);
+  --ty-shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --ty-shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.15) , 0 1px 1px rgba(0, 0, 0, 0.075);
+  --ty-color-overlay-bg: rgba(0, 0, 0, 0.55);
+  --ty-color-overlay-inverted: rgba(255, 255, 255, 0.75);
+  --ty-btn-default-color: #32325d;
+  --ty-btn-default-bg: #fff;
+  --ty-btn-default-border: #d0d0d5;
+  --ty-btn-default-hover-bg: #fff;
+  --ty-btn-default-hover-border: #6e41bf;
+  --ty-btn-default-hover-color: #6e41bf;
+  --ty-btn-default-active-bg: #f2f2f2;
+  --ty-btn-default-active-border: #6e41bf;
+  --ty-btn-default-active-color: #6e41bf;
+  --ty-btn-disabled-color: rgba(0, 0, 0, 0.25);
+  --ty-btn-disabled-bg: #f5f5f5;
+  --ty-btn-disabled-border: #d9d9d9;
+  --ty-btn-loading-bg: #fff;
+  --ty-btn-ghost-hover-bg: #f3eefa;
+  --ty-btn-ghost-active-bg: #ece3f7;
+  --ty-btn-outline-hover-bg: #f3eefa;
+  --ty-btn-outline-active-bg: #ece3f7;
+  --ty-btn-link-disabled-color: rgba(0, 0, 0, 0.25);
+  --ty-input-bg: #fff;
+  --ty-input-border: #d9d9d9;
+  --ty-input-disabled-bg: #f4f4f5;
+  --ty-input-disabled-color: #999;
+  --ty-input-addon-bg: #fafafa;
+  --ty-input-focus-shadow: 0 0 0 2px rgba(110, 65, 191, 0.2);
+  --ty-input-focus-border: rgba(110, 65, 191, 0.8);
+  --ty-select-dropdown-bg: #fff;
+  --ty-select-option-active-bg: #f5f5f5;
+  --ty-select-option-selected-bg: #f3eefa;
+  --ty-select-option-disabled-bg: #fff;
+  --ty-card-bg: #fff;
+  --ty-card-border: #e8e8e8;
+  --ty-card-header-color: rgba(0, 0, 0, 0.85);
+  --ty-card-shadow-border: rgba(0, 0, 0, 0.07);
+  --ty-modal-bg: #fff;
+  --ty-modal-header-bg: #fff;
+  --ty-modal-header-border: #e8e8e8;
+  --ty-modal-footer-border: #e8e8e8;
+  --ty-drawer-bg: #fff;
+  --ty-drawer-border: #e8e8e8;
+  --ty-menu-light-bg: #fff;
+  --ty-menu-light-color: #32325d;
+  --ty-menu-light-border: #f0f0f0;
+  --ty-menu-dark-bg: #001529;
+  --ty-menu-dark-color: rgba(255, 255, 255, 0.65);
+  --ty-menu-dark-border: #001529;
+  --ty-menu-divider-color: rgba(0, 0, 0, 0.1);
+  --ty-menu-group-title-color: rgba(0, 0, 0, 0.45);
+  --ty-notification-bg: #fff;
+  --ty-notification-close-color: rgba(0, 0, 0, 0.2);
+  --ty-notification-close-hover: rgba(0, 0, 0, 0.7);
+  --ty-message-bg: #fff;
+  --ty-badge-shadow: 0 0 0 1.5px #fff;
+  --ty-tag-bg: #fafafa;
+  --ty-tag-border: #d9d9d9;
+  --ty-tag-checkable-bg: #fff;
+  --ty-tag-magenta-color: #eb2f96;
+  --ty-tag-magenta-bg: #fff0f6;
+  --ty-tag-magenta-border: #ffadd2;
+  --ty-tag-red-color: #f5222d;
+  --ty-tag-red-bg: #fff1f0;
+  --ty-tag-red-border: #ffa39e;
+  --ty-tag-volcano-color: #fa541c;
+  --ty-tag-volcano-bg: #fff2e8;
+  --ty-tag-volcano-border: #ffbb96;
+  --ty-tag-orange-color: #fa8c16;
+  --ty-tag-orange-bg: #fff7e6;
+  --ty-tag-orange-border: #ffd591;
+  --ty-tag-gold-color: #faad14;
+  --ty-tag-gold-bg: #fffbe6;
+  --ty-tag-gold-border: #ffe58f;
+  --ty-tag-lime-color: #a0d911;
+  --ty-tag-lime-bg: #fcffe6;
+  --ty-tag-lime-border: #eaff8f;
+  --ty-tag-green-color: #52c41a;
+  --ty-tag-green-bg: #f6ffed;
+  --ty-tag-green-border: #b7eb8f;
+  --ty-tag-cyan-color: #13c2c2;
+  --ty-tag-cyan-bg: #e6fffb;
+  --ty-tag-cyan-border: #87e8de;
+  --ty-tag-blue-color: #1890ff;
+  --ty-tag-blue-bg: #e6f7ff;
+  --ty-tag-blue-border: #91d5ff;
+  --ty-tag-geekblue-color: #2f54eb;
+  --ty-tag-geekblue-bg: #f0f5ff;
+  --ty-tag-geekblue-border: #adc6ff;
+  --ty-tag-purple-color: #722ed1;
+  --ty-tag-purple-bg: #f9f0ff;
+  --ty-tag-purple-border: #d3adf7;
+  --ty-tabs-border: #f0f0f0;
+  --ty-tabs-card-bg: #fafafa;
+  --ty-tabs-card-active-bg: #fff;
+  --ty-collapse-bg: #fafafa;
+  --ty-collapse-border: #d9d9d9;
+  --ty-collapse-content-bg: #fff;
+  --ty-collapse-header-hover-bg: #efefef;
+  --ty-collapse-borderless-bg: #fff;
+  --ty-descriptions-label-bg: #fafafa;
+  --ty-descriptions-border: #dfe2e5;
+  --ty-steps-tail-color: #dcdcdc;
+  --ty-steps-icon-bg: #fff;
+  --ty-timeline-line-color: #e8e8e8;
+  --ty-timeline-dot-bg: #fff;
+  --ty-timeline-head-bg: #fff;
+  --ty-slider-rail-bg: #e4e8f1;
+  --ty-slider-thumb-bg: rgb(245, 248, 250);
+  --ty-slider-thumb-border: #9570d4;
+  --ty-slider-dot-bg: #fff;
+  --ty-slider-dot-border: #f0f0f0;
+  --ty-slider-dot-active-border: #9570d4;
+  --ty-slider-mark-color: rgba(0, 0, 0, 0.4);
+  --ty-slider-mark-active-color: rgba(0, 0, 0, 0.7);
+  --ty-progress-trail-bg: #e4e8f1;
+  --ty-progress-text-color: #48576a;
+  --ty-progress-circle-trail: #e5e9f2;
+  --ty-skeleton-bg: #f2f2f2;
+  --ty-skeleton-shimmer: linear-gradient(to right, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  --ty-kbd-bg: #f6f6f6;
+  --ty-kbd-border: #d8d8d8;
+  --ty-kbd-border-bottom: #ccc;
+  --ty-kbd-color: #333;
+  --ty-kbd-shadow: inset 0 -1px 0 #ccc;
+  --ty-transfer-border: #d9d9d9;
+  --ty-transfer-header-bg: #fff;
+  --ty-transfer-item-hover-bg: #f5f5f5;
+  --ty-transfer-footer-bg: #fff;
+  --ty-transfer-footer-border: #f0f0f0;
+  --ty-upload-dragger-bg: #fafafa;
+  --ty-upload-dragger-border: #d9d9d9;
+  --ty-upload-dragger-hover-bg: #efefef;
+  --ty-upload-item-hover-bg: #f5f5f5;
+  --ty-picker-input-bg: #fff;
+  --ty-picker-dropdown-bg: #fff;
+  --ty-picker-cell-hover-bg: #f5f5f5;
+  --ty-picker-cell-selected-hover-bg: #5a30a8;
+  --ty-picker-cell-disabled-bg: #f5f5f5;
+  --ty-picker-clear-bg: #fff;
+  --ty-split-bar-bg: #f8f8f9;
+  --ty-split-bar-border: #dcdee2;
+  --ty-split-bar-line: #d5d5d5;
+  --ty-popup-light-bg: #fff;
+  --ty-popup-dark-bg: #262626;
+  --ty-popup-arrow-shadow: rgba(0, 0, 0, 0.07);
+  --ty-layout-sidebar-bg: #12131a;
+  --ty-layout-sidebar-trigger-bg: rgb(0, 33, 64);
+  --ty-layout-sidebar-light-bg: #fff;
+  --ty-layout-sidebar-light-color: #333;
+  --ty-layout-sidebar-light-trigger-bg: #efefef;
+  --ty-layout-sidebar-light-trigger-icon: #bbb;
+  --ty-anchor-bg: #fff;
+  --ty-anchor-ink-bg: #f0f0f0;
+  --ty-anchor-ball-bg: #fff;
+  --ty-form-notice-bg: #fff7cc;
+  --ty-form-notice-color: #555;
+  --ty-form-error-color: #ff4d4f;
+  --ty-form-error-hover: #ff7875;
+  --ty-checkbox-bg: #fff;
+  --ty-checkbox-border: #d9d9d9;
+  --ty-checkbox-disabled-bg: #f5f5f5;
+  --ty-checkbox-check-color: #fff;
+  --ty-radio-bg: #fff;
+  --ty-radio-disabled-border: #d9d9d9;
+  --ty-radio-disabled-dot: rgba(0, 0, 0, 0.2);
+  --ty-switch-bg: rgba(0, 0, 0, 0.25);
+  --ty-switch-thumb-bg: #fff;
+  --ty-switch-thumb-border: rgba(0, 0, 0, 0.25);
+  --ty-switch-thumb-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.2);
+  --ty-divider-color: #e4e4e4;
+  --ty-divider-text-color: #333;
+  --ty-popover-dark-border: #4a4a4a;
+  --ty-native-select-bg: #fff;
+  --ty-native-select-disabled-bg: #ddd;
+  --ty-native-select-disabled-color: #a5a5a5;
+  --ty-pagination-bg: #fff;
+  --ty-pagination-disabled-bg: #f5f5f5;
+  --ty-pagination-disabled-active-bg: #dbdbdb;
+  --ty-pagination-disabled-color: #d9d9d9;
+  --ty-typography-heading-color: rgba(0, 0, 0, 0.85);
+  --ty-typography-body-color: rgba(0, 0, 0, 0.65);
+  --ty-typography-code-bg: rgba(0, 0, 0, 0.06);
+  --ty-typography-code-border: rgba(0, 0, 0, 0.06);
+  --ty-typography-mark-bg: #ffe58f;
+  --ty-result-content-bg: #fafafa;
+  --ty-empty-desc-color: rgba(0, 0, 0, 0.35);
+  --ty-carousel-arrow-bg: rgba(0, 0, 0, 0.25);
+  --ty-carousel-arrow-hover-bg: rgba(0, 0, 0, 0.45);
+  --ty-carousel-dot-bg: rgba(255, 255, 255, 0.3);
+  --ty-carousel-dot-hover-bg: rgba(255, 255, 255, 0.6);
+  --ty-carousel-dot-active-bg: #fff;
+  --ty-avatar-border: #fff;
+  --ty-avatar-presence-shadow: 0 0 0 0.1rem #fff;
+  --ty-back-top-bg: rgba(0, 0, 0, 0.3);
+  --ty-input-number-control-border: #d9d9d9;
+  --ty-input-number-control-active-bg: #f4f4f4;
+  --ty-input-number-icon-color: #999;
+  --ty-tree-arrow-color: #999;
+  --ty-tree-hover-bg: #f5f5f5;
+  --ty-textarea-counter-color: #666;
+  --ty-table-header-bg: #f6f9fc;
+  --ty-table-border: #e9ecef;
+  --ty-table-hover: #f6f9fc;
+  --ty-table-selected-bg: rgba(110, 65, 191, 0.06);
+  --ty-segmented-bg: #e9ecef;
+  --ty-segmented-active-bg: #fff;
+  --ty-cascader-bg: #fff;
+  --ty-cascader-border: #d9d9d9;
+  --ty-cascader-dropdown-bg: #fff;
+  --ty-cascader-hover: #f5f5f5;
+  --ty-cascader-selected-bg: rgba(110, 65, 191, 0.06);
+  --ty-calendar-bg: #fff;
+  --ty-calendar-border: #e9ecef;
+  --ty-calendar-hover: #f6f9fc;
+}
+
+html[data-tiny-theme=dark] {
+  --ty-color-bg: #141414;
+  --ty-color-bg-elevated: #1f1f1f;
+  --ty-color-bg-container: #1f1f1f;
+  --ty-color-bg-spotlight: #2a2a2a;
+  --ty-color-bg-disabled: #2a2a2a;
+  --ty-color-bg-layout: #141414;
+  --ty-color-text: rgba(255, 255, 255, 0.85);
+  --ty-color-text-secondary: rgba(255, 255, 255, 0.65);
+  --ty-color-text-tertiary: rgba(255, 255, 255, 0.45);
+  --ty-color-text-quaternary: rgba(255, 255, 255, 0.25);
+  --ty-color-text-heading: rgba(255, 255, 255, 0.85);
+  --ty-color-text-label: rgba(255, 255, 255, 0.85);
+  --ty-color-text-placeholder: #5c5c5c;
+  --ty-color-primary: #9065d0;
+  --ty-color-primary-hover: #a882dc;
+  --ty-color-primary-active: #7a50bf;
+  --ty-color-primary-bg: #1a1325;
+  --ty-color-primary-border: #5b3d8f;
+  --ty-color-primary-bg-hover: #231a33;
+  --ty-color-primary-text-hover: #a882dc;
+  --ty-color-border: #424242;
+  --ty-color-border-secondary: #363636;
+  --ty-color-border-light: #303030;
+  --ty-color-border-btn-default: #424242;
+  --ty-color-fill: #262626;
+  --ty-color-fill-secondary: #2a2a2a;
+  --ty-color-fill-tertiary: #303030;
+  --ty-color-success: #49aa19;
+  --ty-color-success-bg: #162312;
+  --ty-color-success-border: #274916;
+  --ty-color-success-text: #6abe39;
+  --ty-color-warning: #d89614;
+  --ty-color-warning-bg: #2b2111;
+  --ty-color-warning-border: #594214;
+  --ty-color-warning-text: #e8b339;
+  --ty-color-danger: #d32029;
+  --ty-color-danger-bg: #2a1215;
+  --ty-color-danger-border: #58181c;
+  --ty-color-danger-text: #e84749;
+  --ty-color-danger-hover: #e84749;
+  --ty-color-info: #177ddc;
+  --ty-color-info-bg: #111d2c;
+  --ty-color-info-border: #15395b;
+  --ty-color-info-text: #3c9ae8;
+  --ty-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
+  --ty-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
+  --ty-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
+  --ty-shadow-popup: 0 3px 6px -4px rgba(0, 0, 0, 0.48) , 0 6px 16px 0 rgba(0, 0, 0, 0.32) , 0 9px 28px 8px rgba(0, 0, 0, 0.2);
+  --ty-shadow-card: 0 1px 6px rgba(0, 0, 0, 0.35);
+  --ty-shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --ty-shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.05) , 0 1px 1px rgba(0, 0, 0, 0.2);
+  --ty-color-overlay-bg: rgba(0, 0, 0, 0.65);
+  --ty-color-overlay-inverted: rgba(50, 50, 50, 0.75);
+  --ty-btn-default-color: rgba(255, 255, 255, 0.85);
+  --ty-btn-default-bg: #1f1f1f;
+  --ty-btn-default-border: #424242;
+  --ty-btn-default-hover-bg: #1f1f1f;
+  --ty-btn-default-hover-border: #9065d0;
+  --ty-btn-default-hover-color: #9065d0;
+  --ty-btn-default-active-bg: #2a2a2a;
+  --ty-btn-default-active-border: #9065d0;
+  --ty-btn-default-active-color: #9065d0;
+  --ty-btn-disabled-color: rgba(255, 255, 255, 0.25);
+  --ty-btn-disabled-bg: #2a2a2a;
+  --ty-btn-disabled-border: #424242;
+  --ty-btn-loading-bg: #1f1f1f;
+  --ty-btn-ghost-hover-bg: #1a1325;
+  --ty-btn-ghost-active-bg: #231a33;
+  --ty-btn-outline-hover-bg: #1a1325;
+  --ty-btn-outline-active-bg: #231a33;
+  --ty-btn-link-disabled-color: rgba(255, 255, 255, 0.25);
+  --ty-input-bg: #1f1f1f;
+  --ty-input-border: #424242;
+  --ty-input-disabled-bg: #2a2a2a;
+  --ty-input-disabled-color: rgba(255, 255, 255, 0.25);
+  --ty-input-addon-bg: #262626;
+  --ty-input-focus-shadow: 0 0 0 2px rgba(144, 101, 208, 0.2);
+  --ty-input-focus-border: rgba(144, 101, 208, 0.8);
+  --ty-select-dropdown-bg: #1f1f1f;
+  --ty-select-option-active-bg: #2a2a2a;
+  --ty-select-option-selected-bg: #1a1325;
+  --ty-select-option-disabled-bg: #1f1f1f;
+  --ty-card-bg: #1f1f1f;
+  --ty-card-border: #363636;
+  --ty-card-header-color: rgba(255, 255, 255, 0.85);
+  --ty-card-shadow-border: rgba(0, 0, 0, 0.2);
+  --ty-modal-bg: #1f1f1f;
+  --ty-modal-header-bg: #1f1f1f;
+  --ty-modal-header-border: #363636;
+  --ty-modal-footer-border: #363636;
+  --ty-drawer-bg: #1f1f1f;
+  --ty-drawer-border: #363636;
+  --ty-menu-light-bg: #1f1f1f;
+  --ty-menu-light-color: rgba(255, 255, 255, 0.85);
+  --ty-menu-light-border: #303030;
+  --ty-menu-dark-bg: #001529;
+  --ty-menu-dark-color: rgba(255, 255, 255, 0.65);
+  --ty-menu-dark-border: #001529;
+  --ty-menu-divider-color: rgba(255, 255, 255, 0.1);
+  --ty-menu-group-title-color: rgba(255, 255, 255, 0.45);
+  --ty-notification-bg: #1f1f1f;
+  --ty-notification-close-color: rgba(255, 255, 255, 0.2);
+  --ty-notification-close-hover: rgba(255, 255, 255, 0.7);
+  --ty-message-bg: #1f1f1f;
+  --ty-badge-shadow: 0 0 0 1.5px #1f1f1f;
+  --ty-tag-bg: #262626;
+  --ty-tag-border: #424242;
+  --ty-tag-checkable-bg: #1f1f1f;
+  --ty-tag-magenta-color: #e0529c;
+  --ty-tag-magenta-bg: #291321;
+  --ty-tag-magenta-border: #55162b;
+  --ty-tag-red-color: #e84749;
+  --ty-tag-red-bg: #2a1215;
+  --ty-tag-red-border: #58181c;
+  --ty-tag-volcano-color: #e87040;
+  --ty-tag-volcano-bg: #2b1611;
+  --ty-tag-volcano-border: #592716;
+  --ty-tag-orange-color: #e89a3c;
+  --ty-tag-orange-bg: #2b1d11;
+  --ty-tag-orange-border: #593815;
+  --ty-tag-gold-color: #e8b339;
+  --ty-tag-gold-bg: #2b2111;
+  --ty-tag-gold-border: #594214;
+  --ty-tag-lime-color: #8bbb11;
+  --ty-tag-lime-bg: #1a2611;
+  --ty-tag-lime-border: #3e4f13;
+  --ty-tag-green-color: #6abe39;
+  --ty-tag-green-bg: #162312;
+  --ty-tag-green-border: #274916;
+  --ty-tag-cyan-color: #33bcb7;
+  --ty-tag-cyan-bg: #112123;
+  --ty-tag-cyan-border: #144848;
+  --ty-tag-blue-color: #3c9ae8;
+  --ty-tag-blue-bg: #111d2c;
+  --ty-tag-blue-border: #15395b;
+  --ty-tag-geekblue-color: #5273e0;
+  --ty-tag-geekblue-bg: #131a2e;
+  --ty-tag-geekblue-border: #1c2d57;
+  --ty-tag-purple-color: #854eca;
+  --ty-tag-purple-bg: #1a1325;
+  --ty-tag-purple-border: #301c4d;
+  --ty-tabs-border: #303030;
+  --ty-tabs-card-bg: #262626;
+  --ty-tabs-card-active-bg: #1f1f1f;
+  --ty-collapse-bg: #262626;
+  --ty-collapse-border: #424242;
+  --ty-collapse-content-bg: #1f1f1f;
+  --ty-collapse-header-hover-bg: #303030;
+  --ty-collapse-borderless-bg: #1f1f1f;
+  --ty-descriptions-label-bg: #262626;
+  --ty-descriptions-border: #363636;
+  --ty-steps-tail-color: #424242;
+  --ty-steps-icon-bg: #1f1f1f;
+  --ty-timeline-line-color: #363636;
+  --ty-timeline-dot-bg: #1f1f1f;
+  --ty-timeline-head-bg: #1f1f1f;
+  --ty-slider-rail-bg: #363636;
+  --ty-slider-thumb-bg: #1f1f1f;
+  --ty-slider-thumb-border: #9065d0;
+  --ty-slider-dot-bg: #1f1f1f;
+  --ty-slider-dot-border: #424242;
+  --ty-slider-dot-active-border: #9065d0;
+  --ty-slider-mark-color: rgba(255, 255, 255, 0.4);
+  --ty-slider-mark-active-color: rgba(255, 255, 255, 0.7);
+  --ty-progress-trail-bg: #363636;
+  --ty-progress-text-color: rgba(255, 255, 255, 0.65);
+  --ty-progress-circle-trail: #363636;
+  --ty-skeleton-bg: #303030;
+  --ty-skeleton-shimmer: linear-gradient(to right, #303030 25%, #3a3a3a 37%, #303030 63%);
+  --ty-kbd-bg: #2a2a2a;
+  --ty-kbd-border: #424242;
+  --ty-kbd-border-bottom: #363636;
+  --ty-kbd-color: rgba(255, 255, 255, 0.85);
+  --ty-kbd-shadow: inset 0 -1px 0 #363636;
+  --ty-transfer-border: #424242;
+  --ty-transfer-header-bg: #1f1f1f;
+  --ty-transfer-item-hover-bg: #2a2a2a;
+  --ty-transfer-footer-bg: #1f1f1f;
+  --ty-transfer-footer-border: #303030;
+  --ty-upload-dragger-bg: #262626;
+  --ty-upload-dragger-border: #424242;
+  --ty-upload-dragger-hover-bg: #303030;
+  --ty-upload-item-hover-bg: #2a2a2a;
+  --ty-picker-input-bg: #1f1f1f;
+  --ty-picker-dropdown-bg: #1f1f1f;
+  --ty-picker-cell-hover-bg: #2a2a2a;
+  --ty-picker-cell-selected-hover-bg: #7a50bf;
+  --ty-picker-cell-disabled-bg: #2a2a2a;
+  --ty-picker-clear-bg: #1f1f1f;
+  --ty-split-bar-bg: #262626;
+  --ty-split-bar-border: #424242;
+  --ty-split-bar-line: #525252;
+  --ty-popup-light-bg: #1f1f1f;
+  --ty-popup-dark-bg: #363636;
+  --ty-popup-arrow-shadow: rgba(0, 0, 0, 0.2);
+  --ty-layout-sidebar-bg: #12131a;
+  --ty-layout-sidebar-trigger-bg: rgb(0, 33, 64);
+  --ty-layout-sidebar-light-bg: #1f1f1f;
+  --ty-layout-sidebar-light-color: rgba(255, 255, 255, 0.85);
+  --ty-layout-sidebar-light-trigger-bg: #2a2a2a;
+  --ty-layout-sidebar-light-trigger-icon: #666;
+  --ty-anchor-bg: #1f1f1f;
+  --ty-anchor-ink-bg: #303030;
+  --ty-anchor-ball-bg: #1f1f1f;
+  --ty-form-notice-bg: #2b2111;
+  --ty-form-notice-color: rgba(255, 255, 255, 0.65);
+  --ty-form-error-color: #e84749;
+  --ty-form-error-hover: #d32029;
+  --ty-checkbox-bg: #1f1f1f;
+  --ty-checkbox-border: #424242;
+  --ty-checkbox-disabled-bg: #2a2a2a;
+  --ty-checkbox-check-color: #fff;
+  --ty-radio-bg: #1f1f1f;
+  --ty-radio-disabled-border: #424242;
+  --ty-radio-disabled-dot: rgba(255, 255, 255, 0.2);
+  --ty-switch-bg: rgba(255, 255, 255, 0.25);
+  --ty-switch-thumb-bg: #e8e8e8;
+  --ty-switch-thumb-border: rgba(255, 255, 255, 0.25);
+  --ty-switch-thumb-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+  --ty-divider-color: #363636;
+  --ty-divider-text-color: rgba(255, 255, 255, 0.85);
+  --ty-popover-dark-border: #525252;
+  --ty-native-select-bg: #1f1f1f;
+  --ty-native-select-disabled-bg: #2a2a2a;
+  --ty-native-select-disabled-color: rgba(255, 255, 255, 0.25);
+  --ty-pagination-bg: #1f1f1f;
+  --ty-pagination-disabled-bg: #2a2a2a;
+  --ty-pagination-disabled-active-bg: #424242;
+  --ty-pagination-disabled-color: #525252;
+  --ty-typography-heading-color: rgba(255, 255, 255, 0.85);
+  --ty-typography-body-color: rgba(255, 255, 255, 0.65);
+  --ty-typography-code-bg: rgba(255, 255, 255, 0.06);
+  --ty-typography-code-border: rgba(255, 255, 255, 0.06);
+  --ty-typography-mark-bg: #594214;
+  --ty-result-content-bg: #262626;
+  --ty-empty-desc-color: rgba(255, 255, 255, 0.35);
+  --ty-carousel-arrow-bg: rgba(255, 255, 255, 0.15);
+  --ty-carousel-arrow-hover-bg: rgba(255, 255, 255, 0.25);
+  --ty-carousel-dot-bg: rgba(255, 255, 255, 0.3);
+  --ty-carousel-dot-hover-bg: rgba(255, 255, 255, 0.6);
+  --ty-carousel-dot-active-bg: #fff;
+  --ty-avatar-border: #1f1f1f;
+  --ty-avatar-presence-shadow: 0 0 0 0.1rem #1f1f1f;
+  --ty-back-top-bg: rgba(255, 255, 255, 0.2);
+  --ty-input-number-control-border: #424242;
+  --ty-input-number-control-active-bg: #2a2a2a;
+  --ty-input-number-icon-color: #666;
+  --ty-tree-arrow-color: #666;
+  --ty-tree-hover-bg: #2a2a2a;
+  --ty-textarea-counter-color: rgba(255, 255, 255, 0.45);
+  --ty-table-header-bg: #262626;
+  --ty-table-border: #363636;
+  --ty-table-hover: #2a2a2a;
+  --ty-table-selected-bg: rgba(144, 101, 208, 0.1);
+  --ty-segmented-bg: #2a2a2a;
+  --ty-segmented-active-bg: #1f1f1f;
+  --ty-cascader-bg: #1f1f1f;
+  --ty-cascader-border: #424242;
+  --ty-cascader-dropdown-bg: #1f1f1f;
+  --ty-cascader-hover: #2a2a2a;
+  --ty-cascader-selected-bg: rgba(144, 101, 208, 0.1);
+  --ty-calendar-bg: #1f1f1f;
+  --ty-calendar-border: #363636;
+  --ty-calendar-hover: #2a2a2a;
+}
+
+@media (prefers-color-scheme: dark) {
+  html[data-tiny-theme=system] {
+    --ty-color-bg: #141414;
+    --ty-color-bg-elevated: #1f1f1f;
+    --ty-color-bg-container: #1f1f1f;
+    --ty-color-bg-spotlight: #2a2a2a;
+    --ty-color-bg-disabled: #2a2a2a;
+    --ty-color-bg-layout: #141414;
+    --ty-color-text: rgba(255, 255, 255, 0.85);
+    --ty-color-text-secondary: rgba(255, 255, 255, 0.65);
+    --ty-color-text-tertiary: rgba(255, 255, 255, 0.45);
+    --ty-color-text-quaternary: rgba(255, 255, 255, 0.25);
+    --ty-color-text-heading: rgba(255, 255, 255, 0.85);
+    --ty-color-text-label: rgba(255, 255, 255, 0.85);
+    --ty-color-text-placeholder: #5c5c5c;
+    --ty-color-primary: #9065d0;
+    --ty-color-primary-hover: #a882dc;
+    --ty-color-primary-active: #7a50bf;
+    --ty-color-primary-bg: #1a1325;
+    --ty-color-primary-border: #5b3d8f;
+    --ty-color-primary-bg-hover: #231a33;
+    --ty-color-primary-text-hover: #a882dc;
+    --ty-color-border: #424242;
+    --ty-color-border-secondary: #363636;
+    --ty-color-border-light: #303030;
+    --ty-color-border-btn-default: #424242;
+    --ty-color-fill: #262626;
+    --ty-color-fill-secondary: #2a2a2a;
+    --ty-color-fill-tertiary: #303030;
+    --ty-color-success: #49aa19;
+    --ty-color-success-bg: #162312;
+    --ty-color-success-border: #274916;
+    --ty-color-success-text: #6abe39;
+    --ty-color-warning: #d89614;
+    --ty-color-warning-bg: #2b2111;
+    --ty-color-warning-border: #594214;
+    --ty-color-warning-text: #e8b339;
+    --ty-color-danger: #d32029;
+    --ty-color-danger-bg: #2a1215;
+    --ty-color-danger-border: #58181c;
+    --ty-color-danger-text: #e84749;
+    --ty-color-danger-hover: #e84749;
+    --ty-color-info: #177ddc;
+    --ty-color-info-bg: #111d2c;
+    --ty-color-info-border: #15395b;
+    --ty-color-info-text: #3c9ae8;
+    --ty-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
+    --ty-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
+    --ty-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
+    --ty-shadow-popup: 0 3px 6px -4px rgba(0, 0, 0, 0.48) , 0 6px 16px 0 rgba(0, 0, 0, 0.32) , 0 9px 28px 8px rgba(0, 0, 0, 0.2);
+    --ty-shadow-card: 0 1px 6px rgba(0, 0, 0, 0.35);
+    --ty-shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.45);
+    --ty-shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.05) , 0 1px 1px rgba(0, 0, 0, 0.2);
+    --ty-color-overlay-bg: rgba(0, 0, 0, 0.65);
+    --ty-color-overlay-inverted: rgba(50, 50, 50, 0.75);
+    --ty-btn-default-color: rgba(255, 255, 255, 0.85);
+    --ty-btn-default-bg: #1f1f1f;
+    --ty-btn-default-border: #424242;
+    --ty-btn-default-hover-bg: #1f1f1f;
+    --ty-btn-default-hover-border: #9065d0;
+    --ty-btn-default-hover-color: #9065d0;
+    --ty-btn-default-active-bg: #2a2a2a;
+    --ty-btn-default-active-border: #9065d0;
+    --ty-btn-default-active-color: #9065d0;
+    --ty-btn-disabled-color: rgba(255, 255, 255, 0.25);
+    --ty-btn-disabled-bg: #2a2a2a;
+    --ty-btn-disabled-border: #424242;
+    --ty-btn-loading-bg: #1f1f1f;
+    --ty-btn-ghost-hover-bg: #1a1325;
+    --ty-btn-ghost-active-bg: #231a33;
+    --ty-btn-outline-hover-bg: #1a1325;
+    --ty-btn-outline-active-bg: #231a33;
+    --ty-btn-link-disabled-color: rgba(255, 255, 255, 0.25);
+    --ty-input-bg: #1f1f1f;
+    --ty-input-border: #424242;
+    --ty-input-disabled-bg: #2a2a2a;
+    --ty-input-disabled-color: rgba(255, 255, 255, 0.25);
+    --ty-input-addon-bg: #262626;
+    --ty-input-focus-shadow: 0 0 0 2px rgba(144, 101, 208, 0.2);
+    --ty-input-focus-border: rgba(144, 101, 208, 0.8);
+    --ty-select-dropdown-bg: #1f1f1f;
+    --ty-select-option-active-bg: #2a2a2a;
+    --ty-select-option-selected-bg: #1a1325;
+    --ty-select-option-disabled-bg: #1f1f1f;
+    --ty-card-bg: #1f1f1f;
+    --ty-card-border: #363636;
+    --ty-card-header-color: rgba(255, 255, 255, 0.85);
+    --ty-card-shadow-border: rgba(0, 0, 0, 0.2);
+    --ty-modal-bg: #1f1f1f;
+    --ty-modal-header-bg: #1f1f1f;
+    --ty-modal-header-border: #363636;
+    --ty-modal-footer-border: #363636;
+    --ty-drawer-bg: #1f1f1f;
+    --ty-drawer-border: #363636;
+    --ty-menu-light-bg: #1f1f1f;
+    --ty-menu-light-color: rgba(255, 255, 255, 0.85);
+    --ty-menu-light-border: #303030;
+    --ty-menu-dark-bg: #001529;
+    --ty-menu-dark-color: rgba(255, 255, 255, 0.65);
+    --ty-menu-dark-border: #001529;
+    --ty-menu-divider-color: rgba(255, 255, 255, 0.1);
+    --ty-menu-group-title-color: rgba(255, 255, 255, 0.45);
+    --ty-notification-bg: #1f1f1f;
+    --ty-notification-close-color: rgba(255, 255, 255, 0.2);
+    --ty-notification-close-hover: rgba(255, 255, 255, 0.7);
+    --ty-message-bg: #1f1f1f;
+    --ty-badge-shadow: 0 0 0 1.5px #1f1f1f;
+    --ty-tag-bg: #262626;
+    --ty-tag-border: #424242;
+    --ty-tag-checkable-bg: #1f1f1f;
+    --ty-tag-magenta-color: #e0529c;
+    --ty-tag-magenta-bg: #291321;
+    --ty-tag-magenta-border: #55162b;
+    --ty-tag-red-color: #e84749;
+    --ty-tag-red-bg: #2a1215;
+    --ty-tag-red-border: #58181c;
+    --ty-tag-volcano-color: #e87040;
+    --ty-tag-volcano-bg: #2b1611;
+    --ty-tag-volcano-border: #592716;
+    --ty-tag-orange-color: #e89a3c;
+    --ty-tag-orange-bg: #2b1d11;
+    --ty-tag-orange-border: #593815;
+    --ty-tag-gold-color: #e8b339;
+    --ty-tag-gold-bg: #2b2111;
+    --ty-tag-gold-border: #594214;
+    --ty-tag-lime-color: #8bbb11;
+    --ty-tag-lime-bg: #1a2611;
+    --ty-tag-lime-border: #3e4f13;
+    --ty-tag-green-color: #6abe39;
+    --ty-tag-green-bg: #162312;
+    --ty-tag-green-border: #274916;
+    --ty-tag-cyan-color: #33bcb7;
+    --ty-tag-cyan-bg: #112123;
+    --ty-tag-cyan-border: #144848;
+    --ty-tag-blue-color: #3c9ae8;
+    --ty-tag-blue-bg: #111d2c;
+    --ty-tag-blue-border: #15395b;
+    --ty-tag-geekblue-color: #5273e0;
+    --ty-tag-geekblue-bg: #131a2e;
+    --ty-tag-geekblue-border: #1c2d57;
+    --ty-tag-purple-color: #854eca;
+    --ty-tag-purple-bg: #1a1325;
+    --ty-tag-purple-border: #301c4d;
+    --ty-tabs-border: #303030;
+    --ty-tabs-card-bg: #262626;
+    --ty-tabs-card-active-bg: #1f1f1f;
+    --ty-collapse-bg: #262626;
+    --ty-collapse-border: #424242;
+    --ty-collapse-content-bg: #1f1f1f;
+    --ty-collapse-header-hover-bg: #303030;
+    --ty-collapse-borderless-bg: #1f1f1f;
+    --ty-descriptions-label-bg: #262626;
+    --ty-descriptions-border: #363636;
+    --ty-steps-tail-color: #424242;
+    --ty-steps-icon-bg: #1f1f1f;
+    --ty-timeline-line-color: #363636;
+    --ty-timeline-dot-bg: #1f1f1f;
+    --ty-timeline-head-bg: #1f1f1f;
+    --ty-slider-rail-bg: #363636;
+    --ty-slider-thumb-bg: #1f1f1f;
+    --ty-slider-thumb-border: #9065d0;
+    --ty-slider-dot-bg: #1f1f1f;
+    --ty-slider-dot-border: #424242;
+    --ty-slider-dot-active-border: #9065d0;
+    --ty-slider-mark-color: rgba(255, 255, 255, 0.4);
+    --ty-slider-mark-active-color: rgba(255, 255, 255, 0.7);
+    --ty-progress-trail-bg: #363636;
+    --ty-progress-text-color: rgba(255, 255, 255, 0.65);
+    --ty-progress-circle-trail: #363636;
+    --ty-skeleton-bg: #303030;
+    --ty-skeleton-shimmer: linear-gradient(to right, #303030 25%, #3a3a3a 37%, #303030 63%);
+    --ty-kbd-bg: #2a2a2a;
+    --ty-kbd-border: #424242;
+    --ty-kbd-border-bottom: #363636;
+    --ty-kbd-color: rgba(255, 255, 255, 0.85);
+    --ty-kbd-shadow: inset 0 -1px 0 #363636;
+    --ty-transfer-border: #424242;
+    --ty-transfer-header-bg: #1f1f1f;
+    --ty-transfer-item-hover-bg: #2a2a2a;
+    --ty-transfer-footer-bg: #1f1f1f;
+    --ty-transfer-footer-border: #303030;
+    --ty-upload-dragger-bg: #262626;
+    --ty-upload-dragger-border: #424242;
+    --ty-upload-dragger-hover-bg: #303030;
+    --ty-upload-item-hover-bg: #2a2a2a;
+    --ty-picker-input-bg: #1f1f1f;
+    --ty-picker-dropdown-bg: #1f1f1f;
+    --ty-picker-cell-hover-bg: #2a2a2a;
+    --ty-picker-cell-selected-hover-bg: #7a50bf;
+    --ty-picker-cell-disabled-bg: #2a2a2a;
+    --ty-picker-clear-bg: #1f1f1f;
+    --ty-split-bar-bg: #262626;
+    --ty-split-bar-border: #424242;
+    --ty-split-bar-line: #525252;
+    --ty-popup-light-bg: #1f1f1f;
+    --ty-popup-dark-bg: #363636;
+    --ty-popup-arrow-shadow: rgba(0, 0, 0, 0.2);
+    --ty-layout-sidebar-bg: #12131a;
+    --ty-layout-sidebar-trigger-bg: rgb(0, 33, 64);
+    --ty-layout-sidebar-light-bg: #1f1f1f;
+    --ty-layout-sidebar-light-color: rgba(255, 255, 255, 0.85);
+    --ty-layout-sidebar-light-trigger-bg: #2a2a2a;
+    --ty-layout-sidebar-light-trigger-icon: #666;
+    --ty-anchor-bg: #1f1f1f;
+    --ty-anchor-ink-bg: #303030;
+    --ty-anchor-ball-bg: #1f1f1f;
+    --ty-form-notice-bg: #2b2111;
+    --ty-form-notice-color: rgba(255, 255, 255, 0.65);
+    --ty-form-error-color: #e84749;
+    --ty-form-error-hover: #d32029;
+    --ty-checkbox-bg: #1f1f1f;
+    --ty-checkbox-border: #424242;
+    --ty-checkbox-disabled-bg: #2a2a2a;
+    --ty-checkbox-check-color: #fff;
+    --ty-radio-bg: #1f1f1f;
+    --ty-radio-disabled-border: #424242;
+    --ty-radio-disabled-dot: rgba(255, 255, 255, 0.2);
+    --ty-switch-bg: rgba(255, 255, 255, 0.25);
+    --ty-switch-thumb-bg: #e8e8e8;
+    --ty-switch-thumb-border: rgba(255, 255, 255, 0.25);
+    --ty-switch-thumb-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+    --ty-divider-color: #363636;
+    --ty-divider-text-color: rgba(255, 255, 255, 0.85);
+    --ty-popover-dark-border: #525252;
+    --ty-native-select-bg: #1f1f1f;
+    --ty-native-select-disabled-bg: #2a2a2a;
+    --ty-native-select-disabled-color: rgba(255, 255, 255, 0.25);
+    --ty-pagination-bg: #1f1f1f;
+    --ty-pagination-disabled-bg: #2a2a2a;
+    --ty-pagination-disabled-active-bg: #424242;
+    --ty-pagination-disabled-color: #525252;
+    --ty-typography-heading-color: rgba(255, 255, 255, 0.85);
+    --ty-typography-body-color: rgba(255, 255, 255, 0.65);
+    --ty-typography-code-bg: rgba(255, 255, 255, 0.06);
+    --ty-typography-code-border: rgba(255, 255, 255, 0.06);
+    --ty-typography-mark-bg: #594214;
+    --ty-result-content-bg: #262626;
+    --ty-empty-desc-color: rgba(255, 255, 255, 0.35);
+    --ty-carousel-arrow-bg: rgba(255, 255, 255, 0.15);
+    --ty-carousel-arrow-hover-bg: rgba(255, 255, 255, 0.25);
+    --ty-carousel-dot-bg: rgba(255, 255, 255, 0.3);
+    --ty-carousel-dot-hover-bg: rgba(255, 255, 255, 0.6);
+    --ty-carousel-dot-active-bg: #fff;
+    --ty-avatar-border: #1f1f1f;
+    --ty-avatar-presence-shadow: 0 0 0 0.1rem #1f1f1f;
+    --ty-back-top-bg: rgba(255, 255, 255, 0.2);
+    --ty-input-number-control-border: #424242;
+    --ty-input-number-control-active-bg: #2a2a2a;
+    --ty-input-number-icon-color: #666;
+    --ty-tree-arrow-color: #666;
+    --ty-tree-hover-bg: #2a2a2a;
+    --ty-textarea-counter-color: rgba(255, 255, 255, 0.45);
+    --ty-table-header-bg: #262626;
+    --ty-table-border: #363636;
+    --ty-table-hover: #2a2a2a;
+    --ty-table-selected-bg: rgba(144, 101, 208, 0.1);
+    --ty-segmented-bg: #2a2a2a;
+    --ty-segmented-active-bg: #1f1f1f;
+    --ty-cascader-bg: #1f1f1f;
+    --ty-cascader-border: #424242;
+    --ty-cascader-dropdown-bg: #1f1f1f;
+    --ty-cascader-hover: #2a2a2a;
+    --ty-cascader-selected-bg: rgba(144, 101, 208, 0.1);
+    --ty-calendar-bg: #1f1f1f;
+    --ty-calendar-border: #363636;
+    --ty-calendar-hover: #2a2a2a;
+  }
+}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  font-size: 14px;
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.75rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+  color: var(--ty-color-primary);
+  text-decoration: none;
+  cursor: pointer;
+}
+a:hover {
+  color: var(--ty-color-primary-hover);
+  text-decoration: underline;
+}
+
+a:not([href]), a:not([href]):hover {
+  text-decoration: none;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre,
+code,
+kbd,
+samp {
+  font-family: lucida console, consolas, monaco, andale mono, ubuntu mono, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: 0;
+}
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type=search] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
+
+@keyframes ty-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ty-rotate-reverse {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+@keyframes ty-processing {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.8);
+    opacity: 0;
+  }
+}