@import "https://fonts.googleapis.com/css2?family=Jost&display=swap";
:root{--text-primary:#f5f5f5;--text-alternate:#e0e0e0;--link-color:#b0b0b0;--bg-primary:#000;--bg-alternate:#1a1a1a;--bg-tertiary:#2d2d2d;--nav-background:#0a0a0a;--nav-active-item-bg:#2d2d2d;--button-primary-bg:#4a4a4a;--button-alternate-bg:#4a4a4ab3;--button-shadow-color:#00000080;--current-step-indicator:#1a1a1a;--radio-button-group-bg:#2d2d2d;--radio-button-group-hover:#404040;--navigation-height:40px}[data-theme=light]{--text-primary:#1a1a1a;--text-alternate:#4a4a4a;--link-color:#2d2d2d;--nav-background:#f5f5f5;--nav-active-item-bg:#e0e0e0;--bg-primary:#fff;--bg-alternate:#f5f5f5;--bg-tertiary:#e8e8e8;--button-primary-bg:#2d2d2d;--button-alternate-bg:#2d2d2dcc;--button-shadow-color:#0003;--current-step-indicator:#e8e8e8;--radio-button-group-bg:#e8e8e8;--radio-button-group-hover:#d0d0d0}body.light-theme img[src$=\.svg],body.light-theme img[src$=\.png]{filter:invert()}nav{width:100%;height:var(--navigation-height);background:var(--nav-background);z-index:1000;box-sizing:border-box;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:0 clamp(1rem,4vw,2rem);display:inline-flex;position:fixed;top:0;left:0;right:0}nav a,nav span{height:var(--navigation-height);color:var(--text-primary,#fff);align-items:center;padding:0 clamp(1rem,2vw,2rem);font-size:1rem;line-height:100%;text-decoration:none;transition:all .3s;display:inline-flex}nav #theme-toggle-container span{height:auto}nav .active-nav-item{background:var(--nav-active-item-bg);text-decoration:none}nav a:hover{background:var(--bg-alternate);color:var(--text-primary);text-decoration:none}html,body,li,p,div,span,label,input,h1,h2,h3,h4,h5,h6,input,button,select{color:var(--text-primary);font-family:Jost,sans-serif;font-size:14px;font-weight:400;display:inline-block}div,p{display:block}a{color:var(--link-color);font-size:80%}a:hover{text-decoration:none}.icon-toggle label{cursor:pointer;color:#888;background:0 0;border-radius:6px;align-items:center;padding:6px;transition:background .2s,color .2s;display:inline-flex}.icon-toggle input[type=checkbox]:checked+label,.icon-toggle input[type=checkbox]+label:hover{background:var(--button-primary-bg)}.icon-toggle input[type=checkbox]:checked+label:hover{background:var(--button-alternate-bg)}#skinned-step-tools{flex-direction:column;row-gap:1rem}#animation-filter{background-color:var(--bg-primary);border:none;border-radius:4px;width:95%;margin-bottom:.5rem;padding:.5rem}#animation-listing-count{color:var(--text-alternate);position:absolute;top:5rem;right:3rem}#animation-selection-count{color:var(--text-primary);background-color:var(--bg-primary);border-radius:50%;padding:.1rem .5rem;font-size:80%}hr{border:1px solid var(--bg-alternate);width:100%;margin:1rem 0}li{color:var(--text-primary);line-height:135%;display:list-item}html{height:100%}body{background:var(--bg-primary);background:linear-gradient(180deg,var(--bg-primary)41%,var(--bg-tertiary)100%);padding-top:var(--navigation-height);box-sizing:border-box}#tool-selection-group{margin-bottom:2rem}div{padding:.25rem}input[type=number]{background:var(--bg-primary);border:1px solid #878787;border-radius:3px;width:40px;padding:.5rem}input[type=text]{background-color:var(--bg-primary);border:1px solid var(--text-primary);color:var(--text-primary)}button.secondary-button{background:linear-gradient(0deg,var(--bg-alternate)0%,var(--bg-tertiary)100%);box-shadow:2px 2px 3px var(--button-shadow-color);cursor:pointer;border:1px solid gray;border-radius:3px;transition:all .1s}button.secondary-button:hover{background:var(--bg-primary)}button.secondary-button.play{background:var(--bg-primary);box-shadow:none;border:none;border:1px solid var(--bg-tertiary);border-radius:0;flex-grow:1;align-items:center;margin-right:0;padding:0;display:inline-flex;transform:scale(1)}button.secondary-button.play:hover{border:1px solid var(--text-primary);transition:all .4s;transform:scale(1)}button,.button{background:var(--button-primary-bg);background:linear-gradient(180deg,var(--button-primary-bg)0%,var(--button-alternate-bg)100%);box-shadow:3px 3px 2px var(--button-shadow-color);border:1px solid var(--button-shadow-color);cursor:pointer;text-align:center;border-radius:.25rem;margin-right:.5rem;padding:.3rem .8rem;transition:all .1s}button:hover,.button:hover{transform:scale(1.05)}button:active,.button:active{transform:scale(.98)}button:disabled{background:var(--button-alternate-bg);opacity:.5;cursor:not-allowed;border:none}.button-icon-group{justify-content:center;align-items:end;column-gap:6px;display:flex}.button-icon-group span{align-self:center}.transform-icons{border:1px solid var(--text-primary);cursor:pointer;border-radius:4px;width:25px;height:25px;padding:.4rem}.transform-icons:hover{background:var(--bg-primary)}canvas{z-index:-1;position:fixed;inset:0}select{background:var(--bg-alternate);border:1px solid var(--text-alternate);color:var(--text-primary);border-radius:4px;padding:.5rem}option{background:var(--bg-primary);color:var(--text-primary);border:none;border-radius:0}#current-step-index{background:var(--current-step-indicator);color:var(--text-primary);text-align:center;border-radius:1rem;padding:.5rem 1rem;font-size:15px}#current-step-label{font-size:20px}#load-model-tools,#load-skeleton-tools,#transform-controls,#skeleton-step-actions{flex-direction:column;row-gap:.4rem;display:flex}#tool-panel{background:var(--bg-tertiary);background:radial-gradient(circle,var(--bg-alternate)0%,var(--bg-primary)100%);height:fit-content;box-shadow:1px 1px 8px 0px var(--bg-primary);top:var(--navigation-height);border-left:1px solid var(--bg-tertiary);box-sizing:border-box;height:100%;padding:1rem;position:fixed;right:0;overflow:hidden auto}#animations-listing{flex-direction:column;width:100%;display:flex}::-webkit-scrollbar-track{background:var(--bg-tertiary)}::-webkit-scrollbar-thumb{background:var(--bg-alternate);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--bg-primary)}#animations-items{background:var(--bg-alternate);border:1px solid var(--bg-tertiary);flex-flow:wrap;gap:.25rem;width:24rem;max-height:27rem;margin-bottom:1rem;display:inline-flex;overflow:hidden auto}#animations-items div{padding:0;display:inline-flex}#animations-items>div:nth-child(odd){background:var(--bg-alternate)}.anim-item{flex-direction:column;justify-content:space-between;width:103px;height:160px;padding:0;transition:box-shadow .2s ease-in-out;display:flex}.anim-preview-label{cursor:pointer;font-size:90%;line-height:110%}input[type=file]{display:none}#github-logo{padding:.5rem;text-decoration:none;transition:opacity .5s ease-in-out}#github-logo:hover{opacity:.6}#github-logo img{width:50px;height:auto}.dropdown{display:inline-block;position:relative}.dropdown-content{background-color:var(--bg-tertiary);z-index:1;min-width:160px;display:none;position:absolute;box-shadow:0 8px 16px #0003}.dropdown-content a{color:var(--text-primary);padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:var(--text-primary)}.show{display:block}#header-ui{flex-direction:column;gap:.5rem;display:flex;position:fixed;bottom:140px;left:5px}.step-instructions{max-width:220px}.tippy-box[data-theme~=mesh2motion]{background-color:var(--bg-primary);color:var(--text-primary);padding:.5rem;box-shadow:3px 3px 6px #1420276b}.styled-checkbox{align-items:center;gap:.2rem;margin-top:.4rem;margin-bottom:.4rem;display:flex}.styled-checkbox input[type=checkbox]{cursor:pointer;width:20px;height:20px;accent-color:var(--text-alternate)}.styled-checkbox label{cursor:pointer;padding:.2rem .5rem;font-size:1rem}#bone-selection-section{background:var(--bg-alternate);border-radius:3px;flex-direction:column;margin:0;padding:.5rem}.alternate-background-section{background-color:var(--bg-alternate);flex-direction:column;gap:1rem;padding:1rem;display:flex}#animation-filter::placeholder{color:var(--text-primary);opacity:1;font-style:italic}#theme-toggle-container{align-items:center;display:flex}#theme-toggle{cursor:pointer;border:1px solid #8080804d;border-radius:.5rem;justify-content:center;align-items:center;width:40px;height:40px;padding:.5rem;display:flex}#theme-toggle:hover{background:var(--bg-tertiary)}#theme-toggle .theme-icon{justify-content:center;align-items:center;padding:0;display:flex}#theme-toggle .theme-icon .material-symbols-outlined{color:var(--text-primary);font-size:24px}#view-control-hitbox{width:120px;height:120px;position:absolute;bottom:0;left:0}#animations-items .no-animations-message{padding:.5rem;font-size:90%;font-style:italic}#build-version{color:var(--text-alternate);padding:.5rem .7rem;font-size:.8rem;position:fixed;bottom:0;left:0}#animation-progress-loader-container{flex-direction:column;align-items:center;gap:0;width:100%;margin-bottom:1rem}#animation-progress-loader-container #loading-progress-bar{background-color:var(--button-primary-bg);border:1px solid gray;justify-content:center;width:0%;height:auto;transition:width .3s;display:flex}#animation-progress-loader-container #current-file-progress-bar{background-color:var(--button-alternate-bg);border:1px solid gray;width:0%;height:4px;margin-top:2px;transition:width .3s}#animation-progress-loader-container #loading-status-text{color:var(--text-primary);font-size:1.1rem}
fieldset{align-items:anchor-center;border:none;flex-direction:column;gap:.2rem;margin:0;padding:0;display:inline-flex}.toggle{box-sizing:border-box;flex-flow:row;justify-content:flex-start;align-items:stretch;display:flex}.toggle input{width:0;height:0;position:absolute;left:-9999px}.toggle input+label{border:solid 2px var(--radio-button-group-bg);padding:.5rem .5rem .25rem;font-size:1rem;transition:border-color .15s ease-out,color .25s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}.toggle input+label:first-of-type{border-right:none;border-radius:6px 0 0 6px}.toggle input+label:last-of-type{border-left:none;border-radius:0 6px 6px 0}.toggle input:hover+label{border-color:var(--radio-button-group-bg);background:var(--radio-button-group-hover)}.toggle input:checked+label{background-color:var(--radio-button-group-bg);color:#fff;border-color:var(--radio-button-group-bg);z-index:1}
#animation-player{background:var(--bg-primary);border:1px solid var(--bg-tertiary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;border-radius:0;flex-direction:column;align-items:center;gap:0;width:40rem;padding:0;transition:all .3s;display:none;position:fixed;bottom:0;left:38%;transform:translate(-50%)}@media (max-width:1200px){#animation-player{width:30rem}}@media (max-width:1000px){#animation-player{width:8rem}}#animation-player.visible{visibility:visible}#current-animation-container{position:absolute;top:-2.2rem}#play-controls{align-items:center;gap:8px;width:100%;padding:0;display:flex}.animation-control-button{background:var(--button-primary-bg);width:30px;height:30px;box-shadow:none;color:#fff;cursor:pointer;border:none;border-radius:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.animation-control-button:hover:not(:disabled){background:var(--button-alternate-bg);transform:scale(1.05)}.animation-control-button .material-symbols-outlined{font-size:22px;font-weight:400}#animation-scrubber{background:var(--bg-tertiary);cursor:pointer;appearance:none;border-radius:4px;outline:none;flex:1;min-width:180px;height:4px;margin:0 8px}@media (max-width:1000px){#animation-scrubber{display:none}}#animation-scrubber::-webkit-slider-track{background:var(--bg-primary);border-radius:4px;height:8px}#animation-scrubber::-webkit-slider-thumb{appearance:none;opacity:1;background:var(--button-primary-bg);cursor:pointer;border:3px solid var(--text-primary);border-radius:50%;width:15px;height:15px;transition:all .2s;box-shadow:0 2px 6px #0000004d}#animation-scrubber::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px #0006}#current-time,#total-time{width:1.2rem}
.modal-dialog-content hr{margin:3rem 0}.modal-dialog-overlay{z-index:9999;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-dialog-content{background:var(--bg-primary);text-align:center;border-radius:8px;max-width:41rem;padding:2em;box-shadow:0 2px 16px #0003}.modal-dialog-content p{margin-bottom:2rem}.modal-dialog-content h2{color:var(--text-primary);margin:0 0 3rem;font-size:2rem;display:block}.modal-dialog-content *{color:var(--text-primary);margin:.5rem;font-size:1.1rem;line-height:1.7rem}.modal-dialog-close{margin-top:1em;padding:.5em 1.5em;font-size:1em}
.model-selection-section{left:0;top:calc(var(--navigation-height) + 1rem);flex-direction:column;gap:0;margin:1rem;display:inline-flex;position:fixed}.model-selection-section button:first-child{border-top-left-radius:1rem;border-top-right-radius:1rem}.model-selection-section button:last-child{border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}.model-selection-section button{height:3rem;box-shadow:none;border:1px solid var(--button-primary-bg);background:0 0;background-color:var(--nav-background);border-radius:0}.model-selection-section button:hover{background-color:var(--nav-active-item-bg);transform:scale(1)}button.active-button{background-color:var(--button-primary-bg)}#animations-items{max-height:calc(100vh - 14rem)}#animation-listing-count{top:1.4rem}
h1{font-size:1.7rem}.bone-map-section{border:1px solid var(--bg-tertiary);flex-direction:column;padding:0;display:inline-flex}.bone-map-heading{color:var(--text-primary);background:var(--bg-alternate);text-align:center;margin:0 0 1rem;padding:.5rem;font-size:1.1rem}.bone-map-content{padding:0 1rem 1rem}#source-bones-list,#target-bones-list{background-color:var(--bg-alternate);border-radius:.25rem;max-height:calc(100vh - 400px);overflow-y:auto}#source-bones-list::-webkit-scrollbar{width:8px}#target-bones-list::-webkit-scrollbar{width:8px}#source-bones-list::-webkit-scrollbar-track{background:var(--bg-alternate);border-radius:.25rem}#target-bones-list::-webkit-scrollbar-track{background:var(--bg-alternate);border-radius:.25rem}#source-bones-list::-webkit-scrollbar-thumb{background:var(--text-secondary);opacity:.5;border-radius:.25rem}#target-bones-list::-webkit-scrollbar-thumb{background:var(--text-secondary);opacity:.5;border-radius:.25rem}#source-bones-list::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}#target-bones-list::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}#source-bones-list,#target-bones-list{scrollbar-width:thin;scrollbar-color:var(--text-secondary)var(--bg-alternate)}.bone-item{border-bottom:1px solid var(--bg-tertiary);padding:.5rem}.bone-item-source{cursor:grab;-webkit-user-select:none;user-select:none;align-items:center;display:flex}.bone-item-source:before{content:"⋮⋮";color:var(--text-secondary);opacity:.6;margin-right:.5rem;font-weight:700;line-height:1}.bone-item-source:hover:before{opacity:1;color:var(--primary-color)}.bone-item-source.dragging{opacity:.5;cursor:grabbing}.bone-item-target{justify-content:space-between;align-items:center;gap:.5rem;min-height:2rem;display:flex}.bone-item-target.drag-over{background-color:var(--bg-tertiary);border:1px dashed var(--primary-color)}.mapping-source-name{color:var(--bg-primary);background:var(--text-alternate);border-radius:5px;padding:.25rem .5rem}#animations-items{max-height:calc(100vh - 14rem)}#animation-listing-count{top:1.4rem}#source-bones-filter,#target-bones-filter{border:1px solid var(--bg-tertiary);background:var(--bg-primary);width:100%;color:var(--text-primary);border-radius:.25rem;margin-bottom:.5rem;padding:.5rem;font-size:.9rem;transition:border-color .2s}#source-bones-filter:focus,#target-bones-filter:focus{border-color:var(--primary-color);outline:none}#source-bones-filter::placeholder,#target-bones-filter::placeholder{color:var(--text-secondary);opacity:.7}