/* shared styles for the static site pages. colors + geometry mirror the app
   (code/UI.h): workspace #1e1e1e, popup #282828, border #414141,
   selection #cc667a, 16px page gap, 30px controls, 10px corner radius */
@font-face { font-family: Inter; src: url(/fonts/Inter-Regular.ttf); font-weight: 400; }
@font-face { font-family: Inter; src: url(/fonts/Inter-SemiBold.ttf); font-weight: 600; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1e1e1e; color: #c2c3c4;
             font: 400 14px/1.6 Inter, system-ui, sans-serif; }

header { display: flex; align-items: center; gap: 16px;
         padding: 16px 16px 8px 16px; }
.logo { width: 30px; height: 30px; border-radius: 50%; background: #cc667a;
        color: #fff; font-weight: 600; font-size: 12px; flex: none;
        display: flex; align-items: center; justify-content: center; }
.logo, a.logo { text-decoration: none; }
nav.pages { display: flex; gap: 16px; }
nav.pages a { color: #c2c3c4; text-decoration: none; }
nav.pages a:hover { color: #fff; }
.spacer { flex: 1; }
nav.account { display: flex; gap: 16px; align-items: center; }
.btn { display: flex; align-items: center; height: 30px; padding: 0 14px;
       border-radius: 10px; text-decoration: none; font-size: 12px;
       color: #c2c3c4; background: #282828; border: 1px solid #414141; }
.btn:hover { color: #fff; background: #2f2f2f; }
.btn.primary { background: #cc667a; border-color: #cc667a; color: #fff;
               box-shadow: 0 0 14px rgba(204, 102, 122, 0.45); }
.btn.primary:hover { background: #d4788a; }

main { max-width: 720px; margin: 0 auto; padding: 48px 16px; }
h1 { font-size: 28px; font-weight: 600; color: #fff; margin: 0 0 16px; }
h2 { font-size: 16px; font-weight: 600; color: #fff; margin: 32px 0 8px; }
main a { color: #cc667a; text-decoration: none; }
main a:hover { text-decoration: underline; }
.dim { color: #8a8b8c; }