:root{--color-box-lines: #333333;--color-stroke-elements: #333333;--stroke-width: 1.5px;--ball-stroke-width: 1.5px;--color-yellow: #FDD835;--color-red: #EF5350;--color-green: #55D072;--bg-color: #ffffff;--modal-border-color: var(--color-stroke-elements);--modal-border-width: 2px;--modal-radius: 12px}body{margin:0;padding:50px 0 0;background-color:#fff;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;box-sizing:border-box;-webkit-user-select:none;user-select:none}.dashboard{display:flex;width:95%;max-width:1320px;aspect-ratio:16/9;background-color:#fff;box-shadow:none;position:relative;z-index:1}.column{flex:1;position:relative;display:flex;justify-content:center;align-items:center;margin:0;overflow:visible}.column+.column{margin-left:calc(var(--stroke-width) * -1)}.dashboard-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}.dashboard-bg path{stroke:var(--color-box-lines);stroke-width:var(--stroke-width);fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.box-area{width:100%;height:100%;position:relative}.ball{position:absolute;width:12.1%;aspect-ratio:1/1;border-radius:50%;z-index:10;cursor:pointer;touch-action:none;will-change:transform;transition:transform .1s,opacity .3s;opacity:0;border:var(--ball-stroke-width) solid var(--color-stroke-elements);box-sizing:border-box}.ball:active{cursor:grabbing;z-index:1000;transform:scale(1.1)}.yellow{background-color:var(--color-yellow)}.red{background-color:var(--color-red)}.green{background-color:var(--color-green)}.col-1 .b1{top:25%;left:40%}.col-1 .b2{top:45%;left:30%}.col-1 .b3{top:40%;left:60%}.col-1 .b4{top:65%;left:35%}.col-1 .b5{top:60%;left:55%}.col-1 .b6{top:75%;left:50%}.col-2 .b1{top:25%;left:45%}.col-2 .b2{top:50%;left:35%}.col-2 .b3{top:60%;left:55%}.col-2 .b4{top:75%;left:40%}.col-3 .b1{top:45%;left:20%}.col-3 .b2{top:45%;left:45%}.col-3 .b3{top:65%;left:25%}.task-bar{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:none;border:none;border-bottom:1.5px solid #000;padding:12px 20px;box-sizing:border-box;font-size:16px;color:#000;margin:0;background-color:#fff;position:fixed;top:0;left:0;z-index:100}.left-section{display:flex;align-items:center;gap:12px}.status-icon{font-size:24px;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none}.date-section{text-align:right;text-transform:lowercase}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:9999;display:none;justify-content:center;align-items:center}.modal-overlay.active{display:flex}.task-card{width:90%;max-width:600px;border:1.5px solid black;background-color:#fff;color:#000;display:block;box-shadow:none}.header{background-color:#000;color:#fff;padding:12px 15px;font-size:18px;text-transform:uppercase;font-weight:500;letter-spacing:.5px;display:flex;justify-content:space-between;align-items:center}.subheader{padding:12px 15px;font-size:16px;border-bottom:1.5px solid black}.row{display:flex;border-bottom:1.5px solid black}.label-sidebar{background-color:#000;color:#fff;width:40px;min-width:40px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;text-transform:uppercase;letter-spacing:1px;padding:10px 0}.content{padding:15px;font-size:15px;line-height:1.4;flex-grow:1;white-space:normal;position:relative;-webkit-user-select:text;user-select:text;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.content h1{font-size:20px;font-weight:700;margin-top:15px;margin-bottom:10px;border-bottom:1px solid #eee;padding-bottom:5px}.content h2{font-size:18px;font-weight:700;margin-top:15px;margin-bottom:10px;border-bottom:1px solid #eee;padding-bottom:5px}.content h3{font-size:16px;font-weight:700;margin-top:12px;margin-bottom:8px}.content ul{padding-left:20px;margin-bottom:10px}.content li{margin-bottom:5px}.content strong{font-weight:700}.content p{margin-bottom:8px;line-height:1.5}.read-more-btn{position:absolute;bottom:0;right:0;background-color:#fff;border:1.5px solid #000;border-bottom:none;border-right:none;color:#000;padding:5px 15px;font-size:14px;cursor:pointer;z-index:20;font-weight:400;text-decoration:underline;display:none}.read-more-btn:hover{background-color:#dcdcdc}.close-fullscreen-btn{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;margin-left:auto}.task-card.full-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;max-width:none;border:none;z-index:10000;margin:0;border-radius:0;overflow-y:auto;display:flex;flex-direction:column}.task-card.full-screen .content{overflow:visible;max-height:none;flex-grow:1;display:block;-webkit-line-clamp:unset}.content.truncated{max-height:150px;overflow:hidden;position:relative;margin-bottom:0;padding-bottom:30px}.footer{padding:12px 15px;display:flex;gap:15px}.footer a{color:#888;text-decoration:underline;text-underline-offset:3px;font-size:15px}.footer a:hover{color:#000}@media(max-width:600px){.task-card{width:95%}}.ball.loaded{opacity:1}.del-btn{width:60px;height:20px;position:fixed;bottom:0;right:0;z-index:1000;border:1.5px solid black;border-right:none;border-bottom:none;background-color:#fff;overflow:hidden;display:flex;justify-content:center;align-items:center;font-size:30px;line-height:1;color:transparent;padding:0 0 5px;cursor:pointer;font-family:Segoe UI Symbol,Arial Unicode MS,Noto Sans Symbols,sans-serif;transition:height .2s cubic-bezier(.25,.8,.25,1),color .2s ease,background-color .2s ease,padding-bottom .2s ease}.del-btn:hover{height:70px;color:#fff;background-color:#000;padding-bottom:30px}.add-btn{width:60px;height:20px;position:fixed;bottom:0;right:60px;z-index:1000;border:1.5px solid black;border-right:none;border-bottom:none;background-color:#fff;overflow:hidden;display:flex;justify-content:center;align-items:center;font-size:30px;line-height:1;color:transparent;padding:0 0 5px;cursor:pointer;font-family:Segoe UI Symbol,Arial Unicode MS,Noto Sans Symbols,sans-serif;transition:height .2s cubic-bezier(.25,.8,.25,1),color .2s ease,background-color .2s ease,padding-bottom .2s ease}.add-btn:hover{height:70px;color:#fff;background-color:#000;padding-bottom:30px}.info-btn{width:60px;height:20px;position:fixed;bottom:0;left:0;z-index:1000;border:1.5px solid black;border-left:none;border-bottom:none;background-color:#fff;overflow:hidden;display:flex;justify-content:center;align-items:center;font-size:30px;line-height:1;color:transparent;padding:0 0 5px;cursor:pointer;font-family:Segoe UI Symbol,Arial Unicode MS,Noto Sans Symbols,sans-serif;transition:height .2s cubic-bezier(.25,.8,.25,1),color .2s ease,background-color .2s ease,padding-bottom .2s ease}.info-btn:hover{height:70px;color:#fff;background-color:#000;padding-bottom:30px}.info-btn:active,.del-btn:active{background-color:#333}[contenteditable=true]{outline:none;cursor:text}[contenteditable=true]:focus{background-color:#0000000d}#modalSubject{display:inline-block;min-width:100px;min-height:1em}#modalTitle{min-height:1.2em}#modalDescription{display:block;min-height:100px;width:100%}.footer-new-task{display:flex;width:100%;box-sizing:border-box;flex-wrap:wrap}.color-label{background-color:#000;color:#fff;padding:12px 15px;font-size:18px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;min-width:80px}.color-options{flex-grow:1;display:flex;align-items:center;justify-content:flex-start;gap:20px;padding:12px 15px;background-color:#fff}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;-webkit-user-select:none;user-select:none}.radio-label:hover{opacity:.7}.custom-checkbox{appearance:none;background-color:#fff;margin:0;font:inherit;color:currentColor;width:18px;height:18px;border:1.5px solid black;display:grid;place-content:center;cursor:pointer;border-radius:0}.custom-checkbox:before{content:"";width:10px;height:10px;transform:scale(0);transform-origin:center;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);background-color:#000;box-shadow:inset 1em 1em #000}.custom-checkbox:checked:before{transform:scale(1)}::-webkit-calendar-picker-indicator{cursor:pointer}.send-btn{background-color:#000;color:#fff;border:none;border-left:1.5px solid black;padding:0 25px;font-size:18px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:background-color .2s}.send-btn:hover,.send-btn:active{background-color:#333}#infoCardMobile{display:none}#mobile-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;display:none;pointer-events:auto}@media(max-width:768px){.task-bar,.dashboard,.add-btn,.del-btn,.info-btn{display:none!important}#modalOverlay{display:flex!important;background-color:transparent!important;z-index:100;pointer-events:none}#taskCard,#infoCard{display:none!important}#infoCardMobile{display:block!important;width:90%;max-width:400px;pointer-events:auto;z-index:101}#mobile-canvas{display:block}}@media(max-width:500px){.footer-new-task{flex-direction:column}.color-label,.send-btn{width:100%;text-align:center;padding:10px}.color-options{justify-content:center;border-top:1.5px solid black;border-bottom:1.5px solid black}}.date-input{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;padding:5px;border:1.5px solid black;background-color:#fff;width:100%;box-sizing:border-box;outline:none;accent-color:black}
