*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}:root{--white-color: hsla(0, 0%, 100%, 1);--light-gray-color: hsla(220, 10%, 97%, 1);--gray-color: hsla(220, 6%, 92%, 1);--dark-gray-color: hsla(220, 8%, 60%, 1);--dark-color: hsla(220, 96%, 7%, 1);--blue-accent-color: hsla(254, 90%, 54%, 1);--blue-dark-color: hsla(254, 91%, 45%, 1);--yellow-accent-color: hsla(41, 100%, 60%, 1);--orange-accent-color: hsla(15, 90%, 54%, 1);--pink-accent-color: hsla(302, 90%, 54%, 1);--wood-element-color: hsla(102, 75%, 35%, 1);--fire-element-color: hsla(10, 95%, 45%, 1);--earth-element-color: hsla(39, 60%, 20%, 1);--metal-element-color: hsla(0, 0%, 58%, 1);--water-element-color: hsla(211, 100%, 45%, 1)}body{color:var(--dark);font-family:Montserrat,sans-serif;line-height:140%;max-width:100%}.section-title{font-weight:500;line-height:120%;font-size:2rem;letter-spacing:-1px}.btn{width:100%;font-weight:600;text-align:center;padding:1.625em 1.625em 1.75em;border-radius:100px;transition:background-color .1s ease-in-out,color .1s ease-in-out}.accent-btn{color:var(--white-color);background-color:var(--blue-accent-color)}.accent-btn:hover,.accent-btn:focus{background-color:var(--blue-dark-color)}.secondary-btn{color:var(--dark-gray-color)}.disabled-btn{cursor:not-allowed;color:var(--dark-gray-color);background-color:var(--light-gray-color)}.circle-btn{cursor:pointer;background-color:var(--light-gray-color);width:62px;height:62px;border-radius:100px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;transition:background-color .1s ease-in-out}.circle-btn:hover,.circle-btn:focus{background-color:var(--gray-color)}.circle-btn-icon{width:24px;height:24px}.input-container{display:grid;position:relative}.input-flex-grow-max{flex-grow:1}.input-icon{position:absolute;top:1.125em;left:1.5em}.input-close-icon{cursor:pointer;position:absolute;top:1.125em;left:88%}.invisibile-icon{display:none}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--light-gray-color);font-weight:500;padding:1.25em 3.5em 1.375em;border-radius:100px;min-height:3.875em;width:100%}.input::-moz-placeholder{color:var(--dark-gray-color)}.input::placeholder{color:var(--dark-gray-color)}.input:hover,.input:active,.input:focus{outline:1px solid var(--blue-accent-color)}.location-input{cursor:pointer}.option-btn-container{position:relative;flex-grow:1}.option-input{position:absolute}.option-btn{cursor:pointer;display:flex;justify-content:center;width:100%;border-radius:24px;padding:1.625em 0 1.75em;background-color:var(--light-gray-color);font-weight:600;color:var(--dark-gray-color);transition:background-color .1s ease-in-out,color .1s ease-in-out}.option-btn-male:hover{background-color:var(--blue-accent-color)}.option-btn-male:focus,.option-btn-male-selected{background-color:var(--blue-accent-color);color:var(--white-color)}.option-btn-female:hover{background-color:var(--pink-accent-color)}.option-btn-female:focus,.option-btn-female-selected{background-color:var(--pink-accent-color);color:var(--white-color)}.option-info{display:flex;flex-direction:column;align-items:center;gap:.625em}.autocomplete-results-container{margin-top:1.25em;display:flex;flex-direction:column;gap:.75em;overflow:auto}.location-result-card{cursor:pointer;font-weight:500;display:flex;align-items:center;gap:1em;border-radius:100px;padding:.25em 0}.location-result-card:hover,.location-result-card:focus{background-color:var(--light-gray-color)}.location-result-second-line{color:var(--dark-gray-color)}.container{padding:0 1em;margin:0;max-width:100%}.home-page-header{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}.home-page-header-content{display:flex;flex-direction:column;justify-content:center;align-items:center}.home-page-title{text-align:center;margin-bottom:1.3125em}@media (min-width: 480px){.home-page-header{align-items:center}.home-page-header-content{max-width:460px}}.onboarding-screen{min-height:100vh;min-height:100dvh;position:relative;display:flex}.onboarding-card{width:100%;padding:1em 1em 5em;display:flex;flex-direction:column;align-items:start}.onboarding-card-step-info{width:100%}.onboarding-title{margin-top:3rem}.onboarding-step-description{color:var(--dark-gray-color);margin-top:1em}.onboarding-card-form{width:100%;margin-top:2em;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between}@media (min-width: 480px){.onboarding-screen{background-color:var(--light-gray-color);justify-content:center;align-items:center}.onboarding-card{border-radius:48px;background-color:var(--white-color);max-width:460px;padding:1.5em}.onboarding-card-form{min-height:220px}}@media (min-width: 900px){.onboarding-card{max-width:820px;flex-direction:row;gap:1em}.onboarding-card-form{margin-top:180px}}.step-indicator{margin-top:2rem;font-size:.75rem;font-weight:500;color:var(--dark-gray-color);display:flex;flex-direction:column;gap:1em}.step-dots-container{display:flex;gap:4px}.step-dot{width:24px;height:8px;background-color:var(--light-gray-color);border-radius:100px}.active-dot{background-color:var(--blue-accent-color)}.options-container{display:flex;gap:.75em}.search-screen{position:absolute;width:100%;min-height:100%;background-color:var(--white-color);top:0;left:0;padding-top:1.5em}.search-screen-visible{display:block}.search-screen-invisible{display:none}.search-section{display:flex;gap:.75em}.chart-page{padding-top:1em;min-height:100vh;min-height:100dvh}.chart-page-header{display:flex;justify-content:space-between}.chart-page-section-title{font-size:.75em;line-height:120%;font-weight:500;color:var(--dark-gray-color);text-align:center}.bazi-chart-container{margin-top:1em;display:flex;flex-direction:column}.bazi-chart{width:100%;font-weight:500;display:grid;grid-template-columns:repeat(4,1fr);margin-top:1.25em}.bazi-chart-pillar{width:100%;border:1px solid var(--gray-color);border-right:none;align-self:flex-start}.pillar-header{font-size:.625rem;font-weight:500;line-height:120%;text-align:center;color:var(--dark-gray-color);background-color:var(--light-gray-color);padding:.4em;border:1px solid var(--gray-color);border-radius:12px 12px 0 0;min-height:33px}.pillar-time{color:var(--dark-color)}.pillar-header-highlighted{background-color:var(--yellow-accent-color);color:var(--white-color);border-color:var(--yellow-accent-color)}.pillar-header-highlighted .pillar-time{color:var(--white-color)}.bazi-chart-pillar .pillar-header{border-top:none;border-left:none;border-right:none;border-radius:0}.bazi-chart-pillar:first-child{border-radius:12px 0 0 12px}.bazi-chart-pillar:first-child .pillar-header{border-radius:12px 0 0}.bazi-chart-pillar:first-child .bazi-chart-hidden-element-container:last-child{border-radius:0 0 0 12px}.bazi-chart-pillar:last-child{border-radius:0 12px 12px 0;border-right:1px solid var(--gray-color)}.bazi-chart-pillar:last-child .pillar-header{border-radius:0 12px 0 0}.bazi-chart-pillar:last-child .bazi-chart-hidden-element-container:last-child{border-radius:0 0 12px}.bazi-chart-element-container{display:flex;flex-direction:column;align-items:center;padding:8px}.bazi-chart-hevenly-stem-container{min-height:9.5em;border-bottom:1px solid var(--gray-color)}.bazi-chart-earthly-branch-container{min-height:8.4em}.bazi-chart-hidden-element-container{border-top:1px solid var(--gray-color)}.bazi-chart-hidden-element-container-with-right-border{border-right:1px solid var(--gray-color)}.bazi-chart-god-container{flex-grow:1;min-height:2em}.bazi-chart-god-name{line-height:100%;font-size:.625rem;color:var(--dark-gray-color);text-align:center;padding:.2em 0;border-radius:6px}.person-element-badge{padding:.2em .6em;border:1px solid var(--yellow-accent-color);color:var(--yellow-accent-color)}.qi-phase-circle{width:16px;height:16px;background-color:var(--light-gray-color);display:flex;justify-content:center;align-items:center;border-radius:100px}.qi-phase{font-size:.625rem;line-height:100%;color:var(--dark-gray-color);font-weight:600}.bazi-chart-element{font-family:Noto Sans TC,serif;font-size:2.625rem;line-height:120%}.bazi-chart-element-hidden{font-size:1.5rem;line-height:120%}.bazi-chart-element-chinese-name,.bazi-chart-element-hidden-chinese-name{margin-top:.2em}.bazi-chart-element-hidden-chinese-name{font-size:.625rem;line-height:120%}.bazi-chart-element-element-description{line-height:100%;font-size:.625rem;color:var(--dark-gray-color);text-align:center}.bazi-chart-god-name{margin-bottom:.8em}.luck-pillars-section{margin-top:2.625em}.luck-pillars-container{margin-top:1.25em;display:grid;grid-template-columns:repeat(5,1fr);gap:12px 6px}@media (min-width: 720px){.luck-pillars-container{grid-template-columns:repeat(10,1fr)}}.luck-pillar-element-container{display:flex;flex-direction:column;align-items:center;padding:2px 12px 6px;border:1px solid var(--gray-color);border-top:none}.luck-pillar-element-container:last-child{border-radius:0 0 12px 12px}.luck-pillar-element-container-highlighted{border-color:var(--yellow-accent-color)}.luck-pillar-element{font-family:Noto Sans TC,serif;font-weight:500;font-size:1.5rem;line-height:140%}.wood-element{color:var(--wood-element-color)}.fire-element{color:var(--fire-element-color)}.earth-element{color:var(--earth-element-color)}.metal-element{color:var(--metal-element-color)}.water-element{color:var(--water-element-color)}.footer{font-size:.75rem;color:var(--dark-gray-color);font-weight:500;text-align:center;padding:3.5rem}