:root{--color-primary:#1da1f2;--color-primary-light:#e8f5fd;--color-text-dark:#333;--color-text-light:#999;--color-text-muted:#e0e0e0;--color-bg-main:#f4f6f8;--color-calendar-bg:#fff;--color-border:#e6e6e6;--box-shadow:0 10px 40px #00000014;--border-radius-calendar:8px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg-main);color:var(--color-text-dark);justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:Inter,Roboto,Segoe UI,Arial,sans-serif;display:flex}.calendar-container{justify-content:center;width:100%;display:flex}.wall-calendar{background:var(--color-calendar-bg);width:100%;max-width:800px;box-shadow:var(--box-shadow);border-radius:4px;flex-direction:column;display:flex;position:relative;overflow:hidden}@keyframes flipDown{0%{opacity:1;transform-origin:top;transform:perspective(1000px)rotateX(0)}50%{opacity:0;transform-origin:top;transform:perspective(1000px)rotateX(-90deg)}51%{opacity:0;transform-origin:top;transform:perspective(1000px)rotateX(90deg)}to{opacity:1;transform-origin:top;transform:perspective(1000px)rotateX(0)}}.wall-calendar.is-animating{animation:.6s ease-in-out forwards flipDown}*{transition:background-color .3s,border-color .3s}.hero-section{transition:background .3s}.spiral-binding-container{z-index:10;background-color:#f7f7f7;border-bottom:1px solid #eaeaea;justify-content:center;width:100%;height:40px;display:flex;position:relative}.spiral-hanger{border:4px solid #444;border-bottom:none;border-radius:10px 10px 0 0;width:50px;height:30px;position:absolute;top:-20px;left:50%;transform:translate(-50%)}.spiral-rings{justify-content:space-evenly;align-items:center;width:90%;height:100%;display:flex}.spiral-ring{flex-direction:column;align-items:center;width:10px;height:30px;display:flex;position:relative}.spiral-hole{background-color:#333;border-radius:50%;width:10px;height:10px;position:absolute;top:5px}.spiral-coil{background-color:#aaa;border-radius:4px;width:6px;height:26px;position:absolute;top:8px;box-shadow:1px 1px 2px #0000004d}.spiral-hole-bottom{background-color:#ddd;border-radius:50%;width:10px;height:10px;position:absolute;bottom:-4px}.hero-section{flex-direction:column;width:100%;display:flex;position:relative}.hero-image-wrapper{background-color:var(--color-primary);width:100%;height:400px;position:relative;overflow:hidden}.hero-img{object-fit:cover;clip-path:polygon(0 0,100% 0,100% 80%,75% 100%,30% 75%,0 95%);width:100%;height:100%}.hero-shape-overlay{display:none}.hero-month-banner{background-color:var(--color-primary);clip-path:polygon(0 0,100% 0,100% 100%,75% 100%,30% 75%,0 95%);z-index:-1;justify-content:flex-end;align-items:center;width:100%;height:120px;margin-top:-100px;padding-bottom:20px;padding-right:40px;display:flex;position:relative}.hero-month-text{flex-direction:column;align-items:flex-end;gap:5px;display:flex}.hero-year{letter-spacing:2px;font-size:2.2rem;font-weight:300;line-height:1}.hero-month{letter-spacing:-1px;font-size:2.5rem;font-weight:700;line-height:.9}.hero-section{background:var(--color-primary);clip-path:polygon(0 0,100% 0,100% 85%,65% 100%,40% 90%,0 100%);padding-bottom:20px}.hero-image-wrapper{clip-path:polygon(0 0,100% 0,100% 65%,65% 85%,35% 65%,0 80%);height:380px;margin-top:-20px}.calendar-bottom-half{background-color:var(--color-calendar-bg);gap:40px;padding:40px;display:flex}@media (width<=768px){.calendar-bottom-half{flex-direction:column-reverse;gap:30px;padding:20px}}.notes-section{flex-direction:column;flex:1;min-width:200px;padding-top:10px;display:flex}.notes-title{color:#555;margin-bottom:20px;font-size:1.1rem;font-weight:600}.notes-lines-container{flex-direction:column;gap:20px;display:flex}.note-line-wrapper{border-bottom:1.5px solid #dedede;width:100%}.note-line-input{width:100%;color:var(--color-text-dark);background:0 0;border:none;outline:none;padding:4px 0;font-family:inherit;font-size:.95rem}.reset-btn{color:#d32f2f;cursor:pointer;background:#ff00000d;border:1px solid #d32f2f33;border-radius:4px;align-self:flex-start;margin-top:30px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .2s}.reset-btn:hover{background:#ff00001a;border-color:#d32f2f80}.calendar-grid-container{flex-direction:column;flex:2;display:flex}.calendar-header-row{text-align:center;grid-template-columns:repeat(7,1fr);margin-bottom:15px;display:grid}.day-name{color:#555;font-size:.85rem;font-weight:700}.day-name.weekend{color:var(--color-primary)}.calendar-dates-grid{grid-template-columns:repeat(7,1fr);gap:8px 0;display:grid}.day-cell{aspect-ratio:1;cursor:pointer;color:#333;z-index:1;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex;position:relative}.day-cell:hover{background-color:var(--color-primary-light);border-radius:50%}.day-cell.padding-day{color:#e0e0e0;font-weight:400}.day-number{z-index:2;position:relative}.day-number.weekend-num{color:var(--color-primary)}.padding-day .day-number.weekend-num{color:#b3dffc}.day-cell.selected-start,.day-cell.selected-end,.day-cell.selected-between{background-color:var(--color-primary-light)}.day-cell.selected-start:after,.day-cell.selected-end:after{content:"";background-color:var(--color-primary);z-index:-1;border-radius:50%;width:40px;height:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.day-cell.selected-start .day-number,.day-cell.selected-end .day-number{color:#fff}.day-cell.range-start{border-top-left-radius:50%;border-bottom-left-radius:50%}.day-cell.range-end{border-top-right-radius:50%;border-bottom-right-radius:50%}.day-cell.selected-between{background-color:var(--color-primary-light);color:var(--color-primary)}.day-cell.range-start:before{content:"";background-color:var(--color-primary-light);z-index:-2;width:50%;height:40px;position:absolute;top:50%;right:0;transform:translateY(-50%)}.day-cell.range-end:before{content:"";background-color:var(--color-primary-light);z-index:-2;width:50%;height:40px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.day-cell.selected-between:before{content:"";background-color:var(--color-primary-light);z-index:-2;height:40px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.holiday-dot{background-color:var(--color-primary);z-index:5;border-radius:50%;width:6px;height:6px;position:absolute;bottom:8px}.selected-start .holiday-dot,.selected-end .holiday-dot{background-color:#fff}.day-cell{animation:.3s ease-out forwards popIn}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (width<=768px){.calendar-container{padding:10px}.wall-calendar{border-radius:0}.hero-image-wrapper{height:250px}.hero-year{font-size:1.5rem}.hero-month{font-size:1.8rem}.day-cell{font-size:.9rem}.day-cell.selected-start:after,.day-cell.selected-end:after{width:34px;height:34px}.day-cell.range-start:before,.day-cell.range-end:before,.day-cell.selected-between:before{height:34px}.notes-section{padding-top:0}.calendar-bottom-half{flex-direction:column-reverse;gap:30px;padding:20px}}@media (width<=400px){.hero-image-wrapper{height:200px}.hero-year{font-size:1.2rem}.hero-month{font-size:1.5rem}.day-cell{font-size:.8rem}.day-cell.selected-start:after,.day-cell.selected-end:after{width:28px;height:28px}.day-cell.range-start:before,.day-cell.range-end:before,.day-cell.selected-between:before{height:28px}.calendar-bottom-half{gap:20px;padding:15px}}.nav-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;margin:0 10px;font-size:1.2rem;transition:all .2s;display:flex}.nav-btn:hover{background:#ffffff4d;transform:scale(1.1)}.nav-btn:active{transform:scale(.95)}@media screen and (width>=769px){html,body{min-height:100vh;overflow-x:hidden}body{align-items:center;padding:2vh 0}#root,.App,.calendar-container{justify-content:center;width:100%;display:flex}.wall-calendar{margin-top:0}}@media screen and (width>=769px) and (height<=950px){.wall-calendar{zoom:.85}}@media screen and (width>=769px) and (height<=800px){.wall-calendar{zoom:.7}}@media screen and (width>=769px) and (height<=650px){.wall-calendar{zoom:.55}}@media screen and (width>=769px) and (height<=550px){.wall-calendar{zoom:.45}}