body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;background-color:#f0f0f5}#root{width:100%;display:flex;justify-content:center}.header{background-color:#f8f8f8;border-bottom:1px solid #dee2e6;padding:10px 0;text-align:center;position:fixed;top:0;width:100%;z-index:4;display:flex;justify-content:center;align-items:center;box-shadow:0 2px 4px #0000001a}.header .title{font-size:1em;font-weight:700;flex-grow:1;text-align:center;cursor:pointer}.header .title:after{position:absolute;content:"";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.5rem;top:1rem;padding-left:5px}.top-right-align{position:absolute;right:15px;z-index:5}.container{width:100%;max-width:1200px;margin-top:60px}.screen{display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;animation:fadeIn .3s forwards}.main-container{background-color:transparent;box-shadow:none;padding:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.btn{width:100%;padding:10px 20px;font-size:1.2em;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s;margin:5px 0;background-color:#d7d7d7}.log-row{display:flex;width:100%;justify-content:center;align-items:center}.log-label{font-size:1.4rem;padding-right:10px;color:#555;width:50px;text-align:right;cursor:pointer}.log-button-container{flex:1}.log-btn{background-color:#007bff;color:#fff;font-size:1.2em;width:100%;text-shadow:0px 0px 3px #000cff}.log-container{max-width:600px}.area-container{display:flex;justify-content:space-between;width:100%;flex-wrap:wrap;gap:15px;padding:0 15px;box-sizing:border-box}.area-tile{background-color:#fff;border-radius:5px;box-shadow:0 4px 8px #0000001a;padding:0 15px 15px;flex:1;min-width:150px;overflow:hidden}.area-title{cursor:pointer;font-size:1rem;padding:6px;text-align:center;position:relative;margin-left:-15px;margin-right:-15px;border-radius:5px 5px 0 0;box-shadow:inset 0 1px,0 .5px #35353547;box-sizing:border-box;margin-bottom:10px}.area-title:after{position:absolute;content:"";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.5rem;top:1rem;padding-left:5px}.terraguard .area-title{background-color:#e3e3e3;color:#333}.turia .area-title{color:#c60041;background-color:#ffd1d1}.angelos .area-title{color:#882500;background-color:#ffe4cc}.fontunas .area-title{color:#40007c;background-color:#f0e5ff}.monbera .area-title{color:#7c0040;background-color:#cacaca}.abaddon .area-title{color:#5d4037;background-color:wheat}.back-btn{display:none}.confirm-btn,.back-btn{background-color:#666;color:#fff;border-radius:50%;width:35px;height:35px;line-height:.5rem;font-size:1em;position:relative;margin:0;border:none}.confirm-btn:hover:after,.back-btn:hover:after{content:attr(title);position:absolute;bottom:0;right:calc(100% + 5px);background:#666;color:#fff;padding:5px;border-radius:5px;font-size:.8em;white-space:nowrap;opacity:0;animation:tooltipFadeIn .3s forwards}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.log-textarea{width:100%;height:200px;font-size:1.2em;margin-bottom:20px}.save-btn,.copy-btn{background-color:#d7d7d7;color:#333;margin-bottom:10px}.clear-btn{background-color:#dc3545;color:#fff}.toast{visibility:hidden;min-width:250px;background-color:#555;color:#fff;text-align:center;border-radius:5px;padding:16px;position:fixed;z-index:2;left:50%;top:80%;transform:translate(-50%,-50%);font-size:1rem;opacity:0;transition:opacity .5s ease,visibility .5s ease;cursor:pointer}.toast.show{visibility:visible;opacity:1}.modal{display:flex;position:fixed;z-index:5;left:0;top:0;width:100%;height:100%;background-color:#00000080;justify-content:center;align-items:center;animation:modalFadeInBackground .3s forwards}.modal-content{background-color:#fefefe;padding:20px;border:1px solid #888;width:80%;max-width:300px;text-align:center;border-radius:10px;opacity:0;animation:modalContentFadeIn .3s forwards;position:relative}@keyframes modalFadeInBackground{0%{opacity:0}to{opacity:1}}@keyframes modalContentFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.time-input{width:100%;font-size:1.5rem;padding:10px;margin:20px 0;box-sizing:border-box;text-align:center}#modalList{list-style:none;padding:0;margin:0}#modalList li{padding:10px;background-color:#e0e0e0;margin:5px 0;border-radius:5px;cursor:pointer;color:#333;transition:background-color .3s}#modalList li:hover{background-color:#bbb}#modalList li.active{background-color:#888;color:#fff}.time-display{font-size:.8rem;text-wrap:nowrap;color:gray;text-align:center;margin-top:-5px}#timePickerOkButton{font-size:1.5rem;padding:10px 20px}.clock{position:relative;width:150px;height:150px;border:5px solid #333;border-radius:50%;margin:0 auto;background-color:#fff}.clock .hour-hand,.clock .minute-hand{position:absolute;background-color:#333;transform-origin:0 0}.clock .hour-hand{width:35%;height:2px;top:50%;left:50%}.clock .minute-hand{width:50%;height:1px;background-color:#666;top:50%;left:50%;transform:rotate(90deg)}.clock .center-point{position:absolute;width:10px;height:10px;background-color:#333;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.top-left-align{position:absolute;left:15px;z-index:5;display:flex;gap:10px}.header-btn{background-color:transparent;border:none;font-size:1.5rem;cursor:pointer;transition:transform .2s ease;color:#666}.header-btn:hover{transform:scale(1.1)}.note-wrapper{display:flex;flex-direction:column;flex:1;gap:5px}.note-controls{padding:10px 15px;display:flex;flex-direction:column;align-items:flex-start;border-radius:5px;box-shadow:0 4px 8px #0000001a;background-color:#fff;gap:5px;z-index:1}#digitalClock{font-size:1.5rem;font-weight:700;text-align:center;padding:10px;letter-spacing:.05em;flex:none;display:block;color:#fff;background:#777;text-shadow:0px 1px 3px black;border-radius:5px}.alarm-settings{padding:10px;background-color:#f9f9f9;border-radius:8px;box-shadow:0 5px 10px #0000001a;display:flex;gap:10px;justify-content:space-around}.alarm-settings label{font-size:1.1rem;display:flex;align-items:center}.alarm-settings input[type=checkbox]{width:20px;height:20px;margin-right:5px;cursor:pointer}.past-log{color:gray}.soon-log{color:#00f}.closest-log{font-weight:700}.disabled-log-btn{background-color:gray;color:#000;cursor:no-drop;text-shadow:none}.modal-close-btn{position:absolute;top:-15px;right:-15px;width:30px;height:30px;background-color:#ccc;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003;display:flex;align-items:center;justify-content:center;border:none}.modal-close-btn:before,.modal-close-btn:after{content:"";position:absolute;width:60%;height:2px;background-color:#333}.modal-close-btn:before{transform:rotate(45deg)}.modal-close-btn:after{transform:rotate(-45deg)}#noteCard{padding-top:15px}#noteCard hr{border:.5px dashed #ccc}@media(max-width:845px){.container{margin-top:35px}.area-title{font-size:1rem;margin-left:-10px;margin-right:-10px;margin-bottom:10px;padding:3px 0 4px;box-shadow:inset 0 2px 2px -2px}.area-title:after{top:.7rem}.log-btn{font-size:1rem}.log-row{margin-bottom:5px}.log-label{font-size:1.1rem;padding-right:5px}.btn{margin:0;padding:10px;font-size:1rem!important}.area-tile{min-width:135px;padding:0 10px 10px}.area-container{gap:5px;padding:0 10px}.alarm-settings{margin-top:0;width:100%}.alarm-settings label{font-size:1rem}.clock{width:100px;height:100px;margin-bottom:0}.time-input{margin:20px 0 10px;padding:5px}.header .title{font-size:.8rem}.confirm-btn,.back-btn{width:25px;height:25px;line-height:.5rem;font-size:.8em;padding:0}.header-btn{font-size:1.2rem}.header{padding:5px}.save-btn,.copy-btn,#confirmYesButton,#timePickerOkButton,#timePickerClearButton,#overwriteYesButton{margin-bottom:10px}#digitalClock{font-size:1rem;padding:8px}.note-wrapper{gap:3px}#noteCard{padding-top:5px}}@media(max-width:400px){.title{color:transparent}}.log-row-highlight{background-color:#fdd44d;transition:background-color .2s ease-in-out}.log-row-blink{animation:modest-blink .9s 3}@keyframes modest-blink{50%{background-color:#fdd44d}}