:root{--text-color: #ffffff;--background-color: hwb(0 0% 100%);--box-bg: #1a1a1a;--button-bg: #1a1a1a;--calendar-border: #646cff;--calendar-selected: #535bf2;--event-dot: #646cff}[data-theme=light]{--text-color: #ffffff;--background-color: hsl(0, 0%, 100%);--box-bg: #000000;--button-bg: #242424;--calendar-border: #646cff;--calendar-selected: #535bf2;--event-dot: #646cff}body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:var(--background-color);color:var(--text-color);font-family:system-ui,Avenir,Helvetica,Arial,sans-serif}.center-box{width:500px;background-color:var(--box-bg);border-radius:12px;padding:25px;box-shadow:0 6px 15px #0003;display:flex;flex-direction:column;align-items:center}nav{display:flex;gap:10px;margin-bottom:25px}nav button{padding:8px 14px;border:none;border-radius:6px;background-color:var(--button-bg);color:var(--text-color);cursor:pointer;font-weight:700}nav button:hover{border:1px solid #646cff}.calendar-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:10px}.calendar-header button{padding:6px 16px;border:none;border-radius:6px;background-color:var(--button-bg);color:var(--text-color);cursor:pointer;font-weight:700}.calendar-header span{font-size:1.1em;font-weight:700;color:var(--text-color);flex-grow:1;text-align:center}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day-header{text-align:center;font-weight:700;color:var(--text-color)}.calendar-cell{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid var(--calendar-border);cursor:pointer;padding:5px;border-radius:6px;color:var(--text-color)}.calendar-cell span{font-weight:500}.calendar-cell.selected{background-color:var(--calendar-selected);color:#fff}.event-dot{width:6px;height:6px;border-radius:50%;background-color:var(--event-dot);margin-top:3px}.event-input{margin-top:18px;width:100%;text-align:center}input[type=text]{padding:7px;width:70%;margin-right:6px;border-radius:6px;border:1px solid #ccc;background-color:var(--box-bg);color:var(--text-color);font-size:14px}button.add-btn{padding:7px 12px;border:none;border-radius:6px;background-color:#28a745;color:#fff;cursor:pointer;font-weight:700}button.add-btn:hover{background-color:#1e7e34}.notepad-page textarea{width:100%;height:320px;padding:12px;font-size:16px;border-radius:6px;border:1px solid #ccc;resize:vertical;background-color:var(--box-bg);color:var(--text-color)}body{margin:0;display:flex;justify-content:center;align-items:center;min-width:320px;min-height:100vh;background-color:var(--background-color, hsl(0, 0%, 100%));color:var(--text-color, rgba(255,255,255,.87))}.center-box{width:450px;background-color:#1a1a1a;border-radius:10px;padding:20px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 12px #0000004d}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-cell{aspect-ratio:1/1;border:1px solid #646cff;display:flex;justify-content:center;align-items:center;cursor:pointer}.calendar-cell.selected{background-color:#535bf2;color:#fff}.event-dot{width:6px;height:6px;border-radius:50%;background-color:#646cff}