:root{--bg-color: #1e1e1e;--box-bg: #2a2a2a;--text-color: #e0e0e0;--accent-color: #ff6b6b;--highlight-color: #4ecdc4;--grid-gap: 10px}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);font-family:Inter,sans-serif;overflow:hidden}#app{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;position:relative}#calendar-background-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none;background:radial-gradient(circle at center,#2a2a2a,#1e1e1e)}#calendar{width:90vw;max-width:1000px;aspect-ratio:1.4 / 1;max-height:80vh;position:relative;z-index:1}#calendar-dates{position:absolute;top:50%;left:50%;width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:var(--grid-gap);transform:translate(-50%,-50%);transition:transform .8s cubic-bezier(.25,1,.5,1);will-change:transform}.date-wrapper{background-color:var(--box-bg);border:1px solid rgba(255,255,255,.05);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;position:relative;padding:8px;outline:none;overflow:hidden;-webkit-user-select:none;user-select:none;transition:background .2s}.date-wrapper:hover{background-color:#333;border-color:#fff3}.date{display:flex;flex-direction:column;height:100%;width:100%}.date-day{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}.date-day-of-month{font-size:clamp(1rem,2vw,1.5rem);margin:0;font-weight:700}.date-day-of-week{font-size:clamp(.6rem,1vw,.8rem);text-transform:uppercase;letter-spacing:1px;opacity:.6;margin:0}.date-events{margin-top:auto;display:flex;flex-direction:column;gap:4px;width:100%;overflow:hidden}.date-title{display:flex;align-items:center;gap:5px;opacity:.9}.date-title h2{font-size:.7rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}.date-title-dot{width:5px;height:5px;background-color:var(--highlight-color);border-radius:50%;flex-shrink:0}.active-day-indicator{position:absolute;top:8px;right:8px;width:6px;height:6px;background-color:var(--accent-color);border-radius:50%;box-shadow:0 0 8px var(--accent-color)}.active-day{border-color:var(--accent-color);background-color:#ff6b6b1a}.sidebar-wrapper{position:fixed;top:0;right:0;height:100vh;width:400px;max-width:90vw;background:#1e1e1ef2;border-left:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;padding:40px;transform:translate(100%);transition:transform .6s cubic-bezier(.25,1,.5,1);box-shadow:-10px 0 30px #00000080}.sidebar-wrapper.open{transform:translate(0)}.sidebar-header{margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:20px}.sidebar-date{font-size:3rem;font-weight:800;margin:0;color:var(--accent-color);line-height:1}.sidebar-day{font-size:1.2rem;text-transform:uppercase;letter-spacing:2px;opacity:.7;margin-top:10px}.event-item{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px;background:#ffffff0d;padding:15px;border-radius:8px}.event-dot{width:10px;height:10px;background-color:var(--highlight-color);border-radius:50%;margin-top:6px;flex-shrink:0}.event-time{font-size:.85rem;opacity:.6;margin-top:4px;font-family:monospace}.close-btn{position:absolute;top:20px;right:20px;background:none;border:1px solid rgba(255,255,255,.2);color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .2s}.close-btn:hover{background:#fff;color:#000}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}