@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&family=Nunito:wght@700;800;900;1000&display=swap');
/* Same typography and brand treatment as the existing marketing pages. */
:root{--font-face-googlesans:'Nunito','Noto Sans SC',sans-serif;--home-font:'Nunito','Noto Sans SC',sans-serif}
html body,body *,body .headline,body .label,body .sc-experience,body .jc-experience{font-family:var(--home-font)!important}
body .sc-experience *,body .jc-experience *{font-family:inherit!important}
.home-site-nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 36px;color:#313030;pointer-events:none}
.home-site-nav a{pointer-events:auto;color:inherit;text-decoration:none}.home-site-nav .brand{font-size:34px;letter-spacing:-1.5px;font-weight:1000;position:relative;line-height:1.1}.brand-name{display:block}.brand-dot{font-size:13px;vertical-align:top;margin:7px 0 0 4px;display:inline-block}.brand-cn{display:block;font-size:11px;letter-spacing:2px;font-weight:600;margin-top:5px}
.home-site-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffce53;border:1.5px solid #313030;border-radius:30px;padding:12px 22px;font-size:14px;font-weight:800;line-height:1.5;gap:12px;transition:background .2s}.small-button span{font-size:19px}.home-site-button:hover{background:#ffc414}.home-site-nav a:focus-visible,.home-contact:focus-visible{outline:3px solid #e53d00;outline-offset:5px}
.home-contact{position:fixed;left:36px;bottom:24px;z-index:20;color:#313030;text-decoration:none}
myth-top-nav{visibility:hidden}body>a.homeLink{pointer-events:none}body>a.homeLink h1{font-family:var(--home-font)!important;font-weight:800;font-size:15px;line-height:1.5;letter-spacing:.4px;margin:0;white-space:nowrap}body>a.homeLink{display:flex!important;align-items:center;justify-content:center;width:auto!important;min-width:220px;left:50%!important;transform:translateX(-50%);height:96px}
.home-about-content{max-width:640px;margin:auto;padding:50px 24px;font:15px/1.9 var(--home-font)}.home-about-content h2{font-size:32px;line-height:1.4;margin:18px 0}.home-about-content h3{font-size:20px;margin:26px 0 8px}.home-about-content p{margin:12px 0}.home-about-content img{display:block;margin:20px 0}.home-about-content a{color:inherit;text-decoration:underline;text-underline-offset:4px}.home-about-content small{display:block;color:#666}.home-static-content{max-width:800px;padding:24px;margin:120px auto 0;font:16px/1.8 var(--home-font)}
@media(max-width:700px){.home-contact{left:20px;bottom:max(18px,env(safe-area-inset-bottom))}.home-site-nav{padding:18px 20px;gap:12px}.home-site-nav .brand{font-size:27px}.brand-dot{font-size:10px;margin-top:5px}.brand-cn{font-size:10px;margin-top:5px}.home-site-button{padding:10px 16px;font-size:12px;gap:8px}.small-button span{font-size:17px}body>a.homeLink{top:80px!important;height:36px!important;min-width:0}body>a.homeLink h1{font-size:13px;letter-spacing:.2px}}
@media(max-height:550px) and (min-width:701px){.home-site-nav{padding:14px 24px}.home-site-nav .brand{font-size:27px}body>a.homeLink{height:74px!important}}

/* Keep the remaining footer actions consistent with the old site. */
body myth-footer .nav .nav__item{font-family:var(--home-font)!important;font-size:13px!important;font-weight:400!important;letter-spacing:normal!important;line-height:normal!important;color:#fff!important;text-shadow:none!important;text-decoration:none!important}


.home-contact .home-contact-mascot{position:relative;display:block;flex:0 0 28px;width:28px;height:28px;overflow:hidden;border-radius:50%}
.home-contact-mascot img{position:absolute;width:40px;height:40px;max-width:none;left:-6px;top:-1px;object-fit:contain}
@media(max-width:700px){.home-contact .home-contact-mascot{flex-basis:26px;width:26px;height:26px}.home-contact-mascot img{width:38px;height:38px}}

/* Detail pages scroll below an opaque header instead of through the brand. */
html{--detail-header-height:108px}
/* The opening card expands its hover layer, whose color differs from body. */
html.blue-mode{--detail-background:var(--color-blue-hover)}
html.yellow-mode{--detail-background:var(--color-yellow-hover)}
html.red-mode{--detail-background:var(--color-red-primary)}
html.green-mode{--detail-background:var(--color-green-hover)}
body.page-open{background-color:var(--detail-background)}
body.page-open .home-site-nav{height:var(--detail-header-height);box-sizing:border-box;background:var(--detail-background)}
html body.page-open .myths__cards_gallery .myths__cards_gallery__hoverIndicator .myths__cards_gallery__hoverIndicator__leftBG,
html body.page-open .myths__cards_gallery .myths__cards_gallery__hoverIndicator .myths__cards_gallery__hoverIndicator__rightBG{background:var(--detail-background)}
body.page-open>a.homeLink{position:fixed!important;top:0!important;height:var(--detail-header-height)!important;z-index:21;color:#fff!important}
body.page-open .web-myth-page{padding-top:calc(var(--detail-header-height) + 16px)}
body.page-open .web-myth-page close-button{top:calc(var(--detail-header-height) + 16px)}
@media(max-width:700px){html{--detail-header-height:124px}body.page-open .home-site-nav{align-items:flex-start}body.page-open>a.homeLink{top:80px!important;height:36px!important}}
@media(max-height:550px) and (min-width:701px){html{--detail-header-height:82px}}

/* Fit the demo between the navigation and footer, with balanced breathing room. */
body.page-open{overflow-y:auto}
html.demo-needs-scroll body.page-open{overflow-y:scroll}
body.page-transitioned-in .ef-chat-page{transition:none}
body.page-open myth-footer{position:fixed}
body.page-open .ef-chat-page{
 --demo-edge-gap:clamp(16px,2.5svh,28px);
 --demo-footer-space:64px;
 --demo-close-space:40px;
 min-height:100svh;
 padding:calc(var(--detail-header-height) + var(--demo-edge-gap)) 24px calc(var(--demo-footer-space) + var(--demo-edge-gap));
 flex-direction:column;
 align-items:center;
 justify-content:center;
}
.eggie-first-page.ef-chat-page .page-inner{position:relative;flex-shrink:0;width:var(--demo-width,1188px);max-width:none;zoom:var(--demo-scale,1);margin:0 auto;padding:var(--demo-close-space) 40px 0}
.eggie-first-page.ef-chat-page .page-modules{margin:0;padding:0 64px}
body.page-open .ef-chat-page close-button{position:absolute;top:0;right:40px;margin:0}
@media(max-width:900px){
 .eggie-first-page.ef-chat-page .page-inner{padding:var(--demo-close-space) 0 0}
 .eggie-first-page.ef-chat-page .page-modules{padding:0 30px}
 body.page-open .ef-chat-page close-button{right:30px}
}
@media(max-width:600px){
 body.page-open .ef-chat-page{padding-left:8px;padding-right:8px}
 .eggie-first-page.ef-chat-page .page-modules{padding:0 15px}
 body.page-open .ef-chat-page close-button{right:15px}
}

/* Compact chat typography and soft corners, retaining the demo palette. */
.eggie-first-page.ef-chat-page .page-inner{background:transparent}
.ef-chat-page .sc-log{gap:18px}
.ef-chat-page .sc-log>.sc-group-after{margin-top:0}
.ef-chat-page .sc-log .sc-message>p{font-size:14px;font-weight:500;line-height:1.75;letter-spacing:normal;padding:9px 12px;overflow-wrap:anywhere;border-radius:4px 14px 14px 14px}
.ef-chat-page .sc-log .sc-user>p{border-radius:14px 4px 14px 14px}
.ef-chat-page .sc-log .sc-message>p:before{display:none}
.ef-chat-page .sc-composer{align-items:center}
.ef-chat-page .sc-composer button{align-self:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#007aff;color:#fff;box-sizing:border-box;transition:background .15s;transform:none}
.ef-chat-page .sc-composer button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-chat-page .sc-composer button:disabled{background:#c7c7cc;color:#fff;cursor:default}
.ef-chat-page .sc-composer button:hover:not(:disabled){background:#0063d8}
.ef-chat-page .sc-composer button:focus-visible{outline:2px solid #007aff;outline-offset:3px}
.ef-chat-page .is-sending .sc-composer button{background:#0063d8;transform:none}
@media(max-width:700px){
 .ef-chat-page .sc-log{gap:16px}
 .ef-chat-page .sc-log .sc-message>p{font-size:14px;padding:8px 11px}
}