.birthday-timeline{width:100%;min-width:0;height:100%;min-height:0;position:relative}.timeline-scroll{overscroll-behavior-x:contain;scrollbar-gutter:stable;touch-action:pan-x pan-y;width:100%;height:100%;min-height:0;overflow:auto hidden}.timeline-scroll:focus-visible{outline-offset:-3px;outline:3px solid #2463eb}.timeline-canvas{grid-template-rows:minmax(0,1fr) 30px minmax(0,1fr);width:100%;min-width:992px;height:100%;min-height:360px;display:grid}.timeline-half,.timeline-spine{text-align:center;grid-template-columns:repeat(31,minmax(0,1fr));min-height:0;display:grid}.timeline-day-column{scrollbar-width:none;align-items:stretch;min-width:0;min-height:0;display:flex;overflow-y:auto}.timeline-day-column::-webkit-scrollbar{display:none}.timeline-half--top .timeline-day-column{flex-direction:column-reverse;justify-content:flex-start}.timeline-half--bottom .timeline-day-column{flex-direction:column;justify-content:flex-start}.birthday-marker{appearance:none;color:#000;cursor:pointer;background-color:#fff;border:0;flex:0 0 26px;width:100%;min-height:26px;padding:0;font-size:18px;font-weight:700;line-height:1}.birthday-marker:hover,.birthday-marker:focus-visible{color:#fff;outline-offset:-2px;background-color:#000;outline:2px solid #2463eb}.demo-birthday-marker{flex:0 0 22px;justify-content:center;align-items:center;min-height:22px;line-height:1;display:flex}.timeline-spine{color:#fff;z-index:2;background-color:#000;align-items:center;font-size:14px;font-weight:700;position:relative}.timeline-spine>span{justify-content:center;align-items:center;height:100%;display:flex}.birthday-detail{pointer-events:none;text-align:center;text-overflow:ellipsis;white-space:nowrap;z-index:4;background-color:#fffffff0;border:1px solid #0000;max-width:calc(100% - 8rem);padding:.25rem .6rem;font-size:clamp(.8rem,1.8vw,1.6rem);font-weight:700;position:absolute;top:.5rem;left:50%;overflow:hidden;transform:translate(-50%)}.birthday-detail--active{border-color:#000}@media (width<=768px){.timeline-canvas{min-height:420px}.birthday-detail{max-width:calc(100% - 2rem);font-size:.8rem}}#main-header{background-color:#fff;min-width:0;height:100%;min-height:360px;position:relative;overflow:hidden}.birthday-visual-mode{height:100%;min-height:0}.birthday-text-mode,.mobile-home-summary{display:none}.timeline-status{z-index:5;background-color:#fffffff5;border:1px solid #000;padding:.35rem .6rem;position:absolute;top:.75rem;left:.75rem}.timeline-status--error{color:#b00020;border-color:#b00020}@media (width<=62rem){#main-header,.birthday-timeline{height:auto;min-height:0;overflow:visible}.birthday-visual-mode{display:none}.birthday-text-mode,.mobile-home-summary{padding-left:max(1rem, env(safe-area-inset-left,0px));padding-right:max(1rem, env(safe-area-inset-right,0px));display:block}.birthday-text-mode{padding-top:1rem;padding-bottom:1rem}.mobile-home-summary{padding-bottom:max(2rem, env(safe-area-inset-bottom,0px));padding-top:2rem}.mobile-home-summary h1{margin-bottom:.75rem;font-size:clamp(1.5rem,8vw,2.25rem);line-height:1.1}.mobile-home-summary p{color:#4b5563;max-width:36rem;line-height:1.5}.timeline-status{margin-bottom:0;margin-left:max(1rem, env(safe-area-inset-left,0px));margin-right:max(1rem, env(safe-area-inset-right,0px));margin-top:1rem;position:static}}.birthday-text-mode{display:none}.birthday-list-region{width:100%;min-width:0}.birthday-list__heading-row{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.35rem .75rem;display:flex}.birthday-list__heading-row h2{font-size:clamp(1.2rem,5vw,1.6rem)}.birthday-list__count{color:#4b5563;font-size:.9rem}.birthday-list,.birthday-list__item{list-style:none}.birthday-list{gap:.6rem;margin-top:1rem;display:grid}.birthday-list__row{color:#111827;overflow-wrap:anywhere;text-align:left;background:#fff;border:1px solid #a7a7a7;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.4rem .75rem;width:100%;min-height:44px;padding:.8rem;display:grid}.birthday-list__button{appearance:none;cursor:pointer}.birthday-list__button:hover{background:#f3f4f6;border-color:#111827}.birthday-list__button:focus-visible{outline-offset:2px}.birthday-list__name{min-width:0;font-size:1.05rem;font-weight:700}.birthday-list__edit{color:#1d4ed8;font-weight:700;text-decoration:underline}.birthday-list__meta{color:#374151;flex-wrap:wrap;grid-column:1/-1;gap:.45rem 1rem;display:flex}.birthday-list__date,.birthday-list__age,.birthday-list__zodiac{flex-wrap:wrap;gap:.3rem;min-width:0;display:inline-flex}.birthday-list__label{font-weight:700}.birthday-list__empty{background:#f9fafb;border:1px dashed #9ca3af;margin-top:1rem;padding:1rem}@media (width<=62rem){.birthday-text-mode{padding:1rem max(1rem, env(safe-area-inset-right,0px)) 1rem max(1rem, env(safe-area-inset-left,0px));display:block}}@media (width<=32.5rem){.birthday-list__meta{gap:.35rem;display:grid}}#month-buttons{overscroll-behavior-x:contain;scrollbar-gutter:stable;scroll-snap-type:x proximity;text-align:center;touch-action:pan-x;align-items:center;gap:2px;width:100%;padding:8px;display:flex;overflow-x:auto}#month-buttons>.month-button{color:#fff;cursor:pointer;scroll-snap-align:start;background-color:#000;border:3px solid gray;flex:1 0 84px;min-height:48px;padding:8px 6px;font-size:14px}#month-buttons>.month-selected{color:#000;background-color:#fff;border-color:#000;border-radius:10px;font-weight:700}#month-buttons>.month-button:focus-visible{outline-offset:-5px}.login-button,.logout-button{color:#fff;cursor:pointer;background-color:#000;border:1px solid #000;border-radius:.25rem;width:auto;min-width:96px;min-height:44px;padding:.4rem .75rem}.login-button:hover,.logout-button:hover{background-color:#333}#addbirth-container{justify-content:center;align-items:center;width:100%;min-width:0;display:flex}#addbirth-container #form{grid-template-columns:minmax(120px,1fr) minmax(140px,auto) auto;align-items:center;gap:.4rem;width:100%;display:grid}.addname-input,.adddate-input{width:100%;min-width:0;height:44px;margin:0;padding:.4rem}.addbirth-button{color:#fff;cursor:pointer;background-color:#000;width:auto;min-width:120px;height:44px;padding:.35rem .6rem}.addbirth-button:disabled{cursor:wait;opacity:.65}#addbirth-container [role=alert]{grid-column:1/-1}@media (width<=32.5rem){#addbirth-container #form{grid-template-columns:minmax(0,1fr)}.addname-input{grid-column:auto}.addbirth-button{width:100%;min-width:0}}#editbirth-container{background-color:#e8e8e8;border-top:5px solid #000;border-right:5px solid #000;border-radius:0 80px 0 0;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.4rem;width:100%;min-width:0;padding:.3rem;display:grid}#editbirth-container #form{grid-template-columns:minmax(120px,1fr) minmax(140px,auto) auto auto;align-items:center;gap:.35rem;min-width:0;display:grid}.editname-input,.editdate-input{width:100%;min-width:0;height:44px;margin:0;padding:.4rem}.editbirth-button,.deletebirth-button,.back-button{color:#fff;cursor:pointer;width:auto;min-width:72px;height:44px;padding:.35rem .5rem}.editbirth-button,.back-button{background-color:#000}.deletebirth-button{background-color:#c90000}.editbirth-button:disabled,.deletebirth-button:disabled,.back-button:disabled{cursor:wait;opacity:.65}#editbirth-container [role=alert]{grid-column:1/-1}@media (width<=48rem){#editbirth-container{border-radius:0 40px 0 0;grid-template-columns:1fr}#editbirth-container #form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.back-button{width:100%}.editname-input{grid-column:1/-1}}@media (width<=32.5rem){#editbirth-container #form{grid-template-columns:minmax(0,1fr)}.editname-input{grid-column:auto}.editbirth-button,.deletebirth-button{width:100%}}#nav-container{background-color:#fff;border-top:1px solid #d0d0d0;grid-template-columns:minmax(0,2fr) minmax(120px,.75fr) minmax(160px,.75fr);align-items:center;gap:.5rem;min-height:64px;padding:.4rem .75rem;display:grid}#nav-container>*{min-width:0}.authorization{justify-content:center;align-items:center;display:flex}.authorization .login-button,.authorization .logout-button{min-width:96px;min-height:44px}#nav-container .navbar-nav{flex-flow:wrap;justify-content:flex-end;align-items:center;gap:.25rem;display:flex}#nav-container .nav-link{white-space:nowrap;padding:.5rem .6rem}@media (width<=48rem){#nav-container{padding-bottom:max(.6rem, env(safe-area-inset-bottom,0px));padding-left:max(.6rem, env(safe-area-inset-left,0px));padding-right:max(.6rem, env(safe-area-inset-right,0px));grid-template-columns:auto minmax(0,1fr);grid-template-areas:"crud crud""auth primary";padding-top:.4rem}#nav-container>:first-child{grid-area:crud}#nav-container>.authorization{grid-area:auth;justify-content:flex-start}#nav-container>nav:last-child{grid-area:primary}#nav-container .navbar-nav{justify-content:flex-end}#nav-container .nav-link{padding:.5rem .35rem;font-size:.9rem}}.year-view{min-width:0;max-width:64rem;padding:clamp(1rem,3vw,2rem);padding-left:max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left,0px));padding-right:max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right,0px));width:100%;margin:0 auto}.year-view__title{margin-bottom:1.5rem;font-size:clamp(1.5rem,4vw,2.25rem);line-height:1.2}.year-view__month{border-top:1px solid #b8b8b8;padding:1.25rem 0}.year-view__month:last-child{border-bottom:1px solid #b8b8b8}.year-view__month-title{flex-wrap:wrap;align-items:baseline;gap:.35rem .75rem;margin-bottom:.75rem;font-size:1.25rem;line-height:1.3;display:flex}.year-view__count{color:#4b5563;font-size:.875rem;font-weight:400}.year-view__status,.year-view__empty{padding:1rem 0;line-height:1.5}.year-view__status--error{color:#b00020}@media (width<=32.5rem){.year-view{padding-bottom:max(1rem, env(safe-area-inset-bottom,0px))}.year-view__title{margin-bottom:1rem}.year-view__month{padding:1rem 0}}.profile{place-self:start center;align-items:center;gap:1.25rem;width:100%;max-width:720px;margin:2rem auto;padding:1rem;display:flex}.profile-picture{object-fit:cover;border-radius:50%;width:96px;height:96px}.profile p{color:#4b5563;overflow-wrap:anywhere;margin-top:.35rem}@media (width<=480px){.profile{text-align:center;flex-direction:column}}*,:before,:after{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}html,body,#root{width:100%;min-height:100%}body{background-color:#fff;overflow-x:hidden}button,input{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #2463eb}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.form-error{color:#b00020;margin-left:.5rem}#app-container{grid-template-rows:auto minmax(0,1fr) auto;width:100%;min-height:100svh;display:grid}#app-container>*{min-width:0}.spinner{background-color:#fff;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;width:100vw;min-height:100svh;display:flex;position:fixed;inset:0}.spinner:before{content:"";border:4px solid #d1d5db;border-top-color:#2463eb;border-radius:50%;width:2.5rem;height:2.5rem;animation:.8s linear infinite loading-spin}@keyframes loading-spin{to{transform:rotate(360deg)}}@media (width<=62rem){#app-container{grid-template-rows:auto auto auto}}@media (prefers-reduced-motion:reduce){.spinner:before{animation:none}}.userImg{border-radius:100px;width:100px;height:100px;margin:0 auto;display:block}