*,*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select,label{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;text-align:left;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-primary: #f7f3eb;--color-primary-rgb: 240, 238, 232;--color-secondary: #fbdf80;--color-accent: #3939ff;--color-cyan-light: #aee6ed;--color-lavender: #eadcfb;--color-orange-deep: #ca3702;--color-text-light: #ffffff;--color-text-dark: #212192;--color-text-accent: #3939ff;--color-danger: #e30000;--color-success: #05822d;--space-xxs: .4rem;--space-xs: .8rem;--space-sm: 1.6rem;--space-md: 2.4rem;--space-lg: 3.2rem;--space-xl: 4.8rem;--radius-md: 8px;--radius-lg: 26px;--radius-circle: 50%;--card-height: 440px;--text-xxs: .75rem;--text-xs: .875rem;--text-sm: 1rem;--text-md: 1.125rem;--text-lg: 1.5rem;--text-xl: 2.25rem;--text-xxl: 4;--mobile: 480px;--tablet: 768px;--desktop: 1024px;--large-desktop: 1440px}body{background-color:var(--color-primary)}#root{padding:var(--space-xs);min-height:100svh;display:flex;flex-direction:column}.main{width:100%;font-size:var(--text-xs);display:flex;flex-direction:column;flex:1}@media (min-width: 768px){#root{padding:var(--space-md)}.main{font-size:var(--text-sm)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-lavender)}::-webkit-scrollbar-thumb{background-color:var(--color-accent);border-radius:10px;border:1px solid var(--color-lavender)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-orange-deep)}*{scrollbar-color:var(--color-accent) var(--color-lavender);scrollbar-width:thin}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)!important}.bg-accent{background-color:var(--color-accent)}.bg-faded-cyan-light{background-color:var(--color-faded-cyan-light)}.bg-lavender{background-color:var(--color-lavender)}.bg-orange-deep{background-color:var(--color-orange-deep)}.color-danger{color:var(--color-danger)!important}.container{max-width:1800px;margin-left:auto;margin-right:auto}.flex{display:flex;justify-content:center;align-items:center}.hidden{visibility:hidden}.highlight{outline:dotted 3px var(--color-accent)}.opacity-0{opacity:0}.opacity-1{opacity:1}.pointer-events-none{pointer-events:none}.rotate-45{transform:rotate(45deg)}.-rotate-45{transform:rotate(-45deg)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}.text-left{text-align:left}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.text-accent{color:var(--color-accent)}.text-lavender{color:var(--color-lavender)}.text-orange-deep{color:var(--color-orange-deep)}.transform-200{transition:transform .2s ease-in-out}.transform-300{transition:transform .3s ease-in-out}.icon-close__container{position:relative;width:100%;aspect-ratio:square}.icon-close__line{width:100%;height:2px;position:absolute}.icon-help__container{background-color:var(--color-accent);color:var(--color-orange-deep);border-radius:50%;height:3rem;width:3rem;display:flex;align-items:center;justify-content:center;transition:all .3s}.icon-help__container:hover{background-color:var(--color-orange-deep);color:var(--color-accent)}.icon-help__icon{font-size:var(--text-lg);line-height:1.5;font-weight:300;color:var(--color-text-light)}.icon-plus__container{position:relative;height:1rem;width:1rem;display:flex;align-items:center;justify-content:center}.icon-plus__line{position:absolute;width:16px;height:2px;background-color:var(--color-primary)}button{display:block;font-size:1em;font-weight:500;font-family:inherit;border:none;cursor:pointer;background-color:transparent;white-space:nowrap}button:focus-visible{outline:4px dotted var(--color-accent)}.button{display:block;font-size:1em;font-weight:500;font-family:inherit;border:none;cursor:pointer;background-color:transparent;white-space:nowrap;border-radius:var(--radius-lg);padding:var(--space-xxs) var(--space-xs);transition:all .3s}.button-main{background-color:var(--color-orange-deep);color:var(--color-text-light)}.button-main:hover{background-color:var(--color-accent)}.button-faded{background-color:var(--color-lavender)}.button-ghost{border:2px solid var(--color-accent);background-color:var(--color-lavender)}.button-ghost:hover{background-color:var(--color-secondary)}.button-close{display:block;width:2.8rem;height:2.8rem;border-radius:var(--radius-circle);transition:all .3s;padding:8px}.button-close:hover{background-color:var(--color-orange-deep)}.button-close:hover *{background-color:var(--color-secondary)}.alert{position:absolute;width:100%;height:100%;top:0;left:0}.alert__overlay{width:100%;height:100%;background-color:var(--color-orange-deep);display:flex;justify-content:center;align-items:center}.alert__popup{width:90%;margin:auto;padding:var(--space-sm);background-color:var(--color-secondary);border-radius:var(--radius-lg);display:flex;justify-content:center;align-items:center}.alert__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-xs)}.alert__message{text-align:center;text-wrap:balance}.card{position:relative;flex:1;background-color:var(--color-secondary);color:var(--color-text-dark);padding:var(--space-xs);padding-top:var(--space-lg);border-radius:var(--radius-lg);border:solid 2px var(--color-primary);overflow:clip;align-self:center}.card__container{position:relative;display:flex;width:380px;margin:0 var(--space-xs)}.card__container--drag-over .card{z-index:10}.card__container--dragged{clip-path:inset(0 round 1rem)}.card__container--dragged .card{z-index:20;cursor:grabbing;transition:all .2s ease-in-out}.card__drag-indicator{width:5px;height:90%;top:5%;background-color:var(--color-accent);position:absolute}.card__drag-indicator--left{left:0;transform:translate(-15px)}.card__drag-indicator--right{right:0;transform:translate(15px)}.card__close-button{position:absolute;top:var(--space-xs);right:var(--space-xs);background-color:var(--color-lavender)}.card__title{font-size:var(--text-lg);text-transform:capitalize}.card__title,.card__description{color:var(--color-text-dark);width:100%;display:block;border-radius:var(--radius-lg);padding:var(--space-xs);font-family:inherit;border:2px solid var(--color-transparent);background-color:rgba(var(--color-primary-rgb),.2);transition:all .3 ease-in-out}.card--new .card__title,.card--new .card__description{border:2px solid var(--color-transparent);background-color:rgba(var(--color-primary-rgb),.8)}.card__title:user-invalid,.card__description:user-invalid{border:2px solid var(--color-danger)}.card__description{resize:none}.card__title:focus-visible,.card__description:focus-visible{outline:2px solid var(--color-accent)}.card__input-label{font-size:var(--text-xs)}.card__fields{margin-bottom:var(--space-xxs)}.card__description-container{margin-top:var(--space-xs)}.card__button{position:absolute;right:var(--space-xs);width:100%;height:3rem;margin-top:var(--space-xxs);margin-bottom:var(--space-xs);display:flex;align-items:center;justify-content:end}.card__dates{font-size:var(--text-xxs);color:var(--color-text-dark);margin:0 0 var(--space-xs) var(--space-xs)}.cards-list__container{position:relative;display:flex;flex-wrap:wrap;row-gap:var(--space-sm);background-color:var(--color-primary);border:var(--color-accent) 2px solid;border-radius:var(--radius-lg);padding:var(--space-xs) 0;z-index:1;flex:1}@media (min-width: 900px){.cards-list__container{padding:1.2rem var(--space-xxs)}}.cards-list__no-cards{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-accent);font-weight:600;background-color:var(--color-primary);border:var(--color-accent) 2px solid;border-radius:var(--radius-lg)}.character-countdown{font-size:var(--text-xxs);text-align:right;margin-top:var(--space-xxs);color:var(--color-text-dark);margin-right:var(--space-xxs)}.header{position:relative;width:100%}.header__title{width:100%;text-align:left;font-size:clamp(2.5rem,11vw,6rem);line-height:.7;text-transform:uppercase;color:var(--color-accent);letter-spacing:-3px;font-weight:400;width:fit-content}@media (min-width: 1024px){.header__title{letter-spacing:-5px;transition:letter-spacing .5s ease-in-out}.header__title:hover{letter-spacing:80px}}.header__buttons{width:100%;display:flex;justify-content:space-between;margin:var(--space-lg) 0}.header__add-button{display:flex;justify-content:center;align-items:center;gap:var(--space-xxs)}.instructions-popup{position:absolute;top:0;right:0;z-index:100;color:var(--color-text-dark)}.instructions-popup__content{position:absolute;top:0;right:0;width:calc(100vw - 2 * var(--space-md));height:calc(100svh - 10rem);padding:var(--space-xl) 0 var(--space-md) 0;background-color:var(--color-lavender);border-radius:var(--radius-lg);border:2px solid var(--color-accent);text-align:left}@media (min-width: 768px){.instructions-popup__content{width:50vw;top:-10px;right:-10px}}.instructions-popup__button-close{position:absolute;top:var(--space-xs);right:var(--space-xs);z-index:10;background-color:var(--color-secondary)}.instructions-popup__text{height:100%;overflow-y:scroll;padding:0 var(--space-sm)}@media (min-width: 768px){.instructions-popup__text{padding:0 var(--space-md)}}.instructions-popup__title{font-size:var(--text-xl);margin-bottom:var(--space-sm)}.instructions-popup__subtitle{font-size:var(--text-lg);margin-top:var(--space-md)}.sort-menu{position:relative;width:15rem;text-align:left}.sort-menu__trigger{width:100%;color:var(--color-accent)}.sort-menu__trigger-content{width:100%;display:flex;justify-content:space-between;align-items:center}.sort-menu__list{position:absolute;top:calc(100% - 2px);left:0;width:100%;background-color:var(--color-primary);border:2px solid var(--color-accent);border-radius:var(--radius-lg);display:flex;flex-direction:column;z-index:20}.sort-menu__list-item{border:none;border-radius:var(--radius-lg);text-align:left;padding:var(--space-xs) var(--space-sm);margin:var(--space-xxs);color:var(--color-accent)}.sort-menu__list-item:hover{background-color:var(--color-lavender)}.toast{position:absolute;top:100%;right:5%;padding:var(--space-xxs) var(--space-xs);background-color:var(--color-secondary);border:2px solid var(--color-accent);border-radius:var(--radius-lg)}.toast__text{font-size:var(--text-xs);color:var(--color-accent)}