.header{box-sizing:border-box;color:#242039;font-size:16px;line-height:1.5;font-family:"Segoe UI Variable Display","Aptos",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.header *{box-sizing:border-box}:where(.header) button{font:inherit;cursor:pointer}.header a{text-decoration:none}.header [hidden]{display:none!important}
.wrap{max-width: 1200px; margin: auto; padding: 0px 32px;}
.header{height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 24px;}
.logo{font-size: 2.7rem; font-weight: 900; letter-spacing: -0.065em; color: var(--purple); display: inline-flex; align-items: center; gap: 3px;}
.logo span{font-size: 1.9rem; letter-spacing: -0.1em;}
.header nav{display: flex; align-items: center; gap: 30px; font-size: 0.9rem;}
.logo.small{font-size: 1.8rem;}
.logo.small span{font-size: 1.25rem;}
@media (max-width: 700px){.wrap{padding: 0px 20px;}
.header{height: 79px; gap: 14px;}
.logo{font-size: 2.3rem;}
.header nav{gap: 15px; font-size: 0.8rem;}
.header nav a{display: none;}
}

.wrap{max-width: 1160px;}
.header{height: 82px;}
.logo{color: rgb(29, 29, 31); font-weight: 750; font-size: 2.1rem; letter-spacing: -0.08em;}
.logo .logo-dot{color: rgb(0, 102, 204); font-size: 2.1rem;}
.header nav{font-size: 0.85rem; gap: 34px;}
.logo.small{color: rgb(29, 29, 31);}
@media (max-width: 700px){.wrap{padding: 0px 20px;}
.header{height: 64px;}
.logo{font-size: 1.95rem;}
.logo .logo-dot{font-size: 1.95rem;}
.logo.small{font-size: 1.6rem;}
}
@media (max-width: 360px){.wrap{padding: 0px 15px;}
}

.header{position: relative; z-index: 5; border-color: rgb(230, 227, 241);}
.logo{font-weight: 850; letter-spacing: -0.07em; color: rgb(41, 34, 66);}
.logo .logo-dot{color: rgb(115, 83, 239);}
.account-entry{display: flex; gap: 12px; align-items: center; position: relative;}
.account-button{border: 1px solid rgb(222, 215, 238); background: rgb(255, 255, 255); padding: 11px 16px; border-radius: 100px; font-size: 0.875rem; font-weight: 650; color: rgb(87, 72, 113); min-height: 44px;}
.account-button{display: flex; align-items: center; gap: 15px; background: rgb(39, 34, 57); color: rgb(255, 255, 255); border: 0px;}
.account-menu{position: absolute; right: 0px; top: calc(100% + 13px); width: 280px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 222, 239); box-shadow: rgba(48, 36, 70, 0.14) 0px 20px 70px; border-radius: 20px; padding: 12px; z-index: 20;}
.account-menu button{display: block; border: 0px; background: transparent; text-align: left; padding: 13px 12px; min-height: 46px; width: 100%; font-size: 0.9rem; border-radius: 10px; color: var(--ink);}
.account-menu button:hover{background: rgb(243, 239, 255);}
.account-menu hr{border-width: 1px 0px 0px; border-style: solid none none; border-color: rgb(238, 233, 244) currentcolor currentcolor; border-image: none;}
@media (max-width: 1000px){.header nav > a{display: none;}
.header nav{gap: 0px;}
.account-entry{gap: 4px;}
}
@media (max-width: 700px){.header{height: auto; min-height: 77px; gap: 10px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px;}
.header nav{display: none;}
.account-entry{gap: 6px;}
.account-button{font-size: 0.8rem; padding: 10px 13px; gap: 10px;}
.logo{font-size: 2rem;}
.account-menu{width: 275px;}
}
@media (max-width: 360px){.account-button{font-size: 0.75rem; padding: 10px;}
.account-entry{gap: 3px;}
}

.wrap{max-width: 1220px; padding-left: 40px; padding-right: 40px;}
.header{height: 94px; border-bottom: 1px solid rgb(232, 227, 239);}
.logo{font-size: 2.4rem;}
.header nav{gap: 30px;}
.account-button{padding: 13px 21px;}
@media (max-width: 1000px){.wrap{padding-left: 28px; padding-right: 28px;}
}
@media (max-width: 700px){.wrap{padding-left: 22px; padding-right: 22px;}
.header{min-height: 76px; height: 76px; flex-wrap: nowrap; gap: 8px;}
.logo{font-size: 2.05rem;}
.account-button{font-size: 0.75rem; padding: 11px 13px;}
.account-entry{gap: 8px;}
}
@media (max-width: 360px){.wrap{padding-left: 17px; padding-right: 17px;}
.account-entry{gap: 4px;}
.account-button{padding: 10px; font-size: 0.7rem;}
}
.brand-lockup{display: flex; align-items: center; gap: 9px; flex-shrink: 0;}
.brand-beta{display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border: 1px solid rgb(223, 208, 243); border-radius: 7px; background: linear-gradient(135deg, rgb(245, 239, 255), rgb(236, 227, 251)); color: rgb(137, 96, 181); font-size: 0.54rem; font-weight: 750; letter-spacing: 0.1em; line-height: 1; box-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px inset;}
@media (max-width: 700px){.brand-lockup{gap: 5px;}
.brand-beta{font-size: 0.46rem; padding: 4px 5px; border-radius: 5px;}
.header .account-entry{gap: 4px;}
.header .professional-entry{font-size: 0.65rem;}
}
@media (max-width: 360px){.header .logo{font-size: 1.8rem;}
.header .account-button{font-size: 0.65rem; padding: 10px 8px;}
.header .professional-entry{font-size: 0.6rem; padding: 8px 2px;}
.brand-lockup{gap: 4px;}
}
.header .account-entry{display: flex; align-items: center; gap: 16px; min-width: 0px;}
.session-entry{min-height: 44px; max-width: 210px; padding: 9px 4px; border: 0px; background: transparent; color: rgb(112, 66, 189); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px; font-weight: 750; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.session-entry:hover{color: rgb(79, 41, 150); text-decoration: underline; text-underline-offset: 4px;}
.session-entry.is-signed-in{color: rgb(56, 44, 80);}
.session-entry:focus-visible{outline: rgb(142, 98, 223) solid 2px; outline-offset: 3px; border-radius: 8px;}
.header .account-button{flex-shrink: 0;}
@media (max-width: 700px){.header .account-entry{gap: 8px;}
.session-entry{font-size: 13px; max-width: 120px;}
.header .brand-lockup{flex-shrink: 0;}
}
@media (max-width: 380px){.header .account-entry{gap: 5px;}
.session-entry{font-size: 12px; max-width: 92px;}
.header.wrap{padding-left: 16px; padding-right: 16px;}
}
.header .logo{display: inline-flex; align-items: center; line-height: 1; font-size: 0px; flex-shrink: 0;}
.brand-logo-image{display: block; width: 116px; height: auto; max-width: none;}
.brand-lockup{align-items: center;}
@media (max-width: 700px){.brand-logo-image{width: 100px;}
}
@media (max-width: 360px){.brand-logo-image{width: 88px;}
}
body > .header.wrap{position: sticky; top: 0px; z-index: 50; background: rgb(250, 249, 252); box-shadow: rgba(48, 32, 68, 0.04) 0px 3px 12px;}
@media (max-width: 700px){body > .header.wrap{position: sticky; top: 0px; z-index: 50; height: calc(64px + env(safe-area-inset-top,0px)); min-height: 64px; padding-top: env(safe-area-inset-top,0px); padding-left: 18px; padding-right: 18px; background: rgb(250, 249, 252); box-shadow: rgba(48, 32, 68, 0.04) 0px 3px 12px;}
.header .account-button{min-height: 44px;}
.header #account-menu{max-height: calc(100dvh - 80px - env(safe-area-inset-top,0px));}
}
@media (min-width: 701px){body > .header.wrap{max-width: none; width: 100%; padding-left: max(40px, 50% - 570px); padding-right: max(40px, 50% - 570px); border-bottom: 1px solid rgb(232, 227, 239);}
}
@media (min-width: 701px) and (max-width: 1000px){body > .header.wrap{padding-left: 28px; padding-right: 28px;}
}

.header #account-menu{width: 340px; max-width: calc(-32px + 100vw); padding: 0px; border: 1px solid rgb(229, 217, 243); border-radius: 24px; overflow: auto; max-height: calc(100dvh - 105px); overscroll-behavior: contain; box-shadow: rgba(51, 32, 72, 0.14) 0px 22px 70px; background: rgb(255, 255, 255); scrollbar-width: thin;}
.zmenu-head{display: flex; align-items: center; gap: 12px; padding: 20px; background: radial-gradient(at 100% 0px, rgba(217, 197, 255, 0.565), transparent 80%), rgb(246, 240, 255); border-bottom: 1px solid rgb(234, 223, 246);}
.zmenu-avatar{display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; flex-shrink: 0; border-radius: 15px; background: linear-gradient(140deg, rgb(149, 112, 238), rgb(102, 53, 196)); color: rgb(255, 255, 255); font-size: 24px; font-weight: 800; box-shadow: rgba(119, 75, 193, 0.17) 0px 5px 13px;}
.zmenu-head > div{min-width: 0px;}
.zmenu-head small{display: block; color: rgb(153, 117, 183); font-size: 8px; font-weight: 750; letter-spacing: 0.13em;}
.zmenu-head strong{display: block; color: rgb(48, 32, 63); font-size: 17px; margin-top: 4px; overflow-wrap: anywhere;}
.zmenu-head div > span{font-size: 11px; color: rgb(140, 108, 168);}
.zmenu-group{padding: 9px 10px; border-bottom: 1px solid rgb(240, 233, 247);}
.header #account-menu .menu-caption{margin: 7px 10px 5px; font-size: 9px; font-weight: 750; color: rgb(161, 138, 173); letter-spacing: 0.12em;}
.header #account-menu .zmenu-row{display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; padding: 10px; border: 0px; border-radius: 12px; text-align: left; background: transparent; color: rgb(73, 52, 82); white-space: normal;}
.header #account-menu .zmenu-row:hover{background: rgb(243, 236, 252); color: rgb(117, 67, 189);}
.zmenu-icon{display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: rgb(245, 240, 251); color: rgb(145, 101, 188); flex-shrink: 0;}
.zmenu-icon svg{width: 17px; height: 17px;}
.zmenu-copy{flex: 1 1 0%; min-width: 0px;}
.zmenu-copy strong{display: block; font-size: 13px; font-weight: 650; line-height: 1.35;}
.zmenu-copy small{display: block; color: rgb(153, 135, 167); font-size: 11px; margin-top: 3px; line-height: 1.4;}
.zmenu-arrow{color: rgb(187, 166, 203); font-size: 16px;}
.zmenu-switch{margin: 9px 10px 0px; padding: 4px; border-radius: 15px; background: linear-gradient(110deg, rgb(247, 241, 255), rgb(253, 251, 255));}
.header #account-menu .zmenu-logout{display: flex; justify-content: space-between; width: calc(100% - 20px); margin: 5px 10px 10px; min-height: 44px; padding: 12px 10px; background: transparent; border: 0px; border-radius: 12px; color: rgb(153, 119, 139); font-size: 12px;}
.header #account-menu .zmenu-logout:hover{background: rgb(252, 241, 245); color: rgb(141, 61, 102);}
.zmenu-admin{display: block; padding: 15px; color: rgb(117, 67, 189);}
#account-menu button:focus-visible{outline: rgb(155, 116, 221) solid 2px; outline-offset: -2px;}
@media (max-width: 700px){.header #account-menu{width: 330px; max-width: calc(-32px + 100vw); max-height: calc(100dvh - 94px); border-radius: 21px;}
.zmenu-head{padding: 16px;}
.header #account-menu .zmenu-row{min-height: 46px; padding: 8px 10px;}
.zmenu-copy strong{font-size: 14px;}
.zmenu-group{padding: 7px 9px;}
}
.zmenu-avatar{overflow: hidden;}
.zmenu-avatar img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center;}