.tooltip{--bg-color: #222;--border-color: #333;--tooltip-gap: 32px;z-index:29;position:fixed;translate:var(--tooltip-gap) -50%;border-radius:4px;padding:8px 16px;outline:.5px solid var(--border-color);background:var(--bg-color)}.tooltip span{font-size:var(--text-m1);font-family:var(--inter);text-wrap:nowrap}.tooltip:after{content:"";--size: 10px;width:var(--size);height:var(--size);background:var(--bg-color);position:absolute;top:50%;translate:-50% -50%;left:0;border:.5px solid;border-color:transparent transparent var(--border-color) var(--border-color);rotate:45deg}.app-button{--move: 4px;padding:16px 40px;width:min-content;text-wrap:nowrap;border-radius:8px;border:none;text-align:center;font-family:var(--inter);font-size:var(--text-m4);font-weight:700;transition:all .25s ease,filter .1s ease;cursor:pointer}.app-button.blue{background:var(--blue);box-shadow:var(--move) var(--move) 0 0 #170d68}.app-button.gray{background:#1e1e1f;box-shadow:var(--move) var(--move) 0 0 #141414}.app-button:hover{filter:brightness(120%)}.app-button:active{box-shadow:none;translate:var(--move) var(--move);filter:brightness(90%)}.not-tl-sign-wrapper{position:absolute;transform:translate(-50%,-50%);left:50%;top:50%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:24px}.not-tl-sign-wrapper h2{font-size:var(--text-xl);font-family:var(--poppins);font-weight:600;color:#eee;cursor:default;line-height:52px;text-align:center}.tls-item{border-radius:10px;border:1px solid #333;background:#1c1c1c;position:relative;width:calc(var(--w) - var(--scroll-w) - var(--scroll-gap));cursor:pointer;-webkit-user-select:none;user-select:none;--default-h: 64px;--on-settings-h: 120px;min-height:var(--default-h);min-width:200px;--padding: 18px;padding:var(--padding);padding-left:28px;overflow:hidden;display:flex;align-items:start;justify-content:space-between;gap:14px;transition:all .25s ease,filter .1s ease;--outline-w: 2px;outline:var(--outline-w) solid transparent}.tls-item:before{background:var(--prev-color);height:100%;width:10px;content:"";position:absolute;top:0;left:0;transition:width .2s ease}.tls-item.selected{background:#333;border-color:transparent;outline:var(--outline-w) solid #444;outline-offset:calc(-1 * var(--outline-w));padding-left:36px}.tls-item.selected:before{width:16px}.tls-item.showing-settings{height:var(--on-settings-h);min-height:var(--on-settings-h);padding-left:28px;outline-style:dashed}.tls-item.showing-settings:before{width:0px}.tls-item.deleting{--b-color: #b66060;outline:var(--outline-w) dashed var(--b-color);--off: calc(-1 * var(--outline-w));outline-offset:var(--off);border:none;background:#352727;align-items:center;--del-vib-rate: .66deg;animation:delete-vibration .14s linear infinite both alternate-reverse}.tls-item.deleting:hover{--del-vib-rate: .2deg}.tls-item.deleting:before{top:var(--outline-w);left:var(--outline-w);height:calc(100% - var(--outline-w) * 2);border-radius:8px 0 0 8px}.tls-item.deleting .cancel-btn svg{color:var(--b-color);stroke-width:2.2}.tls-item .name-wrapper{display:flex;flex-direction:column;cursor:pointer;font-family:var(--inter);gap:2px}.tls-item .name-wrapper h5{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;cursor:default;line-height:24px;height:24px;color:#fff;font-size:var(--text-m2);font-weight:500}.tls-item .name-wrapper span{font-size:var(--text-s);color:#f59999;font-style:italic}.tls-item .settings-btn,.tls-item .cancel-btn{background:transparent;border:none;display:flex;justify-content:center;align-items:center;transition:all .1s ease-out;position:relative;--size: 20px;min-width:var(--size);min-height:var(--size);cursor:pointer}.tls-item .settings-btn:after,.tls-item .cancel-btn:after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;--size: 220%;width:var(--size);height:var(--size)}.tls-item .settings-btn svg,.tls-item .cancel-btn svg{--size: 100%;width:var(--size);height:var(--size);scale:1.25}.tls-item .settings-btn:hover,.tls-item .cancel-btn:hover{filter:brightness(150%);scale:1.05}.tls-item .settings-btn:active,.tls-item .cancel-btn:active{filter:brightness(80%);scale:.9}.tls-item .settings-btn{opacity:0}.tls-item .settings-btn svg{color:#666}.tls-item .settings-btn:active{rotate:45deg}.tls-item .settings-wrapper{position:absolute;bottom:var(--padding);left:var(--padding);width:calc(100% - var(--padding) * 2);display:flex;justify-content:center;align-items:center;transition:all .3s ease .1s;gap:18px}.tls-item .settings-wrapper button{--size: 45px;height:var(--size);width:var(--size);background:#1e1e1e;border:1px solid #444;border-radius:10px;cursor:pointer;transition:background .15s ease,scale .3s ease}.tls-item .settings-wrapper button svg{--size: 80%;height:var(--size);width:var(--size)}.tls-item .settings-wrapper button:hover{background:#161616}.tls-item .settings-wrapper button:hover.settings-color-btn{background:var(--color)}.tls-item .settings-wrapper button:hover>svg{color:#fff}.tls-item .settings-wrapper button:active{scale:.9;background:#000}.tls-item .settings-wrapper button:active>svg{color:#bbb}.tls-item .settings-wrapper button svg{--size: 60%;height:var(--size);width:var(--size);color:#bbb;stroke-width:1.4;transition:color .15s ease}.tls-item .settings-wrapper button.settings-color-btn{position:relative}.tls-item .settings-wrapper button.settings-color-btn input{position:absolute;pointer-events:none;opacity:0;width:100%;height:100%;top:0;left:0}.tls-item:not(.showing-settings) .settings-wrapper{pointer-events:none;transition:all .1s ease;opacity:0}.tls-item:hover{filter:brightness(125%)}.tls-item:hover .settings-btn{opacity:1;transition:all .3s ease-out}.tls-item:active{scale:.95;filter:brightness(90%)}@keyframes delete-vibration{0%{rotate:var(--del-vib-rate)}to{rotate:calc(var(--del-vib-rate) * -1)}}.tls-list{--scroll-w: 8px;--scroll-gap: 12px;--w: calc(var(--menu-width) - var(--menu-padding) * 2);display:flex;flex-direction:column;align-items:start;height:100%;margin:20px 0;gap:14px;overflow:hidden auto;width:var(--w)}.tls-list::-webkit-scrollbar{width:12px;display:none}.tls-list::-webkit-scrollbar-track{border:1px solid #222;border-radius:10px}.tls-list:hover::-webkit-scrollbar{display:block}:root{--menu-padding: 40px}.toggle-menu-btn{--size: 60px;width:var(--size);height:var(--size);position:fixed;top:var(--menu-padding);left:var(--menu-padding);border-radius:10px;border:1px solid #444;background:#111;display:flex;justify-content:center;align-items:center;z-index:10;transition:all .2s ease-out,filter .1s ease;cursor:pointer}.toggle-menu-btn:hover{filter:brightness(130%)}.toggle-menu-btn:active{scale:.9}.toggle-menu-btn.with-menu{background:transparent;border-color:transparent}.toggle-menu-btn.with-menu svg{--size: 90%}.toggle-menu-btn svg{--size: 75%;width:var(--size);height:var(--size)}.tl-menu{--menu-width: 400px;width:var(--menu-width);position:fixed;height:100vh;z-index:5;padding:var(--menu-padding);padding-top:140px;display:flex;flex-direction:column;gap:12px;top:0;left:0;background:linear-gradient(270deg,#0000,#0009,#000000f2);transition:all .3s ease;translate:calc(-1 * var(--menu-width));opacity:0}.tl-menu.showing{translate:0;opacity:1}.tl-menu h3{color:#fff;font-family:var(--poppins);font-size:var(--text-xxl);font-style:normal;font-weight:700;text-wrap:nowrap;cursor:default}.tl-menu .tl-symbol{align-self:center;margin:44px 0 16px}.tl-menu .bts-wrapper{display:flex;gap:12px}.tl-menu .bts-wrapper .btn{--size: 50px;--color: #444;border-radius:10px;border:1px solid var(--color);background:#0d0d0d;width:var(--size);min-height:var(--size);display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;transition:all .2s ease-out,filter .1s ease}.tl-menu .bts-wrapper .btn svg{--size: 75%;height:var(--size);width:var(--size);color:var(--color)}.tl-menu .bts-wrapper .btn:hover{filter:brightness(130%)}.tl-menu .bts-wrapper .btn:active{scale:.9}.tl-menu .bts-wrapper .btn input[type=file]{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0}.tl-symbol{width:var(--length);height:var(--width);background:var(--color);display:flex;justify-content:space-between}.tl-symbol span{position:relative}.tl-symbol span:before{content:"";background:var(--color);width:var(--size);height:var(--size);position:absolute;top:50%;left:50%;translate:-50% -50%;border-radius:50%}.tl-name{position:fixed;left:50%;top:var(--tl-name-off);font-size:var(--text-xl);font-family:var(--inter);transform:translate(-50%);text-align:center;text-wrap:nowrap;height:var(--tl-name-height);z-index:99}.tl-name:not(input){cursor:pointer}.tl-name svg{position:absolute;right:0;top:50%;--padding: 12px;transform:translate(calc(100% + var(--padding)),-50%);transition:opacity .2s ease;opacity:0}.tl-name:hover svg{opacity:1}input.tl-name{border:none;--bg-color: #222;outline:5px solid var(--bg-color);border-radius:8px;background:var(--bg-color)}.tl-element{height:var(--timeline-height);width:var(--timeline-height);position:relative}.tl-element.cont-mark{margin:0 60px}.add-element{border:none;background:transparent;max-height:100%;position:absolute;--size: calc(var(--timeline-height) * 2.5);min-width:var(--size);min-height:var(--size);transform:translate(-50%,-50%);left:50%;top:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;--base-color: #808080;--bg-color: #030303;--lighter-color: #b0b0b0;transition:all .25s ease-out}.add-element>svg{--size: 45%;width:var(--size);height:var(--size);color:var(--base-color);transition:all .25s ease-out}.add-element:hover{--target-scale: 1.1;scale:var(--target-scale);--trans: calc((var(--target-scale) - 1) * 50%);translate:var(--trans) var(--trans);border-radius:8px;background:var(--bg-color)}.add-element:hover>svg{--size: 65%;color:var(--lighter-color)}.add-element:active{scale:1;translate:0 0}.mark.editing{--bg-light-color: #121212;padding:0 10px;--btns-offset: 60px}.mark.editing *{font-family:var(--inter)}.mark.editing input{font-size:var(--text-l);font-style:normal;font-weight:700;line-height:normal;border:none;color:#fff;outline:none;width:100%;background:var(--bg-light-color);border-radius:var(--p);padding:4px 10px;text-align:center;cursor:text}.mark.editing input::placeholder{font-weight:400;font-size:var(--text-m3);color:#444}.mark.editing .element-optns-btns{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;gap:16px}.mark.editing .element-optns-btns .delete-btn,.mark.editing .element-optns-btns .duplicate-btn{--size: 40px;transform:translateY(var(--btns-offset))}.mark.editing .element-optns-btns .move-arrows{position:absolute;left:50%;top:0;translate:-50% calc(-1 * var(--btns-offset))}.move-arrows{display:flex;justify-content:center;gap:12px}.move-arrows button{--size: calc(var(--btns-size) * .9);border:1px solid #222;border-radius:50%;height:var(--size);width:var(--size);background:#111;transition:all .3s ease,filter .15s ease;display:flex;justify-content:center;align-items:center;pointer-events:all}.move-arrows button svg{--size: 80%;height:var(--size);width:var(--size);color:#444}.move-arrows button:not(:disabled){cursor:pointer}.move-arrows button:not(:disabled):hover{filter:brightness(120%)}.move-arrows button:not(:disabled):active{scale:.9;filter:brightness(90%)}.move-arrows button:not(:disabled):active.arr-l{transform:translate(-4px)}.move-arrows button:not(:disabled):active.arr-r{transform:translate(4px)}.move-arrows button:not(:disabled):active svg{color:#222}.move-arrows button:disabled{filter:brightness(65%)}.element-optns-btns{--btns-size: 40px;pointer-events:none}.element-optns-btns .delete-btn,.element-optns-btns .duplicate-btn{height:var(--btns-size);width:var(--btns-size);align-self:center;border-radius:50%;background:#0f0f0f;border:1px solid #333;cursor:pointer;pointer-events:all;transition:background .15s ease,scale .3s ease}.element-optns-btns .delete-btn:hover,.element-optns-btns .duplicate-btn:hover{background:#161616}.element-optns-btns .delete-btn:hover svg,.element-optns-btns .duplicate-btn:hover svg{color:#fff}.element-optns-btns .delete-btn:active,.element-optns-btns .duplicate-btn:active{scale:.9;background:#000}.element-optns-btns .delete-btn:active svg,.element-optns-btns .duplicate-btn:active svg{color:#bbb}.element-optns-btns .delete-btn svg,.element-optns-btns .duplicate-btn svg{--size: 60%;height:var(--size);width:var(--size);color:#bbb;stroke-width:1.4;transition:color .15s ease}.mark{background:#0b0a0a;border-radius:10px;height:70px;padding:0 20px;min-width:120px;position:absolute;translate:-50% -50%;left:50%;top:50%;display:flex;justify-content:center;align-items:center}.mark:not(.editing){-webkit-user-select:none;user-select:none;cursor:pointer}.mark:not(.editing){max-width:250px}.mark>h2{text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-family:var(--inter);font-size:var(--text-l);font-style:normal;font-weight:700;line-height:normal;pointer-events:none}.clear-input-btn-wrapper{position:absolute;--width: 60px;width:var(--width);height:100%;right:calc(-1 * var(--width));top:0;display:flex;justify-content:center;align-items:center}.clear-input-btn-wrapper>.clear-btn{border:none;border-radius:50%;--size: 26px;height:var(--size);width:var(--size);display:flex;justify-content:center;align-items:center;background:#222;cursor:pointer;transition:scale .3s ease,filter .15s ease,opacity .2s ease;opacity:0}.clear-input-btn-wrapper>.clear-btn:hover{filter:brightness(140%)}.clear-input-btn-wrapper>.clear-btn:active{filter:brightness(90%);scale:.9}.clear-input-btn-wrapper>.clear-btn>svg{--size: 75%;height:var(--size);width:var(--size);color:#555}.clear-input-btn-wrapper>.clear-btn.hidden{cursor:default;opacity:0}.point.editing .drag-and-drop-image{height:100%;width:100%;border:2px dashed #484848;color:var(--text-light-gray);font-family:var(--inter);text-align:center;font-size:var(--text-m2);display:flex;flex-direction:column;justify-content:center;gap:var(--p);align-items:center;border-radius:var(--p);cursor:pointer}.point.editing .drag-and-drop-image>svg{--size: 40px;height:var(--size);width:var(--size);stroke-width:1.6;pointer-events:none}.point.editing .drag-and-drop-image .loading-arrows{--size: 50%;height:var(--size);width:var(--size);stroke-width:1.5;pointer-events:none;opacity:.5}.point.editing .drag-and-drop-image.with-image{position:absolute;top:var(--p);left:var(--p);--size: calc(100% - var(--p) * 2);width:var(--size);height:var(--size);background:#000000a6;text-shadow:0px 0px 16px #000}.point.editing .drag-and-drop-image.with-image>span{display:flex;flex-direction:row;gap:12px}.point.editing .drag-and-drop-image.with-image>span button{background:#0009;padding:var(--p);--size: 60px;width:var(--size);height:var(--size);border-radius:var(--p);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;border:none}.point.editing .drag-and-drop-image.with-image>span button svg{--size: 80%;width:var(--size);height:var(--size);color:var(--text-light-gray);pointer-events:none}.point.editing .drag-and-drop-image.dragging-over{border:2px dashed var(--text-light-gray)}.point.editing .drag-and-drop-image.dragging-over.with-image{background:#000000bf}.point.editing .drag-and-drop-image.dragging-over>svg{--size: 64px;stroke-width:2;height:var(--size);width:var(--size);pointer-events:none;animation:upload-bounce 1s ease infinite}.point.editing .drag-and-drop-image.dragging-over>span{animation:size-in-out .5s ease-in-out infinite alternate;font-weight:500;font-size:var(--text-m2);pointer-events:none}@keyframes upload-bounce{0%,to{translate:0px 0px}33%{translate:0px -12px;filter:brightness(120%)}}@keyframes size-in-out{0%{scale:1}to{scale:1.05;filter:brightness(120%)}}@keyframes loading-spin{0%{rotate:0deg}to{rotate:360deg}}.point.editing{--bg-light-color: #313131;--text-light-gray: #AFAFAF}.point.editing .title-wrapper{width:100%;background:var(--bg-color);border-radius:var(--p);min-height:48px;padding:var(--p);position:relative;display:flex}.point.editing .title-wrapper .title{width:100%;background:var(--bg-light-color);border-radius:var(--p);padding:4px 0;outline:none;border:0;color:#fff;text-align:center;font-size:var(--text-m3);font-weight:400;font-family:var(--inter)}.point.editing .image-wrapper{position:relative;height:var(--min-img-height)}.point.editing .desc-wrapper{width:100%;background:var(--bg-color);border-radius:var(--p);padding:var(--p);position:relative;display:flex}.point.editing .desc-wrapper .desc{border-radius:var(--p);background:var(--bg-light-color);resize:none;border:none;outline:none;font-family:var(--inter);color:var(--text-light-gray);font-size:var(--text-m1);font-weight:400;padding:calc(var(--p) / 3) var(--p);width:100%;line-height:var(--text-m2);max-height:calc(var(--p) + var(--text-m2) * 3)}.point.editing .desc-wrapper .desc::-webkit-scrollbar{width:10px}.point.editing .desc-wrapper .desc::-webkit-scrollbar-track{background:none}.point.editing .desc-wrapper .desc::-webkit-scrollbar-thumb{background-color:#3c3c3c}.point.editing .desc-wrapper:hover .clear-btn:not(.hidden),.point.editing .title-wrapper:hover .clear-btn:not(.hidden){opacity:1}.point.editing .element-optns-btns{display:flex;justify-content:center;align-items:center;cursor:default;gap:16px}.point{width:310px;height:auto;position:absolute;--timeline-p: 10px;left:50%;translate:-50% calc(var(--timeline-p) + var(--timeline-height) * 2);display:flex;flex-direction:column;--bg-color: #252525;gap:var(--timeline-p);-webkit-user-select:none;user-select:none;cursor:pointer}.point:before{content:"";background:var(--bg-color);--arrow-size: 20px;width:var(--arrow-size);height:var(--arrow-size);position:absolute;left:50%;translate:-50% -50%;rotate:45deg;z-index:-1}.point:not(.on-bottom){translate:-50% calc(-100% - var(--timeline-height) - var(--timeline-p));flex-direction:column-reverse}.point:not(.on-bottom):before{translate:-50% 50%}.point>.title,.point>.desc{padding:calc(var(--p) * 1.3);border-radius:var(--p);background:var(--bg-color);font-family:var(--inter);word-wrap:break-word;overflow-wrap:break-word;white-space:normal;display:flex;justify-content:center;align-items:center}.point>.title{min-height:48px}.point>.title span{color:#fff;text-align:center;font-size:var(--text-m3);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.point>.desc{color:#afafaf;font-size:var(--text-m1);font-weight:400}.point .image-wrapper{padding:var(--p);border-radius:var(--p);background:var(--bg-color);display:flex;justify-content:center;align-items:center;width:100%;height:var(--img-height)}.point .image-wrapper .image{width:100%;height:100%;border-radius:var(--p);object-fit:cover;margin:0}@media screen and (max-height: 900px){.point{--timeline-p: 8px;width:290px}}.timeline-wrapper{display:flex;align-items:center;height:calc(100vh - var(--tl-name-off) - var(--tl-name-height) * .7)}.timeline-wrapper .timeline{--timeline-height: 16px;height:var(--timeline-height);background:#0b0b0b;--elements-gap: 110px;box-shadow:inset 0 0 4px #00000040,0 0 4px #00000040;display:flex;gap:var(--elements-gap);--p: 6px;min-width:100vw;padding:0 200px 0 70px;justify-content:center;width:100%}@media screen and (max-height: 900px){.timeline-wrapper .timeline{--elements-gap: 100px}}body.create{background:linear-gradient(180deg,#151515,#0c0c0c);background-repeat:repeat-x;max-height:100vh;height:100vh;overflow:scroll hidden;--tl-name-off: 45px;--tl-name-height: 50px}#root.create{height:100vh;max-height:100vh;min-width:100vw;overflow:hidden;display:flex;flex-direction:column;justify-content:end;width:max-content}.app-background{position:fixed;top:0;left:0;height:100vh;width:100vw;z-index:-99}.app-background .blurred-circle{height:var(--size);width:var(--size);position:fixed;border-radius:50%;top:calc(var(--off-y) - var(--size) / 2);left:calc(var(--off-x) - var(--size) / 2);background:var(--color);opacity:.3;filter:blur(60px);scale:var(--max-scale);animation:breathe var(--time) ease-in-out infinite alternate both}@keyframes breathe{to{scale:1}}*{box-sizing:border-box;margin:0;padding:0;color-scheme:dark}:root{--scroll-bg: #1a1a1c;--scroll-thumb: #2c2c2e;--scroll-bg-l: #333335;--blue: #25179C;--text-s: .9rem;--text-m1: 1rem;--text-m2: 1.2rem;--text-m3: 1.38rem;--text-m4: 1.62rem;--text-l: 2rem;--text-xl: 2.5rem;--text-xxl: 3rem;--text-gigant: 6rem;--inter: Inter, system-ui, Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;--poppins: Poppins, "Segoe UI", system-ui, Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif}::-webkit-scrollbar{height:10px}::-webkit-scrollbar-track{border-top:1px solid #222;background:#111}::-webkit-scrollbar-thumb{background-color:var(--scroll-thumb);border-radius:10px;border:3px solid transparent}::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-bg-l)}@keyframes cant-write{0%,to{translate:0px 0px}38%{translate:10px 0px;color:#ffffff80}}@media screen and (max-height: 900px){:root{--text-s: .8rem;--text-m1: .9rem;--text-m2: 1.1rem;--text-m3: 1.2rem;--text-m4: 1.5rem;--text-l: 1.8rem;--text-xl: 2.2rem;--text-xxl: 2.8rem;--text-gigant: 5rem}}body.landing{overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}body.landing h1{font-family:var(--poppins);font-size:var(--text-gigant);text-align:center;text-wrap:nowrap}body.landing .slogan{display:flex;align-items:center;justify-content:center;gap:60px}body.landing .slogan h3{text-wrap:nowrap;font-size:var(--text-l);font-weight:500;font-family:var(--inter);color:#d0d0d0}body.landing .buttons{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:42px}@media screen and (max-width: 1300px){body.landing .slogan{flex-direction:column;gap:40px}body.landing .slogan>:first-child{display:none}body.landing .buttons{margin-top:50px}}