*,::before,::after{box-sizing:border-box;border:0 solid;margin:0;padding:0}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}button,textarea{font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border-radius:0}svg{display:block;vertical-align:middle}[hidden]{display:none!important}button{appearance:button}textarea::placeholder{opacity:1}

:root{font-family:Arial,Helvetica,sans-serif;color:#edf0f2;background:#17212a;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,textarea:focus-visible{outline:2px solid #a5c8df;outline-offset:4px}.app{height:100dvh;display:flex;flex-direction:column;background:var(--daily-background,none) center center/cover no-repeat}.header{height:80px;flex-shrink:0;padding:0 6%;display:flex;align-items:center}.brand{display:flex;align-items:center;gap:11px;color:#263637;text-shadow:0 1px 12px #fff9}.brand-icon{font-size:30px}h1{font-size:18px;letter-spacing:3px;font-weight:600;margin:0}.notes-area{flex:1;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#77838c #20272c}.notes-wrap,.composer-wrap{max-width:760px;margin:auto}.notes-wrap{padding:16px 0 30px}ol{padding:0;margin:0;list-style:none}.note{display:flex;align-items:flex-start;gap:14px;background:rgb(27 32 38 / 97%);border:1px solid #46515d;border-radius:9px;padding:19px 18px;margin-bottom:11px}.number{color:#b8c0c8;font-size:13px;padding-top:2px}.note-body{flex:1;min-width:0}.note-body p{margin:0;font-size:14px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.expiry{display:block;margin-top:12px;font-size:10px;color:#acb6c0}.delete{border:0;background:transparent;color:#b8c0c8;padding:3px}.delete:hover{color:#ffb4ab}.composer{flex-shrink:0;padding:20px 24px max(20px,env(safe-area-inset-bottom))}.timer-row{display:flex;align-items:center;gap:10px;height:18px;margin-bottom:11px}.timer-label{font-size:10px;letter-spacing:1px;color:#fff;text-shadow:0 1px 4px #000}.timer-label strong{font-weight:500;letter-spacing:0;font-size:12px;margin-left:8px}.reset{background:transparent;border:0;color:#fff;text-shadow:0 1px 4px #000;font-size:10px;text-decoration:underline}.time-buttons{display:flex;gap:8px;margin-bottom:13px}.time-buttons button{font-size:10px;letter-spacing:.5px;background:#252d35;border:1px solid #53606c;border-radius:5px;color:#edf0f2;padding:10px 15px}.time-buttons button:hover{background:#394754}.composer form{position:relative;display:flex;border:1px solid #53606c;border-radius:10px;background:rgb(24 29 35 / 98%);box-shadow:0 3px 12px #0004;padding:14px 12px 12px 18px;gap:12px;align-items:flex-end}textarea{resize:none;width:100%;border:0;outline:none!important;background:transparent;color:#edf0f2;font-size:14px;line-height:1.6;min-height:54px;max-height:140px}textarea::placeholder{color:#a6b0ba}.send{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:0;border-radius:7px;background:#435d70;color:white}.send:hover{background:#56768e}.error{font-size:12px;color:#ffcbc4;background:#482b2c;border-radius:5px;padding:8px 12px;margin:10px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:820px){.notes-wrap{margin:0 24px}.header{padding:0 24px;height:75px}}@media(max-width:480px){h1{font-size:15px;letter-spacing:2px}.composer{padding:15px 16px max(15px,env(safe-area-inset-bottom))}.notes-wrap{margin:0 16px;padding-top:10px}.time-buttons{gap:6px}.time-buttons button{padding:10px 12px;font-size:9px}.note{padding:15px 13px;gap:10px}}

.current-time{font-size:14px;font-weight:500;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:5px}@media(max-width:480px){.current-time{font-size:12px;margin-left:2px}.brand{gap:9px}}

.note.urgent .note-body,.note.urgent .expiry,.note.urgent .number{color:#ff8585}

.note-time-buttons{display:flex;flex-direction:column;flex-shrink:0;gap:2px;margin-left:auto}.note-time-buttons button{background:#252d35;border:1px solid #53606c;border-radius:4px;color:#edf0f2;font-size:9px;letter-spacing:0;width:42px;height:18px;padding:0;line-height:16px}.note-time-buttons button:hover{background:#394754}

.time-buttons button{width:52px;height:34px;padding:0;font-size:11px;letter-spacing:0;border-radius:4px}

.note{padding:8px 13px;margin-bottom:8px}.note .expiry{margin-top:6px}