/* The website around the app (wingstring_site.js): the tabs along the top, the footer, the
   landing page (home.html) and the legal pages (legal.html). On wingstring.css. */
.site-tabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-left:auto}
.site-tabs a{color:var(--muted);text-decoration:none;font-size:13px;padding:8px 15px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
.site-tabs a:hover{color:var(--text)}
.site-tabs a[aria-current=page]{color:var(--text);border-color:var(--line);background:var(--panel)}
.site-tabs a.studio-tab::after{content:" ↗";color:var(--mint)}
.site-tabs:not([hidden])+.header-actions{margin-left:14px}
/* The account area beside the name (wingstring_account_panel.js), and its dialog. */
.site-account{display:flex;gap:4px;align-items:center;margin-left:-6px}
.site-account .tool-button{white-space:nowrap}
.site-account .quiet-button{padding:7px 10px;color:var(--muted)}
.site-account .quiet-button:hover{color:var(--text)}
#account-dialog{max-width:560px}
#account-dialog h2{margin:14px 0 14px}
#account-dialog .publish-as{margin:0 0 20px;line-height:1.55}
#account-dialog .publish-form .publish-as{margin:0}
#account-dialog .publish-status:empty{display:none}
#account-dialog .publish-status{margin-top:18px}
.account-signin{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.account-code,.account-leave{margin-top:24px}
#account-code-value{margin:0;flex:1;min-width:200px;font-family:monospace}
.link-button{background:none;padding:0;color:var(--mint);font-size:inherit;text-decoration:underline}
.masthead .app-tabs{margin-left:6px}
.masthead .app-tabs+.header-actions{margin-left:auto}
.site-footer{border-top:1px solid var(--line);padding:26px 40px 30px;display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.site-footer nav{display:flex;gap:6px 22px;flex-wrap:wrap}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--text)}

/* The landing page. */
.home-page{min-height:100dvh;display:flex;flex-direction:column}
.home{flex:1}
.home-hero{position:relative;overflow:hidden;min-height:min(78vh,720px);display:flex;align-items:center;border-bottom:1px solid var(--line)}
.home-hero canvas.home-sky{position:absolute;inset:0;width:100%;height:100%;cursor:default;touch-action:auto;pointer-events:none}
.home-hero-text{position:relative;padding:60px 40px;max-width:760px}
.home-hero h1{font:normal clamp(44px,7vw,84px)/1.02 Georgia,serif;letter-spacing:-2px;margin:18px 0 22px}
.home-hero p{font-size:17px;line-height:1.6;color:var(--muted);max-width:560px;margin:0 0 30px}
.home-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.home-actions a{text-decoration:none}
.home-actions .play-button{font-size:14px;padding:14px 24px;min-width:0}
.home-actions .tool-button{padding:13px 20px;font-size:13px}
.home-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:56px 40px;max-width:1240px}
.home-points h2{font:normal 24px Georgia,serif;margin:0 0 10px}
.home-points p{margin:0;color:var(--muted);line-height:1.6}
.home-packs{padding:0 40px 60px;max-width:1240px;color:var(--muted);line-height:1.7}
.home-packs strong{color:var(--text);font-weight:normal}

/* The legal pages. */
.legal{padding:34px 40px 60px;max-width:820px}
.legal-docs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.legal-docs a{color:var(--muted);text-decoration:none;font-size:12px;padding:7px 13px;border:1px solid var(--line);border-radius:20px}
.legal-docs a[aria-current=page]{color:var(--text);background:var(--panel)}
.legal-text{line-height:1.65}
.legal-text h1{font:normal 40px Georgia,serif;margin:0 0 18px;letter-spacing:-1px}
.legal-text h2{font:normal 23px Georgia,serif;margin:32px 0 10px}
.legal-text h3{font-size:15px;margin:24px 0 8px}
.legal-text a{color:var(--mint)}
.legal-text code{font-size:.92em;background:var(--panel);padding:1px 5px;border-radius:4px}
.legal-text pre{background:var(--panel);padding:14px;border-radius:8px;overflow-x:auto}
.legal-text li{margin:4px 0}

@media(max-width:700px){
  .site-tabs{order:3;width:100%;margin:0}
  .site-tabs a{padding:7px 12px}
  .masthead .app-tabs{margin:0}
  .site-footer{padding:22px 18px 26px}
  .home-hero{min-height:70vh}
  .home-hero canvas.home-sky{opacity:.35}
  .home-hero-text{padding:40px 18px}
  .home-hero p{font-size:15px}
  .home-points{grid-template-columns:1fr;padding:36px 18px;gap:22px}
  .home-packs{padding:0 18px 40px}
  .legal{padding:24px 18px 40px}
}