#output{padding:1.5rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(24rem,1fr))}.category{background-color:var(--clr-base-2);display:flex;flex-direction:column;gap:1rem;position:relative;cursor:grab;border:1px solid transparent;padding:1rem}@supports (corner-shape: squircle){.category{corner-shape:squircle;border-radius:2rem}}.category.keyboard-focused{outline:2px solid var(--clr-accent-1);outline-offset:2px;background-color:canvas}.category-title{font-weight:500;font-size:var(--font-size--large);color:var(--clr-contrast-3)}.category-title[readonly]{border:none}.notes-wrapper{display:flex;flex-direction:column;gap:1rem}.note{background-color:var(--clr-base-3);padding:1rem;position:relative;cursor:pointer}@supports (corner-shape: squircle){.note{corner-shape:squircle;border-radius:1rem}}.note.keyboard-focused{background-color:var(--clr-base);outline:2px solid var(--clr-accent-1);outline-offset:2px}.note-header{display:flex}.note-title{font-size:var(--font-size--large);line-height:1.5}[data-note-type=regular]{padding-block:.25rem;background-color:transparent}[data-note-type=regular] .note-title,[data-note-type=regular] .type-popover-trigger{opacity:.5}.add-note-input{background-color:var(--clr-base);border:none;padding:.5rem 1rem;margin-top:auto}@supports (corner-shape: squircle){.add-note-input{corner-shape:squircle;border-radius:1rem}}.add-note-input::placeholder{color:gray}#createCategoryInput{position:fixed;bottom:1.5rem;right:1rem;background-color:var(--clr-base-2);border:none;padding:1rem}@supports (corner-shape: squircle){#createCategoryInput{corner-shape:squircle;border-radius:2rem}}#createCategoryInput::placeholder{color:gray}.delete-btn{opacity:0;transition:opacity .15s ease-in-out;background:none;border:none;position:absolute;right:1rem;top:.75rem;color:var(--clr-danger-contrast);background-color:var(--clr-base-2);padding:.375rem}@supports (corner-shape: squircle){.delete-btn{corner-shape:squircle;border-radius:1rem}}.note:hover>.delete-btn,.category:hover>.delete-btn{opacity:1}.delete-btn svg{width:1.5rem;height:1.5rem}.category.dragging{opacity:.5;transform:rotate(2deg)}.note.dragging{transform:rotate(2deg)}.category.drop-target,.note.drop-target{background-color:var(--clr-base);box-shadow:0 0 2px 2px #ffffff1a;transform:scale(1.02);transition:all .2s ease}#note-modal{outline:none;border:none;border-radius:.75rem;background-color:var(--clr-base-2);margin:auto;width:48rem;height:80dvh;position:relative}#note-modal::backdrop{background:#000000a8}.modal-content{padding:1.5rem;height:100%}.modal-content .note-header{border-bottom:1px solid gray;width:100%;padding-bottom:.5rem;margin-bottom:1.25rem}.modal-content .note-type-icon{height:2.25rem;width:2.25rem}.modal-note-title{font-size:var(--font-size--x-large);font-weight:500;border:none;width:100%;margin-top:-.375rem}.modal-note-content{outline:none;height:calc(80dvh - 13rem);overflow-y:auto;padding-bottom:5.5rem;scroll-margin-top:8rem}.translating-in-progress{opacity:.6;transform:translate(2px);animation:slide-fade-anim 2s ease-in-out infinite}@keyframes slide-fade-anim{0%,to{opacity:.6;transform:translate(2px)}50%{opacity:.3;transform:translate(-2px)}}code{padding:0 .125rem;border-radius:.25rem;background-color:var(--clr-contrast-3);color:var(--clr-base)}.modal-actions{position:absolute;bottom:0;inset-inline:0}.modal-actions[hidden]{display:none}.modal-actions:has(.notification-error){background-color:var(--clr-danger-base)}.modal-actions:has(.notification-success){background-color:var(--clr-success-base)}.modal-notification{text-align:center;text-wrap:balance;font-weight:500;width:100%;padding:.25rem 1rem}.modal-action-buttons{display:flex;gap:.5rem;padding:.25rem}#modal-cancel-btn,#modal-save-btn{display:flex;gap:.25rem;align-items:center;justify-content:center;width:100%;padding:.25rem .75rem .25rem .5rem;border-radius:10rem;font-weight:500;color:var(--clr-base);border:none}#modal-cancel-btn{background-color:var(--clr-contrast-3)}#modal-save-btn{background-color:var(--clr-success-contrast)}.save-icon,.cancel-icon{width:1.375rem;height:1.375rem}.type-popover-trigger{background:none;border:none;height:fit-content;margin-top:.125rem;padding-right:.5rem}.type-popover-trigger:focus{outline:none}.note-type-icon{width:1.75rem;height:1.75rem;padding:.125rem;border-radius:50%}.note-type-icon-regular{color:gray}.note-type-icon-todo-normal{color:var(--clr-accent-1)}.note-type-icon-todo-high{background:var(--clr-contrast-3);color:var(--clr-accent-1)}.note-type-popover{position:absolute;inset:auto;top:anchor(top);margin-top:-.5rem;margin-left:6rem;justify-self:anchor-center;padding:0 .75rem;border-radius:.5rem;border:none}.type-option-button{display:flex;gap:.5rem;align-items:center;margin-block:.75rem;background:none;border:none}.type-button-option-label{color:var(--clr-contrast-2)}.checkbox-line:not(:has(+.checkbox-line)){margin-bottom:1rem}input[type=checkbox]{width:1.125rem;height:1.125rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--clr-contrast-3);border-radius:.25rem;position:relative;cursor:pointer;margin-right:.5rem;translate:0 .125rem;transition:all .2s ease}input[type=checkbox]:checked{background:var(--clr-success-base);border-color:var(--clr-success-contrast)}input[type=checkbox]:checked:after{content:"✓";position:absolute;top:-2px;left:3px;color:var(--clr-contrast);font-size:.75rem;font-weight:700}body{color-scheme:dark;--clr-accent-1: hwb(271 46% 36%);--clr-accent-2: hwb(0 10% 90%);--clr-base: hwb(0 10% 90%);--clr-base-2: hwb(0 15% 85%);--clr-base-3: hwb(0 20% 80%);--clr-contrast: hwb(0 97% 3%);--clr-contrast-2: hwb(0 92% 8%);--clr-contrast-3: hwb(0 84% 16%);--clr-success-base: hwb(89 1% 68%);--clr-success-contrast: hwb(90 67% 0%);--clr-danger-base: hwb(0 0% 58%);--clr-danger-contrast: hwb(0 67% 0%);--shadow-natural: .75rem .75rem 1rem 0 rgba(0,0,0,.05)}:root{--font-size--small: .875rem;--font-size--medium: 1.125rem;--font-size--large: 1.25rem;--font-size--x-large: 1.625rem}*{box-sizing:border-box;margin:0;padding:0}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;scrollbar-gutter:stable}body{min-height:100vh;background-color:var(--clr-base)}body:has(dialog[open]){overflow:hidden}svg{display:block}body,textarea,input,button,select,[popover]{font-family:system-ui;font-size:var(--font-size--medium);line-height:1.65;color:var(--clr-contrast)}a{font-weight:500;cursor:pointer}h1,h2,h3,h4{font-weight:500;line-height:1.25}h2{font-size:var(--font-size--x-large)}h3{font-size:var(--font-size--large)}ul,ol{padding-left:1.25rem}p:not(:last-child),:where(a:not(:last-child)){margin-bottom:1rem}ul:not(:last-child),ol:not(:last-child){margin-bottom:1rem}li:not(:last-child){margin-bottom:.25rem}figure:not(:last-child){margin-bottom:1rem}h1:not(:last-child),h2:not(:last-child){margin-bottom:1.25rem}h3:not(:last-child){margin-bottom:.75rem}h2:not(:first-child),h3:not(:first-child){margin-top:.75em!important}img{max-width:100%;height:auto}input,select,textarea{padding:.25rem 0;background-color:transparent;border:none;border-bottom:1px solid var(--clr-contrast-3)}input:focus,select:focus,textarea:focus{outline:none}select,::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select;cursor:pointer}option::checkmark{display:none}option{padding:.5rem 1rem}option:hover,option:focus-visible{background:var(--clr-base-2)}select::picker-icon{display:none}::picker(select){border:1px solid gray;padding:.5rem 0;border-radius:1rem}button{cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}table{border-collapse:collapse}td,th{border:1px solid var(--clr-contrast-3);padding:.125rem .5rem}