.tft {
--tft-base: var(--toscano-brand-deep, #032d35);
--tft-accent: var(--toscano-brand-teal, #009a9d);
--tft-logo: #ffffff;
--tft-logo-opacity: 1;
--tft-fade-bottom: .08; --tft-fade-stop: 100%; --tft-title: #ffffff;
--tft-text: rgba(255, 255, 255, .78);
--tft-link: #ffffff;
--tft-link-hover: #7fd8da;
--tft-line: rgba(255, 255, 255, .16);
--tft-social-border: rgba(255, 255, 255, .28);
--tft-social-hover-bg: #ffffff;
--tft-social-hover-color: var(--toscano-brand-deep, #032d35);
--tft-max: 1200px;
position: relative;
box-sizing: border-box;
width: 100%;
overflow: hidden;
isolation: isolate;
padding: 64px 20px 28px; background: var(--tft-base);
background:
radial-gradient(120% 90% at 30% 85%, color-mix(in srgb, var(--tft-accent) 55%, transparent) 0%, transparent 55%),
radial-gradient(90% 70% at 85% 70%, color-mix(in srgb, var(--tft-accent) 35%, transparent) 0%, transparent 60%),
var(--tft-base);
color: var(--tft-text);
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
word-break: break-word;
}
.tft *,
.tft *::before,
.tft *::after {
box-sizing: border-box;
}
.tft .tft__shader {
position: absolute;
inset: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .8s ease;
pointer-events: none;
}
.tft.tft--gl .tft__shader {
opacity: 1;
}
.tft .tft__inner {
position: relative;
max-width: var(--tft-max);
margin: 0 auto;
} .tft .tft__logo {
display: block;
width: 100%;
margin: 0 0 88px;
color: var(--tft-logo);
opacity: var(--tft-logo-opacity);
line-height: 0;
text-decoration: none;
}
.tft .tft__logo svg,
.tft .tft__logo img {
display: block;
width: 100%;
height: auto;
max-width: none; -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, var(--tft-fade-bottom)) 0%, #000 var(--tft-fade-stop));
mask-image: linear-gradient(to top, rgba(0, 0, 0, var(--tft-fade-bottom)) 0%, #000 var(--tft-fade-stop));
}
.tft a.tft__logo:hover {
color: var(--tft-logo);
} .tft .tft__grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) repeat(var(--tft-cols, 4), minmax(0, 1fr));
gap: 40px;
align-items: start;
}
.tft .tft__title {
margin: 0 0 24px;
padding: 0;
font-family: "Inter", sans-serif;
font-size: 20px; font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
color: var(--tft-title);
}
.tft .tft__about-text {
max-width: 320px;
margin: 0;
font-size: 16px; font-weight: 400;
line-height: 1.59;
color: var(--tft-text);
}
.tft .tft__social {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.tft .tft__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--tft-social-border);
border-radius: 8px;
color: var(--tft-link);
font-size: 17px;
line-height: 1;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tft .tft__social a:hover,
.tft .tft__social a:focus-visible {
background: var(--tft-social-hover-bg);
border-color: var(--tft-social-hover-bg);
color: var(--tft-social-hover-color);
}
.tft .tft__social svg {
width: 17px;
height: 17px;
fill: currentColor;
}
.tft .tft__links {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.tft .tft__links li {
margin: 0;
padding: 0;
font-size: 16px; font-weight: 400;
line-height: 1.59;
color: var(--tft-text);
}
.tft .tft__links a {
color: var(--tft-link);
text-decoration: none;
transition: color .2s ease;
}
.tft .tft__links a:hover,
.tft .tft__links a:focus-visible {
color: var(--tft-link-hover);
text-decoration: underline;
text-underline-offset: 3px;
}
.tft a:focus-visible {
outline: 2px solid var(--tft-link-hover);
outline-offset: 3px;
} .tft .tft__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 32px;
margin-top: 96px;
padding-top: 24px;
border-top: 1px solid var(--tft-line);
font-size: 13px; line-height: 1.47;
color: var(--tft-text);
}
.tft .tft__copy {
margin: 0;
}
.tft .tft__legal {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin: 0;
padding: 0;
list-style: none;
}
.tft .tft__legal a {
color: var(--tft-text);
text-decoration: none;
transition: color .2s ease;
}
.tft .tft__legal a:hover,
.tft .tft__legal a:focus-visible {
color: var(--tft-link);
text-decoration: underline;
text-underline-offset: 3px;
} @media (max-width: 1024px) {
.tft .tft__logo {
margin-bottom: 64px;
}
.tft .tft__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px 32px;
}
.tft .tft__about {
grid-column: 1 / -1;
}
.tft .tft__about-text {
max-width: 520px;
}
}
@media (max-width: 767px) {
.tft {
padding-top: 48px;
}
.tft .tft__logo {
margin-bottom: 48px;
}
.tft .tft__title {
margin-bottom: 16px;
font-size: 18px;
}
.tft .tft__links {
gap: 8px;
}
.tft .tft__links li,
.tft .tft__about-text {
font-size: 15px;
}
.tft .tft__bottom {
flex-direction: column;
align-items: flex-start;
margin-top: 56px;
}
}
@media (max-width: 480px) {
.tft .tft__grid {
gap: 32px 20px; }
.tft .tft__links li {
font-size: 14px;
}
}
@media (max-width: 340px) {
.tft .tft__grid {
grid-template-columns: minmax(0, 1fr);
}
}.tas {
--tas-accent: var(--toscano-brand-teal, #009a9d);
--tas-accent-2: #2fc4c7;
--tas-deep: var(--toscano-brand-deep, #032d35);
--tas-text: #3d4f53;
--tas-muted: #7b8a8d;
--tas-bot: #f1f7f7;
--tas-line: #e3ecee;
--tas-bottom: 24px;
--tas-side: 24px;
position: fixed;
z-index: 9980; bottom: var(--tas-bottom);
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
color: var(--tas-text);
}
.tas *,
.tas *::before,
.tas *::after {
box-sizing: border-box;
}
.tas--right {
right: var(--tas-side);
}
.tas--left {
left: var(--tas-side);
}
.tas button {
margin: 0;
font-family: "Inter", sans-serif;
letter-spacing: normal;
text-transform: none;
box-shadow: none;
cursor: pointer;
} .tas button.tas__launcher {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
padding: 0;
border: 0;
border-radius: 50%;
background: radial-gradient(circle at 30% 25%, #2fc4c7 0%, var(--tas-accent) 55%, #007b7e 100%);
box-shadow: 0 14px 30px -10px rgba(0, 123, 126, .65), 0 0 0 4px rgba(255, 255, 255, .9);
color: #ffffff;
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.tas button.tas__launcher:hover,
.tas button.tas__launcher:focus-visible {
background: radial-gradient(circle at 30% 25%, #2fc4c7 0%, var(--tas-accent) 55%, #007b7e 100%);
color: #ffffff;
transform: scale(1.07);
box-shadow: 0 18px 36px -10px rgba(0, 123, 126, .8), 0 0 0 4px rgba(255, 255, 255, .95), 0 0 24px rgba(47, 196, 199, .55);
}
.tas button.tas__launcher:focus-visible {
outline: 2px solid var(--tas-deep);
outline-offset: 4px;
} .tas .tas__launcher-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--tas-accent-2);
opacity: 0;
animation: tas-ring 2.8s cubic-bezier(.2, .6, .3, 1) 1.5s infinite;
pointer-events: none;
}
.tas.is-open .tas__launcher-ring {
animation: none;
}
@keyframes tas-ring {
0% { opacity: .7; transform: scale(1); }
70%, 100% { opacity: 0; transform: scale(1.6); }
}
.tas .tas__launcher-ico {
position: absolute;
display: flex;
transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.tas .tas__launcher-ico svg {
display: block;
}
.tas .tas__launcher-ico--open svg {
width: 52px;
height: 52px;
margin-top: -3px;
transform-origin: 50% 70%;
}  .tas .tas-eye {
transform-box: fill-box;
transform-origin: center;
animation: tas-blink 4.6s ease-in-out infinite;
}
.tas .tas__avatar .tas-eye {
animation-delay: 1.3s;
}
@keyframes tas-blink {
0%, 91%, 97%, 100% { transform: scaleY(1); }
94% { transform: scaleY(.12); }
} .tas .tas-eyes {
transform: translate(var(--ex, 0px), var(--ey, 0px));
transition: transform .18s ease-out;
} .tas .tas-robot__ant-glow {
transform-box: fill-box;
transform-origin: center;
animation: tas-ant 2.2s ease-in-out infinite;
}
@keyframes tas-ant {
0%, 100% { opacity: .2; transform: scale(.8); }
50% { opacity: .7; transform: scale(1.25); }
} .tas button.tas__launcher:hover .tas__launcher-ico--open svg {
animation: tas-tilt .7s ease;
}
@keyframes tas-tilt {
0%, 100% { transform: rotate(0); }
30% { transform: rotate(-12deg); }
65% { transform: rotate(8deg); }
} .tas .tas-mouth {
transform-box: fill-box;
transform-origin: center top;
}
.tas.is-talking .tas__avatar .tas-mouth {
animation: tas-talk .22s ease-in-out infinite alternate;
}
@keyframes tas-talk {
from { transform: scaleY(.5); }
to { transform: scaleY(1.7); }
}
.tas .tas__launcher-ico--close {
opacity: 0;
transform: rotate(-90deg) scale(.6);
}
.tas.is-open .tas__launcher-ico--open {
opacity: 0;
transform: rotate(90deg) scale(.6);
}
.tas.is-open .tas__launcher-ico--close {
opacity: 1;
transform: none;
} .tas .tas__teaser {
position: absolute;
bottom: 74px;
display: flex;
align-items: flex-start;
gap: 4px;
width: max-content;
max-width: 240px;
animation: tas-pop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
.tas--right .tas__teaser {
right: 0;
transform-origin: bottom right;
}
.tas--left .tas__teaser {
left: 0;
transform-origin: bottom left;
}
.tas .tas__teaser[hidden] {
display: none;
}
.tas button.tas__teaser-msg {
padding: 12px 16px;
border: 1px solid var(--tas-line);
border-radius: 16px 16px 4px 16px;
background: #ffffff;
box-shadow: 0 18px 40px -16px rgba(3, 45, 53, .35);
color: var(--tas-deep);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-align: left;
}
.tas--left button.tas__teaser-msg {
order: 2;
border-radius: 16px 16px 16px 4px;
}
.tas button.tas__teaser-msg:hover {
border-color: var(--tas-accent);
background: #ffffff;
color: var(--tas-deep);
}
.tas button.tas__teaser-x {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid var(--tas-line);
border-radius: 50%;
background: #ffffff;
color: var(--tas-muted);
}
.tas button.tas__teaser-x:hover {
background: #ffffff;
color: var(--tas-deep);
}
.tas button.tas__teaser-x svg {
width: 12px;
height: 12px;
}
@keyframes tas-pop {
from { opacity: 0; transform: translateY(10px) scale(.85); }
to { opacity: 1; transform: none; }
} .tas .tas__panel {
position: absolute;
bottom: 76px;
display: flex;
flex-direction: column;
width: 370px;
height: min(580px, calc(100vh - var(--tas-bottom) - 110px));
height: min(580px, calc(100dvh - var(--tas-bottom) - 110px));
overflow: hidden;
border-radius: 20px;
background: #ffffff;
box-shadow: 0 30px 70px -20px rgba(3, 45, 53, .45), 0 0 0 1px rgba(3, 45, 53, .06);
transform-origin: bottom right;
}
.tas--right .tas__panel {
right: 0;
}
.tas--left .tas__panel {
left: 0;
transform-origin: bottom left;
}
.tas .tas__panel[hidden] {
display: none;
}
.tas.is-opening .tas__panel {
animation: tas-open .45s cubic-bezier(.16, .84, .24, 1) both;
}
.tas.is-closing .tas__panel {
animation: tas-close .25s ease-in both;
}
@keyframes tas-open {
from { opacity: 0; transform: translateY(18px) scale(.9); }
to { opacity: 1; transform: none; }
}
@keyframes tas-close {
to { opacity: 0; transform: translateY(12px) scale(.94); }
} .tas .tas__head {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 14px 16px 16px;
background:
radial-gradient(80% 140% at 100% 0%, rgba(47, 196, 199, .28) 0%, transparent 60%),
linear-gradient(135deg, var(--tas-deep) 0%, #064a54 100%);
color: #ffffff;
}
.tas .tas__head-edge {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, var(--tas-accent), var(--tas-accent-2), #ffffff, var(--tas-accent-2), var(--tas-accent));
background-size: 300% 100%;
animation: tas-edge 4s linear infinite;
}
@keyframes tas-edge {
to { background-position: -300% 0; }
}
.tas .tas__avatar {
position: relative;
display: flex;
flex: 0 0 42px;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: radial-gradient(circle at 30% 25%, #2fc4c7, var(--tas-accent) 60%, #007b7e);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 0 18px rgba(47, 196, 199, .55);
color: #ffffff;
}
.tas .tas__avatar svg {
width: 34px;
height: 34px;
margin-top: -2px;
} .tas .tas__avatar::after {
content: "";
position: absolute;
right: 0;
bottom: 1px;
width: 11px;
height: 11px;
border: 2px solid var(--tas-deep);
border-radius: 50%;
background: #3cc38a;
}
.tas .tas__who {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.tas .tas__name {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}
.tas .tas__role {
margin-top: 2px;
font-size: 12px;
line-height: 1.3;
color: rgba(255, 255, 255, .7);
}
.tas button.tas__icon-btn {
display: flex;
flex: 0 0 34px;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
color: #ffffff;
transition: background-color .2s ease, transform .35s ease;
}
.tas button.tas__icon-btn:hover,
.tas button.tas__icon-btn:focus-visible {
background: rgba(255, 255, 255, .18);
color: #ffffff;
}
.tas button.tas__restart:hover {
transform: rotate(-180deg);
}
.tas button.tas__icon-btn svg {
display: block;
} .tas .tas__log {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 8px;
padding: 18px 16px 10px;
overflow-y: auto;
overscroll-behavior: contain;
background:
linear-gradient(rgba(3, 45, 53, .025) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(90deg, rgba(3, 45, 53, .025) 1px, transparent 1px) 0 0 / 24px 24px,
#fbfdfd;
scroll-behavior: smooth;
}
.tas .tas__msg {
max-width: 86%;
margin: 0;
padding: 10px 14px;
font-size: 14px;
line-height: 1.5;
white-space: pre-line;
animation: tas-msg .35s cubic-bezier(.16, .84, .24, 1) both;
}
.tas .tas__msg--bot {
align-self: flex-start;
border: 1px solid var(--tas-line);
border-radius: 4px 16px 16px 16px;
background: #ffffff;
color: var(--tas-text);
}
.tas .tas__msg--bot + .tas__msg--bot {
border-top-left-radius: 16px;
}
.tas .tas__msg--user {
align-self: flex-end;
border-radius: 16px 16px 4px 16px;
background: var(--tas-accent);
color: #ffffff;
font-weight: 600;
}
@keyframes tas-msg {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
} .tas .tas__typing {
display: inline-flex;
align-self: flex-start;
gap: 4px;
padding: 12px 14px;
border: 1px solid var(--tas-line);
border-radius: 4px 16px 16px 16px;
background: #ffffff;
}
.tas .tas__typing i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--tas-accent);
opacity: .35;
animation: tas-dot 1s ease-in-out infinite;
}
.tas .tas__typing i:nth-child(2) { animation-delay: .15s; }
.tas .tas__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tas-dot {
0%, 100% { opacity: .35; transform: none; }
40% { opacity: 1; transform: translateY(-4px); }
} .tas .tas__actions {
display: flex;
flex-direction: column;
align-self: flex-start;
gap: 6px;
width: 86%;
animation: tas-msg .35s cubic-bezier(.16, .84, .24, 1) both;
}
.tas a.tas__action,
.tas button.tas__action {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 12px 14px;
overflow: hidden;
border: 0;
border-radius: 10px;
background: var(--tas-accent);
box-shadow: 0 10px 22px -12px rgba(0, 154, 157, .9);
color: #ffffff;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
text-align: left;
text-decoration: none;
transition: background-color .25s ease, transform .2s ease;
}
.tas a.tas__action:hover,
.tas button.tas__action:hover,
.tas a.tas__action:focus-visible,
.tas button.tas__action:focus-visible {
background: var(--toscano-text-accent, #007b7e);
color: #ffffff;
text-decoration: none;
}
.tas .tas__action::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -40%;
width: 30%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
transform: skewX(-18deg);
transition: left .7s ease;
}
.tas .tas__action:hover::before {
left: 120%;
}
.tas .tas__action svg {
flex: 0 0 auto;
transition: transform .25s ease;
}
.tas .tas__action:hover svg {
transform: translateX(3px);
} .tas .tas__choices {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 16px 16px;
border-top: 1px solid var(--tas-line);
background: #ffffff;
}
.tas .tas__choices:empty {
display: none;
}
.tas button.tas__chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border: 1px solid color-mix(in srgb, var(--tas-accent) 35%, var(--tas-line));
border-radius: 999px;
background: #ffffff;
color: var(--tas-deep);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
text-align: left;
animation: tas-msg .3s cubic-bezier(.16, .84, .24, 1) both;
animation-delay: calc(var(--k, 0) * .05s);
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.tas button.tas__chip:hover,
.tas button.tas__chip:focus-visible {
border-color: var(--tas-accent);
background: var(--tas-accent);
color: #ffffff;
}
.tas button.tas__chip:active {
transform: scale(.96);
}
.tas button.tas__chip svg {
flex: 0 0 18px;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--tas-accent);
transition: color .2s ease;
}
.tas button.tas__chip:hover svg,
.tas button.tas__chip:focus-visible svg {
color: #ffffff;
}
.tas button.tas__chip--back {
border-style: dashed;
color: var(--tas-muted);
}
.tas button.tas__chip--back svg {
color: var(--tas-muted);
} @media (max-width: 767px) {
.tas {
--tas-side: 16px;
--tas-bottom: 16px;
}
.tas button.tas__launcher {
width: 56px;
height: 56px;
}
.tas .tas__launcher-ico--open svg {
width: 48px;
height: 48px;
}
.tas .tas__teaser {
bottom: 66px;
} .tas .tas__panel {
position: fixed;
right: 12px;
bottom: calc(var(--tas-bottom) + 66px);
left: 12px;
width: auto;
height: calc(100vh - var(--tas-bottom) - 90px);
height: calc(100dvh - var(--tas-bottom) - 90px);
max-height: 640px;
}
}
@media (prefers-reduced-motion: reduce) {
.tas *,
.tas.is-opening .tas__panel {
animation: none !important;
}
}