.tui-btn, .tui-tag, .tui-choice, .tui-field, .tui-input, .tui-textarea, .tui-select, .tui-input-wrap,.tui-alert, .tui-notification, .tui-notification *, .tui-btn-select, .tui-btn-select__option {box-sizing: border-box;}:is(.tui-btn, .tui-tag, .tui-btn-select__option, .tui-notification__close, .tui-input, .tui-textarea, .tui-select):focus-visible {outline: 2px solid var(--info-main);outline-offset: 3px;}.tui-text-sm { font: var(--font-weight-sm) var(--font-size-sm)/normal var(--font-family-sm); }.tui-text-base { font: var(--font-weight-base) var(--font-size-base)/normal var(--font-family-base); }.tui-text-lg { font: var(--font-weight-lg) var(--font-size-lg)/normal var(--font-family-lg); }.tui-text-xl { font: var(--font-weight-xl) var(--font-size-xl)/normal var(--font-family-xl); }.tui-text-2xl { font: var(--font-weight-2xl) var(--font-size-2xl)/normal var(--font-family-2xl); }.tui-text-3xl { font: var(--font-weight-3xl) var(--font-size-3xl)/normal var(--font-family-3xl); }.tui-tone-brand { --tone-main: var(--brand-main); --tone-subtle: var(--brand-subtle); --tone-border: var(--brand-border); --tone-on-dark: var(--brand-text-on-dark); --tone-on-light: var(--brand-text-on-light); }.tui-tone-secondary { --tone-main: var(--secondary-main); --tone-subtle: var(--secondary-subtle); --tone-border: var(--secondary-border); --tone-on-dark: var(--secondary-text-on-dark); --tone-on-light: var(--secondary-text-on-light); }.tui-tone-tertiary { --tone-main: var(--tertiary-main); --tone-subtle: var(--tertiary-subtle); --tone-border: var(--tertiary-border); --tone-on-dark: var(--tertiary-text-on-dark); --tone-on-light: var(--tertiary-text-on-light); }.tui-tone-info { --tone-main: var(--info-main); --tone-subtle: var(--info-subtle); --tone-border: var(--info-border); --tone-on-dark: var(--info-text-on-dark); --tone-on-light: var(--info-text-on-light); }.tui-tone-success { --tone-main: var(--success-main); --tone-subtle: var(--success-subtle); --tone-border: var(--success-border); --tone-on-dark: var(--success-text-on-dark); --tone-on-light: var(--success-text-on-light); }.tui-tone-warning { --tone-main: var(--warning-main); --tone-subtle: var(--warning-subtle); --tone-border: var(--warning-border); --tone-on-dark: var(--warning-text-on-dark); --tone-on-light: var(--warning-text-on-light); }.tui-tone-danger { --tone-main: var(--danger-main); --tone-subtle: var(--danger-subtle); --tone-border: var(--danger-border); --tone-on-dark: var(--danger-text-on-dark); --tone-on-light: var(--danger-text-on-light); }.tui-btn {--btn-bg: var(--button-brand-background);--btn-border: var(--button-brand-border);--btn-hover-bg: var(--button-brand-hover-background);--btn-hover-border: var(--button-brand-hover-border);--btn-text: var(--button-brand-text);position: relative; isolation: isolate; display: inline-flex;align-items: center; justify-content: center; gap: var(--space100);min-width: 120px; min-height: 54px; margin: 0;padding: var(--space200) var(--space300) var(--space200) var(--space300);border: 0; border-radius: var(--space075);color: var(--btn-text);font: 400 var(--font-size-lg)/22px var(--font-family-lg);text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer;transition: transform 180ms ease-out, box-shadow 180ms ease-out, color 180ms ease-out;}.tui-btn, .tui-btn:focus { background: var(--btn-bg); }.tui-btn::before {content: ""; position: absolute; inset: 0; padding: var(--space025);border-radius: inherit; background: var(--btn-border); pointer-events: none;-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor; mask-composite: exclude;}.tui-btn::after {content: ""; position: absolute; inset: 0; z-index: -1;border-radius: inherit; background: var(--btn-hover-bg);opacity: 0; pointer-events: none; transition: opacity 180ms ease-out;}.tui-btn:hover:not(:disabled):not([aria-disabled="true"])::after { opacity: 1; }.tui-btn:hover:not(:disabled):not([aria-disabled="true"])::before { background: var(--btn-hover-border); }.tui-btn > .icon { font-size: 18px; }.tui-btn--small { min-height: 38px; padding: var(--space100) var(--space150) var(--space100) var(--space200); }.tui-btn--icon, .tui-btn--icon-big, .tui-btn--icon-small { min-width: 0; flex: 0 0 auto; padding: 0; }.tui-btn--icon { width: 38px; height: 38px; min-height: 38px; }.tui-btn--icon-big { width: 54px; height: 54px; min-height: 54px; }.tui-btn--icon-big > .icon { font-size: 24px; }.tui-btn--icon-small { width: 26px; height: 26px; min-height: 26px; border-radius: var(--space050); }.tui-btn--icon-small::before { padding: 1px; }.tui-btn:disabled, .tui-btn:disabled:focus, .tui-btn[aria-disabled="true"] {background: var(--button-disabled-background); color: var(--button-disabled-text); cursor: not-allowed;}.tui-btn:disabled::before, .tui-btn[aria-disabled="true"]::before,.tui-btn:disabled::after, .tui-btn[aria-disabled="true"]::after { display: none; }.tui-btn--brand { --btn-bg: var(--button-brand-background); --btn-border: var(--button-brand-border); --btn-hover-bg: var(--button-brand-hover-background); --btn-hover-border: var(--button-brand-hover-border); --btn-text: var(--button-brand-text); }.tui-btn--info { --btn-bg: var(--button-info-background); --btn-border: var(--button-info-border); --btn-hover-bg: var(--button-info-hover-background); --btn-hover-border: var(--button-info-hover-border); --btn-text: var(--info-text-on-dark); }.tui-btn--success { --btn-bg: var(--button-success-background); --btn-border: var(--button-success-border); --btn-hover-bg: var(--button-success-hover-background); --btn-hover-border: var(--button-success-hover-border); --btn-text: var(--success-text-on-dark); }.tui-btn--warning { --btn-bg: var(--button-warning-background); --btn-border: var(--button-warning-border); --btn-hover-bg: var(--button-warning-hover-background); --btn-hover-border: var(--button-warning-hover-border); --btn-text: var(--warning-text-on-dark); }.tui-btn--danger { --btn-bg: var(--button-danger-background); --btn-border: var(--button-danger-border); --btn-hover-bg: var(--button-danger-hover-background); --btn-hover-border: var(--button-danger-hover-border); --btn-text: var(--danger-text-on-dark); }.tui-btn--neutral { --btn-bg: var(--button-neutral-background); --btn-border: var(--button-neutral-border); --btn-hover-bg: var(--button-neutral-hover-background); --btn-hover-border: var(--button-neutral-hover-border); --btn-text: var(--text-dark); }.tui-choice { display: inline-flex; align-items: center; gap: var(--space100); min-height: 36px; color: var(--text-dark); font: 400 var(--font-size-base)/normal var(--font-family-base); cursor: pointer; }.tui-choice > input[type="checkbox"], .tui-choice > input[type="radio"] {appearance: none; position: relative; opacity: 1; pointer-events: auto;margin: 0; width: var(--control-size); height: var(--control-size); flex: 0 0 var(--control-size);border: 1px solid var(--field-border); border-radius: var(--radius-sm);background: var(--field-bg); color: var(--control-checked); cursor: inherit;}.tui-choice > input[type="radio"] { border-radius: 50%; }.tui-choice > input[type="checkbox"]:is(:checked, :indeterminate)::after { content: "\e182"; position: absolute; inset: 0; font: normal 18px/22px "Phosphor"; text-align: center; }.tui-choice > input[type="checkbox"]:indeterminate::after { content: "\e32a"; }.tui-choice > input[type="radio"]:checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: currentColor; }.tui-choice > input:disabled { background: var(--control-disabled-bg); border-color: transparent; color: var(--field-disabled-ink); cursor: not-allowed; }.tui-choice:has(input:disabled) { color: var(--control-disabled-label); cursor: not-allowed; }.tui-tag { display: inline-flex; align-items: center; gap: var(--space050); margin: 0; padding: var(--space050) var(--space150); border: 0; border-radius: var(--space150); background: var(--tone-subtle, var(--info-subtle)); color: var(--tone-on-light, var(--info-text-on-light)); font: var(--font-tag); white-space: nowrap; text-decoration: none; }.tui-tag--dark { background: var(--tone-main, var(--info-main)); color: var(--tone-on-dark, var(--info-text-on-dark)); }.tui-tag--detail { border-radius: var(--space050); }.tui-tag--clickable { box-shadow: inset 0 0 0 1px var(--tone-border, var(--info-border)); cursor: pointer; transition: transform 180ms ease-out; }.tui-field { display: flex; flex-direction: column; align-items: stretch; gap: var(--space050); width: 329px; max-width: 100%; }.tui-field__label, .tui-btn-select__label { position: static; transform: none; height: auto; font: 400 var(--font-size-sm)/normal var(--font-family-sm); color: var(--text-dark); }.tui-input, .tui-textarea {min-width: 0; width: 100%; height: auto; min-height: 38px; margin: 0; padding: var(--space100);border: 1px solid var(--field-border); border-radius: var(--field-radius);background-color: var(--field-bg); color: var(--field-ink); box-shadow: none;font: 400 var(--font-size-base)/20px var(--font-family-base);}.tui-select { display: block; min-width: 0; width: 100%; }.tui-select-wrap { position: relative; display: inline-grid; flex: 0 0 auto; }.tui-select-wrap > .icon { display: none; }.tui-input::placeholder, .tui-textarea::placeholder { color: var(--text-placeholder); opacity: 1; }.tui-input:disabled, .tui-textarea:disabled, .tui-input-wrap:has(input:disabled) { background-color: var(--field-disabled-bg); border-color: transparent; color: var(--field-disabled-ink); cursor: not-allowed; }.tui-field:has(:disabled) > .tui-field__label { color: var(--text-placeholder); }.tui-input-wrap { display: flex; align-items: center; gap: var(--space100); min-height: 38px; padding: 0 var(--space100); border: 1px solid var(--field-border); border-radius: var(--field-radius); background: var(--field-bg); color: var(--field-ink); }.tui-input-wrap > .icon { font-size: 18px; }.tui-input-wrap > .tui-input { flex: 1; width: 0; min-height: 36px; padding: var(--space100) 0; border: 0; border-radius: 0; background: transparent; }.tui-input-wrap:focus-within { outline: 2px solid var(--info-main); outline-offset: 3px; }.tui-input-wrap > .tui-input:focus-visible { outline: none; }.tui-field__buttons, .tui-field__split { display: flex; align-items: stretch; gap: var(--space100); }.tui-field__buttons > .tui-input { flex: 1; width: 0; }.tui-field__split { gap: 0; }.tui-field__split > .tui-select-wrap .tui-select, .tui-field__split > .tui-select { width: auto; border-radius: var(--field-radius) 0 0 var(--field-radius); }.tui-field__split > .tui-input { flex: 1; width: 0; border-left: 0; border-radius: 0 var(--field-radius) var(--field-radius) 0; }.tui-textarea { display: block; height: 200px; min-height: 40px; overflow: auto; resize: vertical; }.tui-field__value { min-height: 38px; margin: 0; padding: var(--space100); color: var(--text-dark-muted); }select:where(:not([multiple]):not([size]:not([size="1"]))) {appearance: none; -webkit-appearance: none; -moz-appearance: none;box-sizing: border-box; height: 38px; margin: 0;padding: 0 var(--space400) 0 var(--space100);border: 1px solid var(--field-border); border-radius: var(--field-radius);background-color: var(--field-bg);background-image: var(--select-chevron);background-repeat: no-repeat; background-position: right var(--space100) center; background-size: 18px 18px;color: var(--field-ink); box-shadow: none;font: 400 var(--font-size-base)/20px var(--font-body);text-overflow: ellipsis; cursor: pointer;transition: border-color var(--duration-fast) ease-out;}select:where(:not([multiple]):not([size]:not([size="1"]))):hover:not(:disabled) { border-color: var(--field-border-hover); }select:where(:not([multiple]):not([size]:not([size="1"]))):focus { outline: none; }select:where(:not([multiple]):not([size]:not([size="1"]))):focus-visible,select:where(:not([multiple]):not([size]:not([size="1"])))[aria-expanded="true"] { outline: 2px solid var(--focus-ring); outline-offset: 1px; }select:where(:not([multiple]):not([size]:not([size="1"]))):disabled { background-color: var(--field-disabled-bg); border-color: transparent; color: var(--field-disabled-ink); cursor: not-allowed; }select:where(:not([multiple])):has(> option:checked:is([disabled], [hidden])[value=""]) { color: var(--text-placeholder); }select option, select optgroup { background-color: var(--field-bg); color: var(--field-ink); }select:where([multiple], [size]:not([size="1"])) { border: 1px solid var(--field-border); border-radius: var(--field-radius); background-color: var(--field-bg); color: var(--field-ink); }@media only screen and (max-width: 992px) {select:where(:not([multiple]):not([size]:not([size="1"]))) { font-size: var(--font-size-lg); }}@media (forced-colors: active) {select:where(:not([multiple]):not([size]:not([size="1"]))) { appearance: auto; background-image: none; padding-right: var(--space100); }}.tui-select-menu {position: fixed; z-index: 1100; box-sizing: border-box;min-width: 120px; max-width: min(480px, calc(100vw - var(--space200)));max-height: 320px; overflow-y: auto; overscroll-behavior: contain;margin: 0; padding: var(--space050);border: 1px solid var(--field-border); border-radius: var(--field-radius);background: var(--field-bg); box-shadow: var(--shadow-menu);color: var(--field-ink); font: 400 var(--font-size-base)/20px var(--font-body);text-align: left;}.tui-select-menu[hidden] { display: none; }.tui-select-menu__group {padding: var(--space100) var(--space100) var(--space050);color: var(--text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);}.tui-select-menu__option {display: flex; align-items: center; gap: var(--space100);min-height: 36px; padding: var(--space100); border-radius: var(--radius-sm);cursor: pointer; overflow-wrap: anywhere;}.tui-select-menu__option.is-in-group { padding-left: var(--space200); }.tui-select-menu__option > .icon { margin-left: auto; flex: 0 0 auto; font-size: 18px; visibility: hidden; }.tui-select-menu__option.is-active { background: var(--menu-option-hover); }.tui-select-menu__option[aria-selected="true"] { color: var(--menu-option-selected-ink); }.tui-select-menu__option[aria-selected="true"] > .icon { visibility: visible; }.tui-select-menu__option[aria-disabled="true"] { color: var(--text-disabled); background: none; cursor: default; }.tui-select-menu__vide { padding: var(--space100); color: var(--text-muted); }@media only screen and (max-width: 992px) {.tui-select-menu { font-size: var(--font-size-lg); }.tui-select-menu__option { min-height: 44px; }}@media (forced-colors: active) {.tui-select-menu { border-color: CanvasText; }.tui-select-menu__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }}label:where(:has(> :is([type="checkbox"], [type="radio"]) + span:not(.lever))) { color: var(--text-primary); }[type="checkbox"] + span:not(.lever),[type="radio"]:is(:checked, :not(:checked)) + span {position: relative; display: inline-block;min-height: var(--control-size); height: auto;padding-left: calc(var(--control-size) + var(--space100));line-height: var(--control-size); font-size: var(--font-size-base);cursor: pointer; transition: none;}:is([type="checkbox"], [type="radio"]):not(#_) + span:not(.lever)::before,:is([type="checkbox"], [type="radio"]):not(#_) + span:not(.lever)::after {content: ""; position: absolute; top: 0; left: 0; z-index: 0; box-sizing: border-box;width: var(--control-size); height: var(--control-size); margin: 0;border: 0; border-radius: var(--radius-sm); background: transparent;transform: none; transition: none; opacity: 1;}:is([type="checkbox"], [type="radio"]):not(#_) + span:not(.lever)::before {border: 1px solid var(--field-border); background: var(--field-bg);}[type="radio"]:not(#_) + span::before { border-radius: 50%; }[type="checkbox"]:is(:checked, :indeterminate):not(#_) + span:not(.lever)::after {content: "\e182"; color: var(--control-checked);font: normal 18px/var(--control-size) "Phosphor"; text-align: center;-webkit-font-smoothing: antialiased;}[type="checkbox"]:indeterminate:not(#_) + span:not(.lever)::after { content: "\e32a"; }[type="radio"]:checked:not(#_) + span::after {top: 5px; left: 5px; width: calc(var(--control-size) - 10px); height: calc(var(--control-size) - 10px);border-radius: 50%; background: var(--control-checked);}:is([type="checkbox"], [type="radio"]):disabled:not(#_) + span:not(.lever)::before { border-color: transparent; background: var(--control-disabled-bg); }:is([type="checkbox"], [type="radio"]):disabled:not(#_) + span:not(.lever)::after { color: var(--field-disabled-ink); }[type="radio"]:checked:disabled:not(#_) + span::after { background: var(--field-disabled-ink); }:is([type="checkbox"], [type="radio"]):disabled + span:not(.lever) { color: var(--control-disabled-label); cursor: not-allowed; }:is([type="checkbox"], [type="radio"]):focus-visible:not(#_) + span:not(.lever)::before { outline: 2px solid var(--focus-ring); outline-offset: 2px; }@media (forced-colors: active) {:is([type="checkbox"], [type="radio"]):not(#_) + span:not(.lever)::before { border-color: CanvasText; }[type="checkbox"]:is(:checked, :indeterminate):not(#_) + span:not(.lever)::after { color: CanvasText; }[type="radio"]:checked:not(#_) + span::after { background: CanvasText; }}.tui-alert { display: flex; flex-direction: column; justify-content: center; width: 500px; max-width: 100%; padding: var(--space100); border: 1px solid var(--tone-border, var(--brand-border)); border-radius: var(--space100); background: var(--tone-subtle, var(--brand-subtle)); color: var(--tone-on-light, var(--brand-text-on-light)); font: 400 var(--font-size-base)/normal var(--font-family-base); overflow-wrap: anywhere; }.tui-alert p { margin: 0; }.tui-alert__title { font-weight: 700; }.tui-notification { display: flex; align-items: stretch; width: 500px; max-width: 100%; border-radius: var(--space100); box-shadow: var(--shadow-notification); }.tui-notification__icon { display: flex; align-items: center; flex: 0 0 auto; padding: var(--space200) var(--space100); border: 1px solid var(--tone-border, var(--brand-border)); border-right: 0; border-radius: var(--space100) 0 0 var(--space100); background: var(--tone-main, var(--brand-main)); color: var(--tone-on-dark, var(--brand-text-on-dark)); }.tui-notification__icon > .icon { font-size: 24px; }.tui-notification__body { display: flex; align-items: flex-start; gap: var(--space050); flex: 1; min-width: 0; min-height: 64px; padding: var(--space100); border: 1px solid var(--surface-light-border); border-left: 0; border-radius: 0 var(--space100) var(--space100) 0; background: var(--surface-light-default); }.tui-notification__content { display: flex; flex-direction: column; justify-content: center; align-self: stretch; flex: 1; min-width: 0; gap: var(--space050); overflow-wrap: anywhere; }.tui-notification__title { margin: 0; font: 700 var(--font-size-base)/normal var(--font-family-base); color: var(--text-dark); }.tui-notification__text { margin: 0; font: 400 var(--font-size-sm)/normal var(--font-family-base); color: var(--text-dark-muted); }.tui-notification__close, .tui-notification__close:focus { display: inline-flex; flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--text-dark); cursor: pointer; }.tui-notification__close > .icon { font-size: 14px; }.tui-btn-select { display: flex; flex-direction: column; gap: var(--space050); width: 329px; max-width: 100%; }.tui-btn-select__options { display: flex; }.tui-btn-select__option, .tui-btn-select__option:focus { flex: 1; min-width: 0; min-height: 36px; margin: 0; padding: var(--space100) var(--space200); border: 1px solid var(--surface-light-border); background: var(--surface-light-default); color: var(--text-dark-muted); font: 400 var(--font-size-base)/normal var(--font-family-base); cursor: pointer; transition: background-color 180ms ease-out, color 180ms ease-out; }.tui-btn-select__option + .tui-btn-select__option { margin-left: -1px; }.tui-btn-select__option:first-child { border-radius: var(--space100) 0 0 var(--space100); }.tui-btn-select__option:last-child { border-radius: 0 var(--space100) var(--space100) 0; }.tui-btn-select__option[aria-pressed="true"] { position: relative; background: var(--brand-main); border-color: var(--brand-border); color: var(--brand-subtle); }:root[data-theme="dark"] .tui-btn-select__option[aria-pressed="true"] { color: var(--brand-text-on-dark); }@media (hover: hover) and (pointer: fine) {:is(.tui-btn, .tui-tag--clickable):hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); }.tui-btn:hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: 0 3px 8px color-mix(in srgb, var(--neutral-950) 16%, transparent); }}:is(.tui-btn, .tui-tag--clickable, .tui-btn-select__option):active:not(:disabled):not([aria-disabled="true"]) {transform: translateY(0) scale(0.98);transition-duration: 80ms;}@media (prefers-reduced-motion: reduce) {:is(.tui-btn, .tui-tag--clickable, .tui-btn-select__option), .tui-btn::after { transition: none; }:is(.tui-btn, .tui-tag--clickable, .tui-btn-select__option):is(:hover, :active) { transform: none; }}@media (forced-colors: active) {.tui-btn { border: 1px solid ButtonText; }.tui-choice > input[type="checkbox"], .tui-choice > input[type="radio"] { appearance: auto; }.tui-choice > input::after { display: none; }.tui-btn-select__option[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; }}