/* TurtleLuck header + main menu: the ONE stylesheet for header.site.gn (bar, logo box, centre nav, right group, burger + panel).
   Loaded first in <body> after the page CSS, so nothing here needs !important except where a page-wide rule must be beaten.
   Logo scroll animation lives in tl-logo-anim.css / tl-logo-opts.css (logo only). Behaviour: public/tl-menu.js. */
:root{--tl-ink:#1d1d1f;--tl-grey:#424245;--tl-green:#1e8e3e;--tl-ease:cubic-bezier(.28,.11,.32,1);--tl-out:cubic-bezier(.4,0,1,1);
  --tlj-ease:cubic-bezier(.33,0,.25,1);--tlj-out:cubic-bezier(.4,0,1,1)}
@supports (animation-timing-function:linear(0,1)){:root{--tlj-ease:linear(0,.25 12%,.6 28%,.86 45%,.97 62%,1)}}

/* ---------- bar ---------- */
html{scrollbar-gutter:stable} /* page width never changes between short and long pages, so the centred nav cannot shift */
header.site.gn,header.site.gn *{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,"Liberation Sans","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;letter-spacing:-.01em}
header.site.gn{position:sticky;top:0;z-index:9999;isolation:isolate;line-height:1.47;font-size:16px;color:var(--tl-ink);
  border:0;box-shadow:none;--fade:56px}
header.site.gn::after{content:"";position:absolute;left:0;right:0;top:0;bottom:calc(-1*var(--fade));z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,#fff 0,#fff calc(100% - var(--fade)),rgba(255,255,255,.966) calc(100% - var(--fade)*.889),rgba(255,255,255,.874) calc(100% - var(--fade)*.778),rgba(255,255,255,.741) calc(100% - var(--fade)*.667),rgba(255,255,255,.583) calc(100% - var(--fade)*.556),rgba(255,255,255,.417) calc(100% - var(--fade)*.444),rgba(255,255,255,.259) calc(100% - var(--fade)*.333),rgba(255,255,255,.126) calc(100% - var(--fade)*.222),rgba(255,255,255,.034) calc(100% - var(--fade)*.111),rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--fade)),rgba(0,0,0,.966) calc(100% - var(--fade)*.889),rgba(0,0,0,.874) calc(100% - var(--fade)*.778),rgba(0,0,0,.741) calc(100% - var(--fade)*.667),rgba(0,0,0,.583) calc(100% - var(--fade)*.556),rgba(0,0,0,.417) calc(100% - var(--fade)*.444),rgba(0,0,0,.259) calc(100% - var(--fade)*.333),rgba(0,0,0,.126) calc(100% - var(--fade)*.222),rgba(0,0,0,.034) calc(100% - var(--fade)*.111),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--fade)),rgba(0,0,0,.966) calc(100% - var(--fade)*.889),rgba(0,0,0,.874) calc(100% - var(--fade)*.778),rgba(0,0,0,.741) calc(100% - var(--fade)*.667),rgba(0,0,0,.583) calc(100% - var(--fade)*.556),rgba(0,0,0,.417) calc(100% - var(--fade)*.444),rgba(0,0,0,.259) calc(100% - var(--fade)*.333),rgba(0,0,0,.126) calc(100% - var(--fade)*.222),rgba(0,0,0,.034) calc(100% - var(--fade)*.111),rgba(0,0,0,0) 100%)}
header.site.gn.is-small{box-shadow:0 1px 0 rgba(0,0,0,.08)}
header.site.gn .wrap{display:flex;align-items:center;flex-wrap:nowrap;max-width:1200px;margin:0 auto;padding:0 22px;height:64px;min-height:0;gap:28px;position:relative}
header.site.gn.is-small .wrap{height:52px}
@media(max-width:834px){header.site.gn{--fade:36px}}
@media(max-width:600px){header.site.gn .wrap{height:88px;padding:0 20px;gap:14px}header.site.gn.is-small .wrap{height:56px}}
@media(max-width:380px){header.site.gn .wrap{gap:10px;padding-left:16px;padding-right:16px}}

/* ---------- logo box (left; pushes the right-hand group to the far right) ---------- */
header.site.gn .gn-logo{display:flex;align-self:center;align-items:flex-end;gap:4px;padding-bottom:0;line-height:1;position:relative;flex:none;margin-right:auto;
  text-decoration:none;color:var(--tl-ink);font-weight:800;font-size:1.65rem;--wh:50px;--wb:8px}
header.site.gn .gn-logo:hover,header.site.gn .gn-logo:focus-visible{color:inherit}
header.site.gn .gn-logo:hover *{animation:none}
header.site.gn .gn-logo img{display:block;width:auto}
header.site.gn .gn-logo .lg-turtle{height:40px}
header.site.gn .gn-logo .lg-word{height:25px;margin-bottom:2px}
header.site.gn .gn-logo .lg-text{display:inline;position:absolute;left:0;top:50%;transform:translateY(-50%) scale(.96);transform-origin:left center;opacity:0;pointer-events:none;
  font-weight:800;font-size:21px;letter-spacing:-.035em;color:var(--tl-ink);white-space:nowrap}
header.site.gn .lg-luck i{font-style:normal}
@media(max-width:600px){header.site.gn .gn-logo{padding-bottom:6px;font-size:1.35rem;--wh:32px;--wb:5px}header.site.gn .gn-logo .lg-turtle{height:66px}header.site.gn .gn-logo .lg-word{height:32px;margin-bottom:5px}}
@media(max-width:380px){header.site.gn .gn-logo .lg-turtle{max-height:36px}}

/* ---------- centre nav: absolutely centred so nothing on the right can move it; no reflow on the active word ---------- */
header.site.gn .main-nav{display:flex;justify-content:center;flex-wrap:nowrap;gap:40px;font-size:13px;white-space:nowrap}
header.site.gn .main-nav a{display:block;padding:8px 0;font-size:14px;font-weight:400;color:var(--tl-grey);text-decoration:none;white-space:nowrap}
header.site.gn .main-nav a:hover{color:var(--tl-green)}
header.site.gn .main-nav a[aria-current="page"]{color:var(--tl-ink);-webkit-text-stroke:.35px currentColor;box-shadow:inset 0 -2px 0 var(--tl-ink)}
@media(min-width:1181px){header.site.gn .main-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}}
@media(max-width:1180px){header.site.gn .main-nav{display:none}}

/* ---------- right group: Log in + Sign up (guests) or name + burger (members) ---------- */
header.site.gn .nav-right{display:flex;align-items:center;gap:20px;font-size:13px}
header.site.gn .nav-right .login-link{font-size:14px;font-weight:500;color:var(--tl-ink);text-decoration:none;margin-right:16px}
@media(max-width:1180px){header.site.gn .nav-right .login-link{display:none}}
header.site.gn a.nav-cta,header.site.gn a.nav-cta:hover{display:block;font-size:14px;line-height:1.28577;font-weight:500;letter-spacing:-.01em;padding:9px 16px;min-width:23px;border-radius:980px;
  text-align:center;text-decoration:none;white-space:nowrap;color:#fff;background:var(--tl-green)}
header.site.gn a.nav-cta:hover{background:#18793a}
@media(max-width:600px){header.site.gn a.nav-cta{display:inline-flex;align-items:center;min-height:44px}}
header.site.gn .gn-acct{order:99;display:block;min-width:44px;max-width:min(132px,30vw);min-height:44px;line-height:44px;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex-shrink:1;text-align:right;font:inherit;font-size:16px;line-height:44px;color:var(--tl-ink);text-decoration:none;cursor:pointer}
header.site.gn .gn-acct[hidden]{display:none}
html[data-auth=in] .au-out,html:not([data-auth=in]) .au-in{display:none!important}
html:not([data-auth]) .au-link{visibility:hidden}
html[data-login=off] .needs-login{display:none!important}

/* ---------- burger ---------- */
header.site.gn .gn-menu{display:none;order:100}
@media(max-width:1180px){header.site.gn .gn-menu{display:block}}
html[data-auth=in] header.site.gn .gn-menu{display:block;margin-left:-27px} /* name-to-burger gap ≈12px: pulls the summary's inset over the flex gap */
@media(max-width:600px){html[data-auth=in] header.site.gn .gn-menu{margin-left:-13px}}
@media(max-width:380px){html[data-auth=in] header.site.gn .gn-menu{margin-left:-9px}}
header.site.gn .gn-menu summary{list-style:none;cursor:pointer;width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-right:-10px;padding:12px 4px;border-radius:12px;color:var(--tl-ink);font-size:0;-webkit-tap-highlight-color:transparent}
header.site.gn .gn-menu summary::-webkit-details-marker{display:none}
@media(max-width:600px){header.site.gn .gn-menu summary{min-width:44px;min-height:44px;padding:0}}
.tl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tl-bars{position:relative;display:block;width:26px;height:18px;transition:transform .2s var(--tlj-ease)}
.tl-bars i{position:absolute;left:0;width:26px;height:3px;border-radius:12px;background:var(--tl-ink);transition:transform .2s var(--tlj-out),opacity .15s linear,top .2s var(--tlj-out)}
.tl-bars i:nth-child(1){top:0}.tl-bars i:nth-child(2){top:7.5px}.tl-bars i:nth-child(3){top:15px}
header.site.gn .gn-menu summary:active .tl-bars{transform:scale(.9)}
.gn-menu.is-open .tl-bars i:nth-child(1){top:7.5px;transform:rotate(45deg)}
.gn-menu.is-open .tl-bars i:nth-child(2){opacity:0;transform:scaleX(.2)}
.gn-menu.is-open .tl-bars i:nth-child(3){top:7.5px;transform:rotate(-45deg)}
.gn-menu.is-open .tl-bars i{transition:transform .5s cubic-bezier(.34,1.9,.5,1),opacity .15s linear,top .22s var(--tlj-ease)}
@keyframes tlj-icon{0%,100%{transform:none}25%{transform:scale(1.25,.78)}45%{transform:scale(.88,1.14)}65%{transform:scale(1.06,.95)}82%{transform:scale(.98,1.02)}}
.gn-menu.is-open .tl-bars{animation:tlj-icon .65s var(--tlj-ease) .08s both}

/* ---------- burger panel ---------- */
header.site.gn .gn-drop{position:absolute;left:0;right:0;top:64px;z-index:9999;display:flex;flex-direction:column;gap:4px;padding:14px 16px 28px;background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.08),0 1px 0 rgba(0,0,0,.05);clip-path:inset(0 -80px -120px -80px);border-radius:0 0 var(--r-card,20px) var(--r-card,20px);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:50% 0;transition:opacity .18s var(--tlj-out),transform .18s var(--tlj-out)}
header.site.gn .gn-drop:focus{outline:none}
header.site.gn.is-small .gn-drop{top:52px}
@media(max-width:600px){header.site.gn .gn-drop{top:88px}header.site.gn.is-small .gn-drop{top:56px}}
header.site.gn .gn-menu:not([open])>.gn-drop{display:none}
header.site.gn .gn-menu[open]>.gn-drop{max-height:calc(100dvh - var(--gn-top,64px));overflow-y:auto;overscroll-behavior:contain}
@keyframes tlj-panel{0%{transform:scale(1,.55);opacity:0}22%{transform:scale(.97,1.08);opacity:1}40%{transform:scale(1.02,.94)}57%{transform:scale(.99,1.035)}73%{transform:scale(1.005,.985)}87%{transform:scale(1,1.005)}100%{transform:none;opacity:1}}
header.site.gn .gn-menu.is-open>.gn-drop{opacity:1;transform:none;transition:none;animation:tlj-panel .85s var(--tlj-ease) both}
header.site.gn nav.gn-drop a{display:block;font-size:36px;line-height:1.1;white-space:nowrap;font-weight:600;letter-spacing:-.02em;padding:14px 16px;border-radius:14px;
  color:var(--tl-ink);text-decoration:none;transform-origin:16px 70%;opacity:0;transition:opacity .12s var(--tlj-out)}
header.site.gn nav.gn-drop a:hover,header.site.gn nav.gn-drop a[aria-current="page"]{color:var(--tl-green)}
@keyframes tlj-item{0%{opacity:0;transform:translateY(22px) scale(.9,1.12)}35%{opacity:1;transform:translateY(-5px) scale(1.06,.93)}55%{transform:translateY(2px) scale(.97,1.04)}74%{transform:translateY(-.5px) scale(1.012,.99)}100%{opacity:1;transform:none}}
header.site.gn .gn-menu.is-open nav.gn-drop a{opacity:1;transform:none;transition:none;animation:tlj-item .7s var(--tlj-ease) calc(100ms + var(--i,0)*50ms) both}
header.site.gn nav.gn-drop a:nth-child(1){--i:0}header.site.gn nav.gn-drop a:nth-child(2){--i:1}header.site.gn nav.gn-drop a:nth-child(3){--i:2}
header.site.gn nav.gn-drop a:nth-child(4){--i:3}header.site.gn nav.gn-drop a:nth-child(5){--i:4}header.site.gn nav.gn-drop a:nth-child(6){--i:5}
/* members: My profile, Saved, Settings, Log out - always shown, one smaller size */
header.site.gn .gn-pl{display:flex;flex-direction:column;padding:8px 0 4px 16px}
header.site.gn nav.gn-drop .gn-pl a{display:flex;align-items:center;min-height:44px;padding:6px 16px;font-size:24px;font-weight:600;opacity:1;transform:none}
.tl-scrim{position:fixed;inset:0;z-index:49;background:rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .2s var(--tl-out);-webkit-tap-highlight-color:transparent}
.tl-scrim.is-on{opacity:1;pointer-events:auto;transition:opacity .35s var(--tl-ease)}
html.tl-lock{overflow:hidden;overscroll-behavior:none}

/* ---------- page change: no cross-document view transition. Chrome kept the previous page's snapshot as a fading layer, which could show a page that was neither the one left nor the one opened (Chart -> Relationship showed Life) and a white frame. The browser now holds the old page until the new one paints, and the new page's content fades in via tl-load.js. ---------- */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tl-bars,.tl-bars i,header.site.gn .gn-menu summary:active .tl-bars{animation:none!important;transition:opacity .2s ease!important}
  .gn-menu.is-open .tl-bars i:nth-child(1){transform:rotate(45deg)}.gn-menu.is-open .tl-bars i:nth-child(3){transform:rotate(-45deg)}
  header.site.gn .gn-drop,header.site.gn .gn-menu.is-open>.gn-drop,header.site.gn nav.gn-drop a,header.site.gn .gn-menu.is-open nav.gn-drop a{animation:none!important;transform:none!important;transition:opacity .2s ease!important}
  .tl-scrim{transition:opacity .2s ease}}