html.theme-light{color-scheme:light;--color-bg: hsl(0, 0%, 98%);--color-bg-light: hsl(0, 0%, 100%);--color-text: hsl(0, 0%, 10%);--color-border: hsl(0, 0%, 80%);--color-primary: hsl(253, 100%, 60%);--color-ripple: hsl(0, 0%, 85%);--color-btn-bg: hsl(253, 100%, 60%);--color-btn-text: hsl(0, 0%, 100%);--color-violet-light: hsl(253, 100%, 95%);--color-violet-dark: hsl(253, 100%, 60%);--color-green-light: hsl(112, 100%, 97%);--color-green-dark: hsl(112, 100%, 25%);--color-grey-light: hsl(0, 0%, 95%);--color-grey-dark: hsl(0, 0%, 25%);--color-orange-light: hsl(42, 87%, 95%);--color-orange-dark: hsl(42, 87%, 25%);--color-statistics-dark: hsl(253, 100%, 60%);--color-statistics-light: hsl(253, 100%, 95%);--color-tech-not-started-dark: hsl(253, 100%, 85%);--color-tech-not-started-light: hsl(253, 100%, 60%);--color-tech-in-progress-dark: hsl(44, 100%, 73%);--color-tech-in-progress-light: hsl(42, 87%, 25%);--color-tech-completed-dark: hsl(112, 100%, 82%);--color-tech-completed-light: hsl(112, 100%, 20%)}html.theme-dark{color-scheme:dark;--color-bg: hsl(0, 0%, 10%);--color-bg-light: hsl(0, 0%, 14%);--color-text: hsl(0, 0%, 90%);--color-border: hsl(0, 0%, 30%);--color-primary: hsl(253, 100%, 70%);--color-ripple: hsl(0, 0%, 20%);--color-btn-bg: hsl(253, 100%, 80%);--color-btn-text: hsl(253, 100%, 35%);--color-violet-light: hsl(253, 50%, 10%);--color-violet-dark: hsl(253, 100%, 70%);--color-green-light: hsl(112, 50%, 10%);--color-green-dark: hsl(112, 100%, 35%);--color-grey-light: hsl(0, 0%, 15%);--color-grey-dark: hsl(0, 0%, 55%);--color-orange-light: hsl(42, 50%, 10%);--color-orange-dark: hsl(42, 87%, 40%);--color-statistics-dark: hsl(253, 100%, 60%);--color-statistics-light: hsl(253, 100%, 95%);--color-tech-not-started-dark: hsl(253, 100%, 10%);--color-tech-not-started-light: hsl(253, 100%, 70%);--color-tech-in-progress-dark: hsl(42, 87%, 20%);--color-tech-in-progress-light: hsl(42, 87%, 53%);--color-tech-completed-dark: hsl(112, 100%, 12%);--color-tech-completed-light: hsl(112, 100%, 37%)}html{font-family:sans-serif;scrollbar-gutter:stable;background-color:var(--color-bg);color:var(--color-text)}body{margin:0}*{box-sizing:border-box}main{display:flex;flex-direction:column;gap:8px;padding:16px;max-width:600px;width:100%;margin:0 auto}.button{background-color:var(--color-btn-bg);color:var(--color-btn-text);border:none;border-radius:32px;padding:0 16px;height:50px;font-size:16px;font-weight:700;cursor:pointer;width:fit-content}.button:disabled{opacity:.5;cursor:not-allowed}textarea,input{height:50px;flex:1;border-radius:24px;border:1px solid var(--color-violet-dark);background-color:var(--color-violet-light);color:var(--color-text);display:block;padding:16px;font-size:16px;font-family:inherit;resize:vertical}.page{display:flex;flex-direction:column;gap:8px}.toolbar,.filterbar{display:flex;gap:8px;align-items:center;justify-content:space-between}.toolbar-actions{display:flex;gap:8px}.toolbar-actions .button{display:flex;align-items:center}.tech-tree{display:flex;flex-direction:column;gap:16px;align-items:center;margin-top:16px}.tech-tree[data-selecting=false] .selection-checkbox{opacity:0}.import-container{position:relative}.popup{position:absolute;top:100%;margin-top:8px;background-color:var(--color-bg-light);border:1px solid var(--color-border);border-radius:16px;overflow:hidden;min-width:max-content;animation:fade-in .2s ease-out forwards;z-index:999}.popup.right{right:0}.popup.left{left:0}.popup .popup-menu{display:flex;flex-direction:column}.popup .popup-menu .menu__item{padding:8px 16px;cursor:pointer}.popup .popup-menu .menu__item:hover{background-color:var(--color-ripple)}@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.roadmap-list .roadmap-item{padding:16px 8px}.roadmap-list .roadmap-item:hover{background-color:var(--color-ripple);cursor:pointer}.modal-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background-color:#00000080;z-index:999;animation:modal-backdrop .3s ease-out}.modal-backdrop .modal-content{background-color:var(--color-bg-light);padding:16px;border-radius:16px;animation:modal-content .3s ease-out;overflow-y:auto;max-height:100vh;max-height:100dvh;width:100%;max-width:600px}.modal-backdrop .modal-content .modal-content__header{display:flex;align-items:center}.modal-backdrop .modal-content .modal-content__header .modal-content__title{flex:1}.modal-backdrop .modal-content .modal-content__header .modal__close{display:flex;align-items:center;justify-content:center;background:none;color:var(--color-primary);height:32px;width:32px;padding:0}@keyframes modal-backdrop{0%{opacity:0}to{opacity:1}}@keyframes modal-content{0%{opacity:0;transform:translateY(200px) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}.filter-container{position:relative}.filter-container .filter-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;background-color:transparent;border:1px solid var(--color-primary);border-radius:100%;color:var(--color-primary)}.quick-actions-container{position:relative}.quick-actions-container .quick-actions-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;background-color:transparent;border:1px solid var(--color-primary);border-radius:100%;color:var(--color-primary)}.search{display:flex;flex:1;position:relative}.search .search-input{width:100%;padding:8px 16px;background-color:var(--color-violet-light);border-color:var(--color-violet-dark);color:var(--color-text)}.search .search-input::placeholder{color:var(--color-violet-dark);opacity:.8}.search .search-input::-webkit-search-cancel-button{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='currentColor' d='m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z'/%3E%3C/svg%3E");height:1rem;width:1rem;cursor:pointer;background-repeat:no-repeat;background-position:center}.search .search-count{position:absolute;right:1rem;top:50%;transform:translateY(-50%)}.statistics{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;-webkit-user-select:none;user-select:none}.stats,.completion{display:flex;align-items:center;justify-content:center;width:100%;gap:8px}.stats .stats-item{display:flex;flex-direction:column;gap:.25rem;align-items:center;justify-content:center;padding:16px;border:1px solid;font-size:14px;flex:1}.stats .stats-item[data-variant=total]{background-color:var(--color-violet-light);color:var(--color-violet-dark);border-color:var(--color-violet-dark);border-radius:16px}.stats .stats-item[data-variant=not-started]{background-color:var(--color-grey-light);color:var(--color-grey-dark);border-color:var(--color-grey-dark);border-radius:16px}.stats .stats-item[data-variant=in-progress]{background-color:var(--color-orange-light);color:var(--color-orange-dark);border-color:var(--color-orange-dark);border-radius:16px}.stats .stats-item[data-variant=completed]{background-color:var(--color-green-light);color:var(--color-green-dark);border-color:var(--color-green-dark);border-radius:16px}.completed-count,.total-count{background-color:var(--color-statistics-dark);color:var(--color-statistics-light);border-radius:24px;padding:0 1rem;width:3rem;height:2rem;display:flex;align-items:center;justify-content:center}.completion-progress{flex:1;border:1.5px solid var(--color-statistics-dark);height:2rem;border-radius:24px;overflow:hidden;position:relative}.completion-progress .bar{background-color:var(--color-statistics-dark);height:inherit}.completion-progress .percentage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-statistics-light);background-color:var(--color-statistics-dark);border-radius:24px;padding:.25rem .5rem}@media screen and (max-width:500px){.stats{flex-direction:column}.stats .stats-item{width:100%}.completion-progress{width:100%}}.technology-card{border-radius:16px;padding:16px}.card__state{border-radius:24px;padding:8px;font-size:16px;font-weight:700;border:none}.card__state--not-started{background-color:var(--color-tech-not-started-dark);color:var(--color-tech-not-started-light)}.card__state--in-progress{background-color:var(--color-tech-in-progress-dark);color:var(--color-tech-in-progress-light)}.card__state--completed{background-color:var(--color-tech-completed-dark);color:var(--color-tech-completed-light)}.card__links{list-style-type:none;padding:0;display:flex;flex-direction:column;gap:8px}.card__link{display:flex;align-items:center}.link__label{font-weight:700;margin-right:4px;border-radius:24px;padding:4px}.link__label--article{background-color:#c8e5ff;color:#036}.link__label--video{background-color:#ffc0d9;color:#603}.link__label--opensource{background-color:#c0ffc4;color:#00660f}.link__url{color:var(--color-primary);text-decoration:none}.link__url:hover{text-decoration:underline}.notes__header{display:flex;align-items:flex-start;gap:16px}.notes__textarea{min-height:8rem}.technology-data-form,.notes__textarea,.deadline__input{width:100%}.form-save{margin-top:12px}.tech-tree-item-container{display:flex;justify-content:center;width:100%;-webkit-user-select:none;user-select:none}.tech-tree-item{width:fit-content;position:relative;display:flex;flex-direction:column;align-items:center}.tech-tree-item .selection-checkbox{position:absolute;right:-24px;top:50%;transform:translateY(-50%);appearance:none;height:16px;width:16px;padding:0;border:2px solid var(--color-grey-dark);border-radius:16px;margin:0}.tech-tree-item .selection-checkbox:checked{background-color:var(--color-primary);border-color:var(--color-primary);opacity:1}.tech-tree-item .selection-checkbox:checked:after{content:"";display:flex;position:absolute;width:100%;height:100%;color:var(--color-btn-text);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='currentColor' d='m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z'/%3E%3C/svg%3E") no-repeat center}.tech-tree-item .tech-tree-item-content{display:flex;flex-direction:column;align-items:center}.tech-tree-item.highlight{animation:highlight 1.5s ease-in-out}.tech-tree-item .bubble-title{border-radius:24px;padding:0 16px;display:flex;background-color:var(--color-bubble-bg, var(--color-tech-not-started-dark));color:var(--color-bubble-text, var(--color-tech-not-started-light));position:relative}.tech-tree-item .bubble-deadline{background-color:var(--color-grey-light);color:var(--color-grey-dark);border-radius:0 0 12px 12px;font-size:14px;padding:4px 8px;width:fit-content}.tech-tree-item .path{position:absolute;bottom:-16px;left:50%;transform:translate(-50%);display:block;height:16px;width:4px;background-color:var(--color-branch, var(--color-tech-not-started-light))}.tech-tree-item--not-started{--color-bubble-bg: var(--color-tech-not-started-dark);--color-bubble-text: var(--color-tech-not-started-light)}.tech-tree-item--in-progress{--color-bubble-bg: var(--color-tech-in-progress-dark);--color-bubble-text: var(--color-tech-in-progress-light);--color-branch: var(--color-tech-in-progress-light)}.tech-tree-item--completed{--color-bubble-bg: var(--color-tech-completed-dark);--color-bubble-text: var(--color-tech-completed-light);--color-branch: var(--color-tech-completed-light)}@keyframes highlight{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}@media screen and (max-width:500px){.tech-tree-item .selection-checkbox{transform:none;bottom:0;top:auto;right:0}}.state-edit-mode-button[data-active=true]{background-color:var(--color-violet-light);color:var(--color-violet-dark)}.multiple-editing-container{position:relative}.app-header{margin:0 auto;max-width:600px;width:100%;padding:0 16px;display:flex;align-items:center;gap:8px;height:60px;position:sticky;top:0;background-color:var(--color-bg);z-index:1}.app-header h1{flex:1}.app-header .back{margin-right:16px}.app-header .back,.app-header .settings,.app-header .statistics,.app-header .user{display:flex;align-items:center;color:var(--color-primary)}.app-header .selected-actions{-webkit-user-select:none;user-select:none;display:flex;align-items:center;width:calc(100% + 32px);background-color:var(--color-bg-light);margin:0 -16px;padding:0 16px;height:60px;gap:8px}.app-header .selected-actions .selected-actions__count{flex:1;font-weight:700}.statistics-info{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.statistics-info .statistics-item{display:flex;flex-direction:column;gap:.25rem;align-items:center;justify-content:center;padding:16px;border:1px solid;font-size:14px;flex:1;font-size:18px;font-weight:600}.statistics-info .statistics-item[data-variant=not-started]{background-color:var(--color-tech-not-started-light);color:var(--color-tech-not-started-dark);border-color:var(--color-tech-not-started-dark);border-radius:16px}.statistics-info .statistics-item[data-variant=in-progress]{background-color:var(--color-tech-in-progress-light);color:var(--color-tech-in-progress-dark);border-color:var(--color-tech-in-progress-dark);border-radius:16px}.statistics-info .statistics-item[data-variant=completed]{background-color:var(--color-tech-completed-light);color:var(--color-tech-completed-dark);border-color:var(--color-tech-completed-dark);border-radius:16px}.auth-form{display:flex;flex-direction:column;gap:8px}