@1337exp/taoui 1.0.0

package/dist/styles.css

@@ -0,0 +1,1476 @@
+
+.tao-button[data-v-0e8431c3] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--tao-space-2);
+
+    border: none;
+    border-radius: var(--tao-radius-control);
+    cursor: pointer;
+    font-family: inherit;
+    font-weight: 500;
+    transition: var(--tao-transition-base);
+    position: relative;
+}
+.tao-button[data-v-0e8431c3]:active {
+    transform: translateY(1px);
+}
+.tao-button--small[data-v-0e8431c3] {
+    padding: var(--tao-space-1) var(--tao-space-3);
+    font-size: var(--tao-font-size-xs);
+    height: 28px;
+}
+.tao-button--medium[data-v-0e8431c3] {
+    padding: var(--tao-space-2) var(--tao-space-4);
+    font-size: var(--tao-font-size-md);
+    height: 36px;
+}
+.tao-button--large[data-v-0e8431c3] {
+    padding: var(--tao-space-2) var(--tao-space-6);
+    font-size: var(--tao-font-size-lg);
+    height: 44px;
+}
+.tao-button--primary[data-v-0e8431c3] {
+    background-color: var(--tao-color-accent);
+    color: var(--tao-color-on-accent);
+}
+.tao-button--primary[data-v-0e8431c3]:hover:not(.tao-button--disabled) {
+    background-color: var(--tao-color-accent-hover);
+}
+.tao-button--secondary[data-v-0e8431c3] {
+    background-color: var(--tao-color-surface-sunken);
+    color: var(--tao-color-text);
+    border: 1px solid var(--tao-color-border-strong);
+}
+.tao-button--secondary[data-v-0e8431c3]:hover:not(.tao-button--disabled) {
+    background-color: var(--tao-color-surface-hover);
+    color: var(--tao-color-text-strong);
+}
+.tao-button--ghost[data-v-0e8431c3] {
+    background-color: transparent;
+    color: var(--tao-color-accent);
+}
+.tao-button--ghost[data-v-0e8431c3]:hover:not(.tao-button--disabled) {
+    background-color: var(--tao-color-accent-subtle-hover);
+}
+.tao-button--danger[data-v-0e8431c3] {
+    background-color: var(--tao-color-danger);
+    color: var(--tao-color-text-strong);
+}
+.tao-button--danger[data-v-0e8431c3]:hover:not(.tao-button--disabled) {
+    background-color: var(--tao-color-danger-hover);
+}
+.tao-button--disabled[data-v-0e8431c3] {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.tao-button--block[data-v-0e8431c3] {
+    width: 100%;
+}
+.tao-button--loading .tao-button__content[data-v-0e8431c3] {
+    opacity: 0;
+}
+.tao-button__loader[data-v-0e8431c3] {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 2px solid color-mix(in srgb, currentColor 15%, transparent);
+    border-top-color: currentColor;
+    border-radius: var(--tao-radius-full);
+    animation: tao-spin-0e8431c3 0.8s linear infinite;
+}
+.tao-button__icon[data-v-0e8431c3] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+@keyframes tao-spin-0e8431c3 {
+to {
+        transform: rotate(360deg);
+}
+}
+
+.tao-block[data-v-4d014dd0] {
+    background: var(--tao-color-surface);
+    color: var(--tao-color-text);
+    transition: var(--tao-transition-base);
+}
+.tao-block--shadow[data-v-4d014dd0] {
+    box-shadow: var(--tao-shadow-panel);
+}
+.tao-block--hover[data-v-4d014dd0] {
+    cursor: pointer;
+}
+.tao-block--hover[data-v-4d014dd0]:hover {
+    box-shadow: var(--tao-shadow-md);
+}
+
+.tao-input-wrapper[data-v-c742d574] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tao-space-1);
+    width: 100%;
+}
+.tao-input__label[data-v-c742d574] {
+    font-size: var(--tao-font-size-sm);
+    color: var(--tao-color-text);
+    font-weight: 500;
+}
+.tao-input[data-v-c742d574] {
+    padding: var(--tao-space-2) var(--tao-space-3);
+    border: 1px solid var(--tao-color-border-strong);
+    border-radius: var(--tao-radius-control);
+    background: var(--tao-color-input-bg);
+    color: var(--tao-color-input-text);
+    font-size: var(--tao-font-size-md);
+    font-family: inherit;
+    transition: var(--tao-transition-base);
+}
+.tao-input[data-v-c742d574]::placeholder {
+    color: var(--tao-color-input-placeholder);
+}
+.tao-input[data-v-c742d574]:focus {
+    outline: none;
+    border-color: var(--tao-color-accent);
+    box-shadow: 0 0 0 2px var(--tao-color-accent-subtle-hover);
+}
+.tao-input[data-v-c742d574]:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    color: var(--tao-color-input-disabled-text);
+    background: var(--tao-color-input-disabled-bg);
+}
+.tao-input--error[data-v-c742d574] {
+    border-color: var(--tao-color-danger);
+}
+.tao-input--error[data-v-c742d574]:focus {
+    box-shadow: 0 0 0 2px var(--tao-color-danger-subtle);
+}
+.tao-input__error[data-v-c742d574] {
+    font-size: var(--tao-font-size-xs);
+    color: var(--tao-color-danger);
+}
+
+.tao-card[data-v-b752c7cb] {
+    width: 100%;
+    background: var(--tao-color-surface-raised);
+    color: var(--tao-color-text);
+    transition: var(--tao-transition-base);
+}
+.tao-card--overflow[data-v-b752c7cb] {
+    overflow: visible;
+}
+.tao-card[data-v-b752c7cb]:not(.tao-card--overflow) {
+    overflow: hidden;
+}
+.tao-card--shadow[data-v-b752c7cb] {
+    box-shadow: var(--tao-shadow-panel);
+}
+.tao-card--shadow-bottom[data-v-b752c7cb] {
+    box-shadow: 0 1px 0 0 var(--tao-color-border-strong);
+}
+.tao-card--hover[data-v-b752c7cb] {
+    cursor: pointer;
+}
+.tao-card--hover[data-v-b752c7cb]:hover,
+.tao-card--hover.tao-card--active[data-v-b752c7cb] {
+    box-shadow: 0 0 0 1px var(--tao-color-accent), var(--tao-shadow-lg);
+}
+.tao-card__cover[data-v-b752c7cb] {
+    overflow: hidden;
+}
+.tao-card__content[data-v-b752c7cb] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tao-space-3);
+}
+.tao-card__header-title[data-v-b752c7cb] {
+    margin: 0 0 var(--tao-space-5);
+    font-weight: 500;
+    text-align: center;
+    color: var(--tao-color-text-strong);
+}
+.tao-card__header[data-v-b752c7cb] {
+    margin-top: -6px;
+    padding: 2px 0 var(--tao-space-2);
+    font-size: var(--tao-font-size-sm);
+    font-weight: 700;
+}
+.tao-card__header--between[data-v-b752c7cb] {
+    display: flex;
+    justify-content: space-between;
+}
+.tao-card__title[data-v-b752c7cb] {
+    margin: 0 0 2px;
+    color: var(--tao-color-text-strong);
+}
+.tao-card__sub[data-v-b752c7cb] {
+    font-size: var(--tao-font-size-xs);
+    color: var(--tao-color-text-muted);
+}
+.tao-card__body[data-v-b752c7cb] {
+    font-size: var(--tao-font-size-md);
+}
+
+.tao-modal-overlay[data-v-4746b5a3] {
+    position: fixed;
+    inset: 0;
+    background: var(--tao-color-overlay);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: var(--tao-space-5);
+}
+.tao-modal[data-v-4746b5a3] {
+    background: var(--tao-color-surface-raised);
+    border-radius: var(--tao-radius-panel);
+    max-width: 500px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: var(--tao-shadow-overlay);
+}
+.tao-modal__header[data-v-4746b5a3] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--tao-space-4) var(--tao-space-5);
+    border-bottom: 1px solid var(--tao-color-border);
+}
+.tao-modal__title[data-v-4746b5a3] {
+    margin: 0;
+    font-size: var(--tao-font-size-xl);
+    font-weight: 600;
+    color: var(--tao-color-text-strong);
+}
+.tao-modal__close[data-v-4746b5a3] {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: var(--tao-color-text);
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+}
+.tao-modal__close[data-v-4746b5a3]:hover {
+    color: var(--tao-color-text-strong);
+}
+.tao-modal__content[data-v-4746b5a3] {
+    padding: var(--tao-space-5);
+}
+.tao-modal__footer[data-v-4746b5a3] {
+    padding: var(--tao-space-4) var(--tao-space-5);
+    border-top: 1px solid var(--tao-color-border);
+    display: flex;
+    gap: var(--tao-space-3);
+    justify-content: flex-end;
+}
+.tao-modal-fade-enter-active[data-v-4746b5a3],
+.tao-modal-fade-leave-active[data-v-4746b5a3] {
+    transition: opacity var(--tao-duration-base) var(--tao-ease-base);
+}
+.tao-modal-fade-enter-from[data-v-4746b5a3],
+.tao-modal-fade-leave-to[data-v-4746b5a3] {
+    opacity: 0;
+}
+
+.tao-tabs[data-v-90a6a489] {
+    width: 100%;
+    max-width: 600px;
+    border-radius: var(--tao-radius-panel);
+    overflow: hidden;
+    border: 1px solid var(--tao-color-border);
+    border-top: 0;
+    box-shadow: var(--tao-shadow-sm);
+}
+.tao-tabs__list[data-v-90a6a489] {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    background: var(--tao-color-surface-sunken);
+    user-select: none;
+}
+.tao-tabs__list li[data-v-90a6a489] {
+    flex: 1;
+    text-align: center;
+    padding: var(--tao-space-3) 0;
+    cursor: pointer;
+    transition: background-color var(--tao-duration-base) var(--tao-ease-base);
+}
+.tao-tabs__list li a[data-v-90a6a489] {
+    color: var(--tao-color-text);
+    font-size: var(--tao-font-size-md);
+    font-weight: 500;
+    text-decoration: none;
+    display: block;
+}
+.tao-tabs__list li.active[data-v-90a6a489] {
+    background: var(--tao-color-accent);
+}
+.tao-tabs__list li.active a[data-v-90a6a489] {
+    color: var(--tao-color-on-accent);
+}
+.tao-tabs__list li.disabled[data-v-90a6a489] {
+    cursor: not-allowed;
+    background: var(--tao-color-surface);
+}
+.tao-tabs__list li.disabled a[data-v-90a6a489] {
+    color: var(--tao-color-text-disabled);
+}
+.tao-tabs__list li[data-v-90a6a489]:hover:not(.active, .disabled) {
+    background: var(--tao-color-surface-hover);
+}
+.tao-tabs__list li:hover:not(.active, .disabled) a[data-v-90a6a489] {
+    color: var(--tao-color-text-strong);
+}
+.tao-tabs__content[data-v-90a6a489] {
+    min-height: 200px;
+    max-height: 350px;
+    padding: var(--tao-space-5);
+    overflow: auto;
+    background: var(--tao-color-surface);
+}
+
+.tao-tooltip-wrapper[data-v-a22f010b] {
+    position: relative;
+    display: inline-block;
+}
+.tao-tooltip[data-v-a22f010b] {
+    position: absolute;
+    padding: var(--tao-space-2) var(--tao-space-3);
+    background: var(--tao-color-surface-raised);
+    color: var(--tao-color-text-strong);
+    font-size: var(--tao-font-size-xs);
+    border-radius: var(--tao-radius-control);
+    white-space: nowrap;
+    z-index: 1000;
+    box-shadow: var(--tao-shadow-lg);
+    /* Тултип — не интерактивный элемент: не должен перехватывать
+       курсор и мешать mouseleave на wrapper'е (иначе при наведении
+       на сам тултип он "залипает" и не скрывается). */
+    pointer-events: none;
+}
+.tao-tooltip[data-v-a22f010b]::after {
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--tao-color-surface-raised);
+    transform: rotate(45deg);
+}
+.tao-tooltip--top[data-v-a22f010b] {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: var(--tao-space-2);
+}
+.tao-tooltip--top[data-v-a22f010b]::after {
+    top: 100%;
+    left: 50%;
+    margin-top: -4px;
+    margin-left: -4px;
+}
+.tao-tooltip--bottom[data-v-a22f010b] {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: var(--tao-space-2);
+}
+.tao-tooltip--bottom[data-v-a22f010b]::after {
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: -4px;
+    margin-left: -4px;
+}
+.tao-tooltip--left[data-v-a22f010b] {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: var(--tao-space-2);
+}
+.tao-tooltip--left[data-v-a22f010b]::after {
+    right: 0;
+    top: 50%;
+    margin-top: -4px;
+    margin-right: -4px;
+}
+.tao-tooltip--right[data-v-a22f010b] {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: var(--tao-space-2);
+}
+.tao-tooltip--right[data-v-a22f010b]::after {
+    left: 0;
+    top: 50%;
+    margin-top: -4px;
+    margin-left: -4px;
+}
+.tao-tooltip-fade-enter-active[data-v-a22f010b],
+.tao-tooltip-fade-leave-active[data-v-a22f010b] {
+    transition: opacity var(--tao-duration-base) var(--tao-ease-base),
+        transform var(--tao-duration-base) var(--tao-ease-base);
+}
+
+/* Анимация въезда/выезда сдвигается по нормали к своей стороне,
+   поверх базового центрирующего transform каждой позиции — иначе
+   общий translateX(-50%) конфликтует с left/right, где центрирование
+   идёт по вертикали (translateY(-50%)), и блок "убегает" в сторону. */
+.tao-tooltip--top.tao-tooltip-fade-enter-from[data-v-a22f010b],
+.tao-tooltip--top.tao-tooltip-fade-leave-to[data-v-a22f010b] {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+}
+.tao-tooltip--bottom.tao-tooltip-fade-enter-from[data-v-a22f010b],
+.tao-tooltip--bottom.tao-tooltip-fade-leave-to[data-v-a22f010b] {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+}
+.tao-tooltip--left.tao-tooltip-fade-enter-from[data-v-a22f010b],
+.tao-tooltip--left.tao-tooltip-fade-leave-to[data-v-a22f010b] {
+    opacity: 0;
+    transform: translateY(-50%) translateX(4px);
+}
+.tao-tooltip--right.tao-tooltip-fade-enter-from[data-v-a22f010b],
+.tao-tooltip--right.tao-tooltip-fade-leave-to[data-v-a22f010b] {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-4px);
+}
+
+.tao-spoiler[data-v-061480fb] {
+    border: 1px solid var(--tao-color-border);
+    border-radius: var(--tao-radius-panel);
+    overflow: hidden;
+}
+.tao-spoiler__header[data-v-061480fb] {
+    display: flex;
+    align-items: center;
+    gap: var(--tao-space-2);
+    width: 100%;
+    min-height: 40px;
+    padding: var(--tao-space-3) var(--tao-space-4);
+    background: var(--tao-color-surface-sunken);
+    border: none;
+    cursor: pointer;
+    text-align: left;
+}
+.tao-spoiler__header[data-v-061480fb]:hover {
+    background: var(--tao-color-surface-hover);
+}
+.tao-spoiler__icon[data-v-061480fb] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1em;
+    font-size: var(--tao-font-size-xs);
+    color: var(--tao-color-accent);
+    transition: transform var(--tao-duration-base) var(--tao-ease-base);
+}
+.tao-spoiler__icon--open[data-v-061480fb] {
+    transform: rotate(90deg);
+}
+.tao-spoiler__title[data-v-061480fb] {
+    font-weight: 500;
+    color: var(--tao-color-text);
+}
+.tao-spoiler__content[data-v-061480fb] {
+    overflow: hidden;
+}
+.tao-spoiler-slide-enter-active[data-v-061480fb],
+.tao-spoiler-slide-leave-active[data-v-061480fb] {
+    transition: height var(--tao-duration-slow) var(--tao-ease-base);
+    overflow: hidden;
+}
+.tao-spoiler__content-inner[data-v-061480fb] {
+    padding: var(--tao-space-4);
+    background: var(--tao-color-surface);
+}
+
+.tao-copy[data-v-810f1bc7] {
+    display: inline-block;
+}
+.tao-copy__button[data-v-810f1bc7] {
+    padding: var(--tao-space-2) var(--tao-space-3);
+    background: var(--tao-color-surface-sunken);
+    border: 1px solid var(--tao-color-border-strong);
+    border-radius: var(--tao-radius-control);
+    color: var(--tao-color-text);
+    font-size: var(--tao-font-size-sm);
+    font-family: inherit;
+    cursor: pointer;
+    transition: var(--tao-transition-base);
+}
+.tao-copy__button[data-v-810f1bc7]:hover {
+    background: var(--tao-color-surface-hover);
+    border-color: var(--tao-color-accent);
+    color: var(--tao-color-accent);
+}
+.tao-copy__button--copied[data-v-810f1bc7] {
+    background: var(--tao-color-accent);
+    border-color: var(--tao-color-accent);
+    color: var(--tao-color-on-accent);
+}
+
+.tao-container[data-v-e2ebdf8f] {
+    width: 100%;
+}
+.tao-container--center[data-v-e2ebdf8f] {
+    margin: 0 auto;
+}
+.tao-container--slim[data-v-e2ebdf8f] {
+    max-width: 500px;
+}
+.tao-container--ultra-slim[data-v-e2ebdf8f] {
+    max-width: 400px;
+}
+
+.tao-space[data-v-4190f6ba] {
+    display: inline-flex;
+    flex-wrap: wrap;
+    column-gap: var(--tao-space-2);
+    row-gap: var(--tao-space-2);
+}
+.tao-space--vertical[data-v-4190f6ba] {
+    flex-direction: column;
+}
+
+/**
+ * TaoIcon рендерит класс icon-<name> и полагается на внешний icon-шрифт,
+ * который нужно подключить в проекте самостоятельно — библиотека Tao
+ * его не поставляет. Это осознанное соглашение (см. README).
+ */
+.tao-icon[data-v-b561364f] {
+    display: inline-flex;
+}
+.tao-icon__value[data-v-b561364f] {
+    margin: var(--v2b130076);
+}
+.tao-icon__value--invert[data-v-b561364f] {
+    filter: invert();
+}
+
+.tao-loader[data-v-3a29f095] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+.tao-loader--inline[data-v-3a29f095] {
+    display: inline-block;
+    width: 30px;
+}
+.tao-loader__ellipsis[data-v-3a29f095] {
+    display: block;
+    position: relative;
+}
+.tao-loader__ellipsis div[data-v-3a29f095] {
+    position: absolute;
+    top: 0;
+    border-radius: var(--tao-radius-full);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.tao-loader__ellipsis div[data-v-3a29f095]:nth-child(1) {
+    left: var(--v052ed61b);
+    animation: tao-loader-grow-3a29f095 0.6s infinite;
+}
+.tao-loader__ellipsis div[data-v-3a29f095]:nth-child(2) {
+    left: var(--v052ed61b);
+    animation: tao-loader-move-3a29f095 0.6s infinite;
+}
+.tao-loader__ellipsis div[data-v-3a29f095]:nth-child(3) {
+    left: var(--v05f388d2);
+    animation: tao-loader-move-3a29f095 0.6s infinite;
+}
+.tao-loader__ellipsis div[data-v-3a29f095]:nth-child(4) {
+    left: var(--bdfc57e2);
+    animation: tao-loader-shrink-3a29f095 0.6s infinite;
+}
+@keyframes tao-loader-grow-3a29f095 {
+0% { transform: scale(0);
+}
+100% { transform: scale(1);
+}
+}
+@keyframes tao-loader-shrink-3a29f095 {
+0% { transform: scale(1);
+}
+100% { transform: scale(0);
+}
+}
+@keyframes tao-loader-move-3a29f095 {
+0% { transform: translate(0, 0);
+}
+100% { transform: translate(var(--v50ec8284), 0);
+}
+}
+
+.tao-image[data-v-8272e203] {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    user-select: none;
+}
+.tao-image img[data-v-8272e203] {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: opacity var(--tao-duration-slow) var(--tao-ease-base);
+}
+.tao-image__img--hidden[data-v-8272e203] {
+    opacity: 0;
+}
+.tao-image__img--pixelated[data-v-8272e203] {
+    image-rendering: optimizeSpeed;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: -o-crisp-edges;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: pixelated;
+    image-rendering: optimize-contrast;
+    -ms-interpolation-mode: nearest-neighbor;
+}
+.tao-image__placeholder[data-v-8272e203] {
+    font-size: var(--tao-font-size-sm);
+    font-family: var(--tao-font-family);
+    letter-spacing: 0.01rem;
+    text-align: center;
+    color: var(--tao-color-text-muted);
+}
+
+.tao-checkbox[data-v-0ece6da0] {
+    display: flex;
+    align-items: center;
+    gap: var(--tao-space-2);
+    cursor: pointer;
+    user-select: none;
+    font-size: var(--tao-font-size-lg);
+    color: var(--tao-color-text);
+}
+.tao-checkbox__input[data-v-0ece6da0] {
+    display: none;
+}
+.tao-checkbox__box[data-v-0ece6da0] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    background-color: var(--tao-color-surface-raised);
+    border: 2px solid var(--tao-color-border-strong);
+    border-radius: var(--tao-radius-sm);
+    transition: var(--tao-transition-base);
+}
+.tao-checkbox__box[data-v-0ece6da0]::after {
+    content: '';
+    display: block;
+    width: 12px;
+    height: 12px;
+    background-color: transparent;
+    border-radius: 2px;
+    transform: scale(0);
+    transition: var(--tao-transition-base);
+}
+.tao-checkbox__label[data-v-0ece6da0] {
+    font-size: var(--tao-font-size-sm);
+    white-space: nowrap;
+    color: var(--tao-color-text-muted);
+}
+.tao-checkbox--disabled[data-v-0ece6da0] {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+.tao-checkbox__input:checked + .tao-checkbox__box[data-v-0ece6da0] {
+    border-color: var(--tao-color-accent);
+    background-color: var(--tao-color-accent);
+}
+.tao-checkbox__input:checked + .tao-checkbox__box[data-v-0ece6da0]::after {
+    background-color: var(--tao-color-on-accent);
+    transform: scale(1);
+}
+.tao-checkbox__input:focus-visible + .tao-checkbox__box[data-v-0ece6da0] {
+    outline: 2px solid var(--tao-color-accent);
+    outline-offset: 1px;
+}
+
+.tao-tag[data-v-f615cf3c] {
+    box-sizing: border-box;
+    display: inline-block;
+    height: auto;
+    margin: 0;
+    padding-inline: var(--tao-space-2);
+    white-space: nowrap;
+    text-align: start;
+    color: var(--tao-color-accent);
+    background: var(--tao-color-accent-subtle);
+    border: 1px solid var(--tao-color-border);
+    border-radius: var(--tao-radius-sm);
+    transition: var(--tao-transition-base);
+}
+.tao-tag--pointer[data-v-f615cf3c] {
+    cursor: pointer;
+    user-select: none;
+}
+.tao-tag--neutral[data-v-f615cf3c] {
+    color: var(--tao-color-text);
+    background: var(--tao-color-surface-sunken);
+    border-color: var(--tao-color-border-strong);
+}
+.tao-tag--success[data-v-f615cf3c] {
+    color: var(--tao-color-success);
+    background: color-mix(in srgb, var(--tao-color-success) 12%, transparent);
+    border-color: color-mix(in srgb, var(--tao-color-success) 30%, transparent);
+}
+.tao-tag--danger[data-v-f615cf3c] {
+    color: var(--tao-color-danger);
+    background: var(--tao-color-danger-subtle);
+    border-color: color-mix(in srgb, var(--tao-color-danger) 30%, transparent);
+}
+
+/* variant="gap" — пустой отступ заданной высоты, без линии */
+.tao-divider-gap[data-v-9db02640] {
+    height: 40px;
+}
+.tao-divider-gap--small[data-v-9db02640] {
+    height: 20px;
+}
+.tao-divider-gap--big[data-v-9db02640] {
+    height: 60px;
+}
+
+/* variant="text" — линия с текстом посередине, затухающая по краям */
+.tao-divider-text[data-v-9db02640] {
+    display: flex;
+    align-items: center;
+    margin: var(--tao-space-5) 0;
+    padding: 0 var(--tao-space-4);
+    opacity: 0.3;
+}
+.tao-divider-text__line[data-v-9db02640] {
+    flex: 1;
+    height: 1px;
+    border-top: 1px dashed var(--tao-color-border-strong);
+}
+.tao-divider-text__line--left[data-v-9db02640] {
+    mask: linear-gradient(90deg, transparent 0%, black 30%);
+}
+.tao-divider-text__line--right[data-v-9db02640] {
+    mask: linear-gradient(90deg, black 70%, transparent 100%);
+}
+.tao-divider-text__value[data-v-9db02640] {
+    padding: 0 var(--tao-space-4);
+    font-size: var(--tao-font-size-xs);
+    font-weight: 500;
+    white-space: nowrap;
+    color: var(--tao-color-text-muted);
+}
+
+/* variant="line" (по умолчанию) — тонкая линия с акцентным свечением по центру */
+.tao-divider-line[data-v-9db02640] {
+    position: relative;
+    width: 100%;
+    height: 1px;
+    margin: var(--tao-space-5) auto;
+}
+.tao-divider-line[data-v-9db02640]::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 5%;
+    right: 5%;
+    width: 90%;
+    height: 1px;
+    background-image: linear-gradient(to right, transparent, var(--tao-color-accent), transparent);
+}
+
+.tao-animated-border[data-v-4ca22c09] {
+    background: var(--tao-color-surface-raised);
+    position: relative;
+    z-index: 0;
+    border-radius: var(--tao-animated-border-width);
+}
+
+/* Размытая копия рамки позади — даёт эффект свечения (glow).
+   Рендерится только при light: по умолчанию компонент — просто
+   переливающийся контур, без сияния, выходящего за его пределы. */
+.tao-animated-border--light[data-v-4ca22c09]::before {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--tao-animated-border-width));
+    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
+    background-size: 300% 300%;
+    border-radius: calc(2 * var(--tao-animated-border-width));
+    filter: blur(var(--tao-animated-border-glow));
+    opacity: 0.65;
+    z-index: -2;
+    animation: tao-animated-border-gradient-4ca22c09 var(--tao-animated-border-speed) ease alternate infinite;
+}
+
+/* Сама рамка: заливка на всю область, но CSS mask вырезает внутреннюю
+   часть — остаётся только полоса шириной borderWidth по периметру,
+   поэтому получается контур, а не закрашенный прямоугольник. */
+.tao-animated-border[data-v-4ca22c09]::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--tao-animated-border-width));
+    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
+    background-size: 300% 300%;
+    border-radius: calc(2 * var(--tao-animated-border-width));
+    padding: var(--tao-animated-border-width);
+    -webkit-mask:
+        linear-gradient(#000 0 0) content-box,
+        linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+        linear-gradient(#000 0 0) content-box,
+        linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    z-index: -1;
+    animation: tao-animated-border-gradient-4ca22c09 var(--tao-animated-border-speed) ease alternate infinite;
+}
+@keyframes tao-animated-border-gradient-4ca22c09 {
+0% {
+        background-position: 0% 50%;
+}
+50% {
+        background-position: 100% 50%;
+}
+100% {
+        background-position: 0% 50%;
+}
+}
+
+.tao-textarea[data-v-a56ad167] {
+    width: 100%;
+    min-height: 31px;
+    height: auto;
+    padding: var(--tao-space-2);
+    font-size: var(--tao-font-size-sm);
+    font-family: var(--tao-font-family);
+    letter-spacing: 0.01rem;
+    line-height: 1.4;
+    border: none;
+    border-left: 4px solid var(--tao-color-border-strong);
+    border-radius: var(--tao-radius-sm);
+    background-color: var(--tao-color-input-bg);
+    color: var(--tao-color-input-text);
+    outline: none;
+    resize: vertical;
+    transition: var(--tao-transition-base);
+}
+.tao-textarea[data-v-a56ad167]::placeholder {
+    color: var(--tao-color-input-placeholder);
+}
+.tao-textarea[data-v-a56ad167]:focus {
+    border-color: var(--tao-color-accent);
+}
+.tao-textarea--inverse[data-v-a56ad167] {
+    border-left: none;
+    border-right: 4px solid var(--tao-color-border-strong);
+}
+.tao-textarea--center[data-v-a56ad167] {
+    text-align: center;
+}
+.tao-textarea--no-border[data-v-a56ad167] {
+    border: none;
+}
+.tao-textarea--no-background[data-v-a56ad167] {
+    background-color: transparent;
+}
+.tao-textarea--no-resize[data-v-a56ad167] {
+    resize: none;
+}
+.tao-textarea--dummy[data-v-a56ad167] {
+    display: block;
+    min-height: 31px;
+    height: auto;
+    border-color: var(--tao-color-danger);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.tao-scroll-top[data-v-a6b96e61] {
+    overflow: hidden;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    cursor: pointer;
+    color: var(--tao-color-on-accent);
+    background-color: var(--tao-color-accent);
+    border: none;
+    border-radius: var(--tao-radius-full);
+    box-shadow: var(--tao-shadow-md);
+    user-select: none;
+}
+.tao-scroll-top[data-v-a6b96e61]:hover {
+    background-color: var(--tao-color-accent-hover);
+}
+.tao-scroll-top--no-outline[data-v-a6b96e61] {
+    outline: none;
+}
+.tao-scroll-top__content[data-v-a6b96e61] {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.tao-scroll-top__icon[data-v-a6b96e61] {
+    position: relative;
+    z-index: 1;
+}
+.tao-scroll-top__ripple[data-v-a6b96e61] {
+    position: absolute;
+    border-radius: var(--tao-radius-full);
+    background-color: var(--tao-color-accent-subtle-hover);
+    transform: scale(0);
+    opacity: 0;
+    pointer-events: none;
+}
+.tao-scroll-top__ripple--active[data-v-a6b96e61] {
+    animation: tao-scroll-top-ripple-a6b96e61 0.75s ease-out;
+}
+.tao-scroll-top-fade-enter-active[data-v-a6b96e61],
+.tao-scroll-top-fade-leave-active[data-v-a6b96e61] {
+    transition: opacity var(--tao-duration-base) var(--tao-ease-base),
+        transform var(--tao-duration-base) var(--tao-ease-base);
+}
+.tao-scroll-top-fade-enter-from[data-v-a6b96e61],
+.tao-scroll-top-fade-leave-to[data-v-a6b96e61] {
+    opacity: 0;
+    transform: translateY(40px);
+}
+@keyframes tao-scroll-top-ripple-a6b96e61 {
+from {
+        opacity: 1;
+}
+to {
+        transform: scale(2);
+        opacity: 0;
+}
+}
+
+.tao-progress[data-v-3780642d] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.tao-progress__container[data-v-3780642d] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--tao-space-3);
+    width: 100%;
+}
+.tao-progress__track[data-v-3780642d] {
+    flex: 1;
+    border: 1px solid var(--tao-color-border);
+    border-radius: var(--tao-radius-sm);
+    background-color: var(--tao-color-surface-sunken);
+    overflow: hidden;
+    position: relative;
+}
+.tao-progress__fill[data-v-3780642d] {
+    height: 100%;
+    border-radius: var(--tao-radius-sm);
+    transition: width var(--tao-duration-slow) var(--tao-ease-base);
+    background: var(--tao-color-accent);
+}
+.tao-progress__side[data-v-3780642d] {
+    min-width: 40px;
+    font-family: 'Monaco', 'Consolas', monospace;
+    font-size: var(--tao-font-size-xs);
+    font-weight: bold;
+    text-align: center;
+    color: var(--tao-color-text);
+}
+.tao-progress__percentage[data-v-3780642d] {
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: var(--tao-color-text-muted);
+}
+.tao-progress__fill--animated[data-v-3780642d] {
+    background: linear-gradient(
+        90deg,
+        var(--tao-color-accent) 0%,
+        var(--tao-color-accent-hover) 50%,
+        var(--tao-color-accent) 100%
+    );
+    background-size: 200% 100%;
+    animation: tao-progress-shimmer-3780642d 2s infinite;
+}
+@keyframes tao-progress-shimmer-3780642d {
+0% { background-position: -200% 0;
+}
+100% { background-position: 200% 0;
+}
+}
+
+.tao-slider[data-v-9f531a81] {
+    position: relative;
+    width: 100%;
+    height: 14px;
+    cursor: pointer;
+    user-select: none;
+}
+.tao-slider--show-value[data-v-9f531a81] {
+    height: 20px;
+}
+.tao-slider__track[data-v-9f531a81] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--tao-radius-sm);
+    background-color: var(--tao-color-surface-sunken);
+}
+.tao-slider__fill[data-v-9f531a81] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: var(--tao-color-accent);
+    border-radius: var(--tao-radius-sm);
+}
+.tao-slider__thumb[data-v-9f531a81] {
+    position: absolute;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    background-color: var(--tao-color-accent);
+    border: 2px solid var(--tao-color-surface-sunken);
+    border-radius: var(--tao-radius-full);
+    transform: translate(-50%, -50%);
+    cursor: grab;
+}
+.tao-slider__thumb[data-v-9f531a81]:active {
+    cursor: grabbing;
+}
+.tao-slider__value[data-v-9f531a81],
+.tao-slider__shadow-input[data-v-9f531a81] {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: var(--tao-font-size-sm);
+    font-weight: 900;
+    letter-spacing: 0.05em;
+}
+.tao-slider__value[data-v-9f531a81] {
+    color: var(--tao-color-text-strong);
+    text-shadow: -1px -1px 0 var(--tao-color-bg), 1px -1px 0 var(--tao-color-bg),
+        -1px 1px 0 var(--tao-color-bg), 1px 1px 0 var(--tao-color-bg);
+}
+.tao-slider__shadow-input[data-v-9f531a81] {
+    text-align: center;
+    border: none;
+    background: transparent;
+    color: var(--tao-color-text-strong);
+    font-family: inherit;
+    outline: none;
+}
+
+.tao-file-drop[data-v-db5ffca4] {
+    display: flex;
+    gap: var(--tao-space-3);
+    user-select: none;
+}
+.tao-file-drop__clear[data-v-db5ffca4] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 55px;
+    text-align: center;
+    border: 2px dashed var(--tao-color-danger);
+    border-radius: var(--tao-radius-panel);
+    color: var(--tao-color-danger);
+    background-color: var(--tao-color-danger-subtle);
+    cursor: pointer;
+    font-family: inherit;
+    transition: var(--tao-transition-base);
+}
+.tao-file-drop__clear[data-v-db5ffca4]:hover {
+    background-color: color-mix(in srgb, var(--tao-color-danger) 22%, transparent);
+}
+.tao-file-drop__zone[data-v-db5ffca4] {
+    flex-grow: 1;
+    font-size: var(--tao-font-size-sm);
+    font-family: var(--tao-font-family);
+    letter-spacing: 0.01rem;
+    text-align: center;
+    color: var(--tao-color-text-muted);
+    border: 2px dashed var(--tao-color-border-strong);
+    border-radius: var(--tao-radius-panel);
+    cursor: pointer;
+    transition: var(--tao-transition-base);
+}
+.tao-file-drop__zone[data-v-db5ffca4]:hover {
+    background-color: var(--tao-color-accent-subtle);
+    border-color: var(--tao-color-accent);
+}
+.tao-file-drop__zone--dragging[data-v-db5ffca4] {
+    border-color: var(--tao-color-text-strong);
+    background-color: var(--tao-color-surface-sunken);
+}
+.tao-file-drop__zone--small[data-v-db5ffca4] {
+    padding: var(--tao-space-5) var(--tao-space-4);
+}
+.tao-file-drop__zone--medium[data-v-db5ffca4] {
+    padding: var(--tao-space-8) var(--tao-space-5);
+}
+.tao-file-drop__zone--large[data-v-db5ffca4] {
+    padding: var(--tao-space-10) var(--tao-space-6);
+}
+
+/* .tao-dropdown-menu__list телепортируется в body, поэтому не может
+   быть scoped — стилизуем его глобально, но с уникальным неймспейсом. */
+.tao-dropdown-menu__list {
+    z-index: 999999;
+    position: absolute;
+    top: 100%;
+    min-width: 120px;
+    display: flex;
+    flex-direction: column;
+    font-size: var(--tao-font-size-md);
+    color: var(--tao-color-text);
+    background-color: var(--tao-color-surface-raised);
+    border: 1px solid var(--tao-color-border);
+    border-radius: var(--tao-radius-control);
+    box-shadow: var(--tao-shadow-md);
+}
+.tao-dropdown-menu__list .tao-dropdown-menu__item {
+    padding: var(--tao-space-2) var(--tao-space-4);
+    border: none;
+    border-radius: var(--tao-radius-sm);
+    background: none;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: var(--tao-transition-base);
+}
+.tao-dropdown-menu__list .tao-dropdown-menu__item:not(:last-child) {
+    border-bottom: 1px solid var(--tao-color-border);
+}
+.tao-dropdown-menu__list .tao-dropdown-menu__item:hover {
+    color: var(--tao-color-accent);
+    background-color: var(--tao-color-surface-hover);
+}
+
+.tao-dropdown-menu[data-v-d54be7aa] {
+    position: relative;
+    display: inline-block;
+}
+.tao-dropdown-menu__button[data-v-d54be7aa] {
+    padding: var(--tao-space-2);
+    color: var(--tao-color-text);
+    border: none;
+    border-radius: var(--tao-radius-control);
+    background: none;
+    cursor: pointer;
+    user-select: none;
+    transition: var(--tao-transition-base);
+}
+.tao-dropdown-menu__button[data-v-d54be7aa]:hover {
+    background: var(--tao-color-surface-hover);
+}
+
+.tao-pin-code[data-v-b8c7bf2c] {
+    display: inline-flex;
+    user-select: none;
+}
+.tao-pin-code__value[data-v-b8c7bf2c] {
+    width: 50px;
+    height: 56px;
+    margin: 2px;
+    border: 3px solid var(--tao-color-border-strong);
+    border-radius: var(--tao-radius-md);
+    font-size: 21px;
+    font-weight: 500;
+    font-family: inherit;
+    text-align: center;
+    letter-spacing: 0;
+    color: var(--tao-color-accent);
+    background: var(--tao-color-input-bg);
+    transition: var(--tao-transition-base);
+    cursor: text;
+    outline: none;
+}
+.tao-pin-code__value--active[data-v-b8c7bf2c] {
+    border-color: var(--tao-color-accent);
+}
+/**
+ * Tao UI — styles entry point
+ *
+ * Порядок важен: primitives -> semantic (default theme) -> optional themes -> base reset.
+ */
+/**
+ * Tao UI — Primitive tokens
+ *
+ * Сырые значения без смысловой привязки. Ничего отсюда не используется
+ * напрямую в компонентах — только через семантический слой (semantic.css).
+ * Пользователи библиотеки обычно НЕ трогают этот файл.
+ */
+:root {
+    /* ---------- Color ramps ---------- */
+    --tao-gray-0: #ffffff;
+    --tao-gray-50: #f5f5f5;
+    --tao-gray-100: #e0e0e0;
+    --tao-gray-200: #bfbfbf;
+    --tao-gray-300: #999999;
+    --tao-gray-400: #666666;
+    --tao-gray-500: #444444;
+    --tao-gray-600: #333333;
+    --tao-gray-700: #262626;
+    --tao-gray-800: #1f1f1f;
+    --tao-gray-900: #151515;
+    --tao-gray-950: #0d0d0d;
+
+    --tao-orange-300: #ffc04a;
+    --tao-orange-400: #ffb40b;
+    --tao-orange-500: #ff9500;
+    --tao-orange-600: #db8000;
+
+    --tao-red-400: #e35766;
+    --tao-red-500: #dc3545;
+    --tao-red-600: #c82333;
+
+    --tao-green-400: #3ac16e;
+    --tao-green-500: #2ea85c;
+    --tao-green-600: #24924e;
+
+    /* ---------- Spacing scale (4px base) ---------- */
+    --tao-space-1: 4px;
+    --tao-space-2: 8px;
+    --tao-space-3: 12px;
+    --tao-space-4: 16px;
+    --tao-space-5: 20px;
+    --tao-space-6: 24px;
+    --tao-space-8: 32px;
+    --tao-space-10: 40px;
+
+    /* ---------- Radius scale ---------- */
+    --tao-radius-sm: 4px;
+    --tao-radius-md: 8px;
+    --tao-radius-lg: 12px;
+    --tao-radius-full: 999px;
+
+    /* ---------- Font size scale ---------- */
+    --tao-font-size-xs: 12px;
+    --tao-font-size-sm: 13px;
+    --tao-font-size-md: 14px;
+    --tao-font-size-lg: 16px;
+    --tao-font-size-xl: 18px;
+
+    /* ---------- Shadow scale (color-agnostic, opacity baked in) ---------- */
+    --tao-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
+    --tao-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
+    --tao-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
+    --tao-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
+
+    /* ---------- Motion ---------- */
+    --tao-duration-fast: 0.15s;
+    --tao-duration-base: 0.2s;
+    --tao-duration-slow: 0.3s;
+    --tao-ease-base: ease;
+
+    /* ---------- Font ---------- */
+    --tao-font-family-base: "Roboto", sans-serif;
+}
+/**
+ * Tao UI — Semantic tokens (default / dark theme)
+ *
+ * Это и есть публичный API темизации библиотеки. Компоненты используют
+ * ТОЛЬКО эти переменные, никогда — primitives напрямую.
+ *
+ * Чтобы сделать свою тему — переопредели этот набор в своём CSS
+ * (глобально, или через [data-tao-theme="имя"], см. themes/*.css).
+ */
+:root,
+[data-tao-theme="dark"] {
+    color-scheme: dark;
+
+    /* ---------- Brand / accent ---------- */
+    --tao-color-accent: var(--tao-orange-300);
+    --tao-color-accent-hover: var(--tao-orange-400);
+    --tao-color-accent-active: var(--tao-orange-500);
+    --tao-color-accent-subtle: color-mix(in srgb, var(--tao-color-accent) 8%, transparent);
+    --tao-color-accent-subtle-hover: color-mix(in srgb, var(--tao-color-accent) 14%, transparent);
+    --tao-color-on-accent: var(--tao-gray-950); /* текст поверх accent-фона */
+
+    /* ---------- Surfaces ---------- */
+    --tao-color-bg: var(--tao-gray-900);
+    --tao-color-surface: var(--tao-gray-900);
+    --tao-color-surface-raised: var(--tao-gray-800);
+    --tao-color-surface-sunken: color-mix(in srgb, var(--tao-gray-600) 20%, transparent);
+    --tao-color-surface-hover: var(--tao-gray-700);
+
+    /* ---------- Borders ---------- */
+    --tao-color-border: color-mix(in srgb, var(--tao-gray-600) 40%, transparent);
+    --tao-color-border-strong: var(--tao-gray-500);
+
+    /* ---------- Text ---------- */
+    --tao-color-text: var(--tao-gray-200);
+    --tao-color-text-strong: var(--tao-gray-0);
+    --tao-color-text-muted: var(--tao-gray-400);
+    --tao-color-text-on-accent: var(--tao-gray-950);
+    --tao-color-text-disabled: var(--tao-gray-300);
+
+    /* ---------- Links ---------- */
+    --tao-color-link: var(--tao-orange-300);
+    --tao-color-link-hover: var(--tao-orange-500);
+    --tao-color-link-shadow: 0 0 1px color-mix(in srgb, var(--tao-orange-300) 10%, transparent),
+        0 0 6px color-mix(in srgb, var(--tao-orange-300) 60%, transparent);
+
+    /* ---------- Status ---------- */
+    --tao-color-danger: var(--tao-red-500);
+    --tao-color-danger-hover: var(--tao-red-600);
+    --tao-color-danger-subtle: color-mix(in srgb, var(--tao-red-500) 15%, transparent);
+    --tao-color-success: var(--tao-green-500);
+    --tao-color-success-hover: var(--tao-green-600);
+
+    /* ---------- Form controls ---------- */
+    --tao-color-input-bg: var(--tao-color-surface-sunken);
+    --tao-color-input-text: var(--tao-gray-200);
+    --tao-color-input-placeholder: var(--tao-gray-300);
+    --tao-color-input-disabled-bg: color-mix(in srgb, var(--tao-gray-600) 10%, transparent);
+    --tao-color-input-disabled-text: var(--tao-gray-300);
+
+    /* ---------- Overlay ---------- */
+    --tao-color-overlay: rgba(0, 0, 0, 0.7);
+
+    /* ---------- Radii / spacing / shadows (aliasable per-theme too) ---------- */
+    --tao-radius-control: var(--tao-radius-sm);
+    --tao-radius-panel: var(--tao-radius-md);
+    --tao-shadow-panel: var(--tao-shadow-md);
+    --tao-shadow-overlay: var(--tao-shadow-xl);
+
+    /* ---------- Typography / motion passthrough ---------- */
+    --tao-font-family: var(--tao-font-family-base);
+    --tao-transition-base: all var(--tao-duration-base) var(--tao-ease-base);
+}
+/**
+ * Tao UI — Light theme
+ *
+ * Пример того, как выглядит альтернативная тема: переопределяются
+ * ТОЛЬКО семантические токены из semantic.css, ничего в компонентах
+ * менять не нужно.
+ *
+ * Подключение: <html data-tao-theme="light">
+ */
+[data-tao-theme="light"] {
+    color-scheme: light;
+
+    --tao-color-accent: var(--tao-orange-500);
+    --tao-color-accent-hover: var(--tao-orange-600);
+    --tao-color-accent-active: var(--tao-orange-600);
+    --tao-color-accent-subtle: color-mix(in srgb, var(--tao-color-accent) 10%, transparent);
+    --tao-color-accent-subtle-hover: color-mix(in srgb, var(--tao-color-accent) 16%, transparent);
+    --tao-color-on-accent: var(--tao-gray-0);
+
+    --tao-color-bg: var(--tao-gray-0);
+    --tao-color-surface: var(--tao-gray-0);
+    --tao-color-surface-raised: var(--tao-gray-50);
+    --tao-color-surface-sunken: var(--tao-gray-50);
+    --tao-color-surface-hover: var(--tao-gray-100);
+
+    --tao-color-border: var(--tao-gray-100);
+    --tao-color-border-strong: var(--tao-gray-200);
+
+    --tao-color-text: var(--tao-gray-700);
+    --tao-color-text-strong: var(--tao-gray-950);
+    --tao-color-text-muted: var(--tao-gray-400);
+    --tao-color-text-on-accent: var(--tao-gray-0);
+    --tao-color-text-disabled: var(--tao-gray-300);
+
+    --tao-color-link: var(--tao-orange-600);
+    --tao-color-link-hover: var(--tao-orange-500);
+
+    --tao-color-danger: var(--tao-red-500);
+    --tao-color-danger-hover: var(--tao-red-600);
+    --tao-color-danger-subtle: color-mix(in srgb, var(--tao-red-500) 10%, transparent);
+    --tao-color-success: var(--tao-green-500);
+    --tao-color-success-hover: var(--tao-green-600);
+
+    --tao-color-input-bg: var(--tao-gray-0);
+    --tao-color-input-text: var(--tao-gray-950);
+    --tao-color-input-placeholder: var(--tao-gray-300);
+    --tao-color-input-disabled-bg: var(--tao-gray-50);
+    --tao-color-input-disabled-text: var(--tao-gray-300);
+
+    --tao-color-overlay: rgba(0, 0, 0, 0.4);
+}
+/**
+ * Tao UI — Global base styles
+ *
+ * Минимальный reset + глобальные штрихи (скроллбар, ссылки, инпуты).
+ * Не содержит хардкод-цветов — всё через семантические токены,
+ * поэтому переключение темы работает и здесь.
+ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    padding: 0;
+    margin: 0;
+    font-family: var(--tao-font-family);
+    background: var(--tao-color-bg);
+    color: var(--tao-color-text);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    max-width: 5px;
+    max-height: 5px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--tao-color-accent);
+    border-radius: var(--tao-radius-full);
+}
+
+/* Links */
+a {
+    color: var(--tao-color-link);
+    text-decoration: none;
+    transition: color var(--tao-duration-base) var(--tao-ease-base);
+}
+
+a:hover {
+    color: var(--tao-color-link-hover);
+}
+
+/* Number input spinners */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield !important;
+}