:root{font-family:Microsoft YaHei,PingFang SC,system-ui,-apple-system,sans-serif;color:#13233f;background:#f4f8fb;font-synthesis:none;--ink: #13233f;--muted: #637086;--line: #dbe5ee;--teal: #16a7a0;--teal-dark: #0f8d88;--coral: #ff6258}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% -20%,#fff 0,#f5f9fc 48%,#eef4f8)}button,select{font:inherit}button{-webkit-tap-highlight-color:transparent}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.page-shell{min-height:100vh;padding:clamp(18px,3.2vw,48px);display:grid;align-content:center}.calculator{width:min(1440px,100%);margin:auto;padding:clamp(28px,4vw,58px) clamp(22px,5vw,76px) 42px;background:#fffffffa;border:1px solid rgba(218,229,238,.8);border-radius:28px;box-shadow:0 20px 60px #1f3d5b1a,0 3px 12px #1f3d5b0a}.hero{display:flex;justify-content:center;align-items:center;gap:28px;margin-bottom:36px}.hero h1{margin:0;font-size:clamp(38px,4.2vw,58px);line-height:1.1;letter-spacing:.08em;font-weight:800}.hero p{margin:12px 0 0;color:var(--muted);font-size:clamp(15px,1.5vw,19px);letter-spacing:.04em}.brand-mark{position:relative;width:112px;height:84px;flex:0 0 auto}.brand-mark:before{content:"";position:absolute;left:19px;top:20px;width:67px;height:53px;border:2px solid #9eb3c7;border-radius:8px;background:#fff;box-shadow:0 9px 18px #476d891f;transform:rotate(-2deg)}.brand-mark:after{content:"";position:absolute;left:18px;top:25px;width:71px;height:11px;border-radius:5px 5px 0 0;background:var(--teal);transform:rotate(-2deg)}.sun{position:absolute;z-index:3;right:10px;top:5px;width:29px;height:29px;border-radius:50%;background:#ffc94f;box-shadow:0 0 0 6px #ffc94f21}.ring{position:absolute;z-index:4;top:12px;width:5px;height:17px;border:2px solid #7893a7;border-radius:8px;background:#fff}.ring-one{left:35px}.ring-two{left:67px}.calendar-leaf{position:absolute;z-index:3;left:4px;bottom:4px;width:24px;height:13px;border-radius:100% 0;background:#71c8a0;transform:rotate(26deg)}.calendar-dots{position:absolute;z-index:3;left:35px;top:43px;display:grid;grid-template-columns:repeat(3,7px);gap:8px 9px}.calendar-dots i{width:7px;height:7px;border-radius:50%;background:#d1dbe4}.birthday-form{position:relative;border:1px solid #cfdce7;border-radius:18px;padding:16px 30px 25px}.form-toolbar{margin:0 auto 24px;display:flex;align-items:center;justify-content:center;gap:14px}.mode-tabs{width:min(460px,100%);display:grid;grid-template-columns:1fr 1fr;border:1px solid #cfdce7;border-radius:12px;overflow:hidden;background:#fff}.mode-tab{min-height:52px;border:0;color:var(--ink);background:transparent;font-size:18px;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease}.mode-tab+.mode-tab{border-left:1px solid #dbe4eb}.mode-tab.is-active{color:#fff;background:linear-gradient(135deg,#16aaa3,#119992);box-shadow:inset 0 -2px #00000014}.mode-tab:focus-visible,select:focus-visible,.calculate-button:focus-visible,.import-button:focus-within,.person-button:focus-visible,.imported-heading button:focus-visible{outline:3px solid rgba(22,167,160,.28);outline-offset:3px}.import-button{min-height:52px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;border:1px solid #b7cad8;border-radius:11px;color:#246073;background:#f7fbfd;font-size:15px;font-weight:700;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}.import-button:hover{border-color:#79a8b9;background:#eef8fa;transform:translateY(-1px)}.import-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.form-row{display:grid;grid-template-columns:135px 1fr 180px;align-items:end;gap:26px}.form-title{align-self:center}.form-title span{display:block;font-size:18px;font-weight:700}.form-title small{display:block;margin-top:6px;color:#8793a4;font-size:12px}.date-fields{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:18px}.date-fields label{display:grid;gap:8px;color:#36445a;font-size:14px}.date-fields select{width:100%;min-height:52px;padding:0 42px 0 18px;color:var(--ink);font-size:17px;border:1px solid #cfd9e3;border-radius:10px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6c7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border .2s ease,box-shadow .2s ease}.date-fields select:hover{border-color:#8fafc1}.calculate-button{min-height:54px;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,#17aaa3,#0e918b);box-shadow:0 9px 18px #0e918b38;font-size:18px;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.calculate-button:hover{transform:translateY(-2px);box-shadow:0 12px 22px #0e918b45}.calculate-button:active{transform:translateY(0)}.calculate-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}.calculate-button:hover svg{transform:translate(3px)}.form-error{position:absolute;left:30px;bottom:4px;margin:0;color:#d8423b;font-size:12px}.imported-people{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.imported-heading{margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:13px}.imported-heading button{padding:4px 2px;border:0;color:#60768a;background:transparent;font-size:13px;cursor:pointer}.imported-heading button:hover{color:#d8423b}.people-list{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 5px;scrollbar-width:thin}.person-button{min-width:142px;padding:11px 14px;display:grid;gap:4px;text-align:left;border:1px solid #d5e0e8;border-radius:10px;color:var(--ink);background:#fff;cursor:pointer;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.person-button:hover{border-color:#79aaa9;background:#f7fcfc}.person-button.is-active{border-color:var(--teal);background:#effbfa;box-shadow:0 0 0 2px #16a7a01a}.person-button strong{overflow:hidden;text-overflow:ellipsis;font-size:15px;white-space:nowrap}.person-button span{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.results{padding-top:34px}.section-heading{display:grid;grid-template-columns:minmax(40px,190px) auto minmax(40px,190px);align-items:center;justify-content:center;gap:24px}.section-heading span{height:1px;background:linear-gradient(90deg,transparent,#cfdce7)}.section-heading span:last-child{background:linear-gradient(90deg,#cfdce7,transparent)}.section-heading h2{margin:0;font-size:27px;letter-spacing:.08em}.age-summary{margin:18px auto 22px;display:flex;align-items:center;justify-content:center;gap:clamp(42px,7vw,90px)}.age-item{min-width:150px;display:flex;align-items:baseline;justify-content:center;gap:12px}.age-item strong{font-size:clamp(52px,6vw,72px);line-height:1;font-weight:500;font-variant-numeric:tabular-nums}.age-item span{font-size:17px;color:var(--ink)}.age-primary strong{color:var(--teal)}.age-secondary strong{color:var(--coral)}.age-divider{width:1px;height:52px;background:var(--line)}.profile-grid{margin:0;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:13px;overflow:hidden}.profile-grid>div{min-height:66px;display:grid;grid-template-columns:minmax(138px,.8fr) 1.2fr;align-items:center}.profile-grid>div:nth-child(odd){border-right:1px solid var(--line)}.profile-grid>div:nth-child(n+3){border-top:1px solid var(--line)}.profile-grid dt,.profile-grid dd{margin:0;height:100%;display:flex;align-items:center}.profile-grid dt{gap:15px;padding:0 24px;border-right:1px solid var(--line);font-size:16px;font-weight:600;color:#344258}.profile-grid dt svg{width:23px;height:23px;color:#0f7190;flex:0 0 auto}.profile-grid dd{padding:0 28px;font-size:16px;color:#192943;font-variant-numeric:tabular-nums}.profile-grid .birthday-countdowns{min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding-top:10px;padding-bottom:10px}.birthday-countdowns span{white-space:nowrap}.life-progress{padding:22px 22px 0}.progress-heading{margin-bottom:14px;display:flex;align-items:baseline;justify-content:space-between}.progress-heading h3{margin:0;font-size:21px}.progress-heading span{color:var(--muted);font-size:13px}.progress-track{height:44px;overflow:hidden;border-radius:999px;background:#e5eaf0;box-shadow:inset 0 1px 2px #1e32460f}.progress-value{--progress: 25%;width:var(--progress);min-width:70px;height:100%;display:grid;place-items:center;border-radius:inherit;color:#fff;background:linear-gradient(90deg,#15aaa2,#1bb59f);box-shadow:6px 0 16px #14a79c2e;transition:width .8s cubic-bezier(.2,.8,.2,1)}.progress-value span{font-weight:700;font-size:16px}.results.is-revealing .age-item,.results.is-revealing .profile-grid,.results.is-revealing .life-progress{animation:reveal .5s both}.results.is-revealing .profile-grid{animation-delay:.06s}.results.is-revealing .life-progress{animation-delay:.12s}@keyframes reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 900px){.page-shell{padding:20px;align-content:start}.calculator{padding:34px 30px}.form-row{grid-template-columns:1fr;gap:18px}.form-title{display:flex;align-items:baseline;justify-content:space-between}.form-title small{margin:0}.calculate-button{width:100%}.profile-grid{grid-template-columns:1fr}.profile-grid>div:nth-child(odd){border-right:0}.profile-grid>div:nth-child(n+2){border-top:1px solid var(--line)}}@media (max-width: 600px){.page-shell{padding:0;background:#fff}.calculator{min-height:100vh;padding:28px 18px 30px;border:0;border-radius:0;box-shadow:none}.hero{justify-content:flex-start;gap:16px;margin-bottom:28px}.brand-mark{width:74px;height:62px;transform:scale(.72);transform-origin:left center;margin-right:-17px}.hero h1{font-size:31px;letter-spacing:.06em}.hero p{margin-top:7px;font-size:13px}.birthday-form{padding:12px 14px 20px;border-radius:15px}.form-toolbar{margin-bottom:18px;align-items:stretch}.mode-tabs{min-width:0}.mode-tab{min-height:46px;font-size:16px}.import-button{min-height:46px;padding:0 13px}.import-button span{display:none}.import-button svg{width:21px;height:21px}.date-fields{grid-template-columns:1fr 1fr;gap:12px}.date-fields label:first-child{grid-column:1 / -1}.date-fields select{min-height:48px}.form-error{left:14px}.results{padding-top:30px;scroll-margin-top:10px}.section-heading{gap:12px}.section-heading h2{font-size:22px;white-space:nowrap}.age-summary{gap:18px}.age-item{min-width:115px;gap:8px}.age-item strong{font-size:48px}.profile-grid>div{grid-template-columns:118px 1fr;min-height:62px}.profile-grid dt{gap:10px;padding:0 14px;font-size:14px}.profile-grid dt svg{width:20px;height:20px}.profile-grid dd{padding:0 16px;font-size:14px}.life-progress{padding:22px 2px 0}.progress-track{height:40px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}