:root{--bg:#0a0e17;--bg-elevated:#12182a;--border:#2a3555;--text:#e8edf6;--muted:#94a3b8;--primary:#4F7FF5;--primary-hover:#3f6ee9}
*{box-sizing:border-box}
html{color-scheme:dark}
body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;margin:0;min-height:100vh;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:#9ab6ff}
.page-shell{max-width:1100px;margin:0 auto;padding:42px 20px 80px}
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;border-radius:10px;font-size:.9375rem;font-weight:600;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--primary);color:white;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-outline:hover{background:rgba(255,255,255,.06);border-color:#3d4d73}

/* Public marketing and help pages; private data is never embedded here. */
    .public-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
      gap: 14px; padding: 18px max(20px, calc((100vw - 1180px)/2)); border-bottom: 1px solid var(--border); }
    .public-header[hidden] { display: none !important; }
    .public-brand { color: var(--text); font-weight: 800; text-decoration: none; font-size: 1.1rem; }
    .public-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
    .public-links a { color: var(--muted); font-size: .875rem; text-decoration: none; }
    .public-links a:hover, .public-links a[aria-current="page"] { color: var(--text); }
    .public-links .public-join { padding: 9px 13px; border-radius: 8px; background: var(--primary); color: #fff; }
    .public-shell { max-width: 1080px; }
    .public-page { display: none; }
    .public-page.is-current { display: block; }
    .public-page h1 { font-size: clamp(1.9rem, 4vw, 2.65rem); line-height: 1.18; margin: 8px 0 16px; }
    .public-page h2 { font-size: 1.16rem; margin: 0 0 10px; }
    .public-page p, .public-page li { color: var(--muted); line-height: 1.65; }
    .public-page p { margin: 8px 0 16px; }
    .public-page .public-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #a8bcff; font-weight: 700; }
    .public-page .public-lead { max-width: 720px; font-size: 1.05rem; }
    .public-card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 26px; }
    .public-page .card { height: 100%; }
    .public-steps { padding-left: 25px; }
    .public-steps li { padding: 8px 0; }
    .public-page pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 20px; background: #0c1325;
      border: 1px solid var(--border); border-radius: 10px; color: #dbe7ff; line-height: 1.65; font-size: .89rem; }
    .public-page code { font-family: ui-monospace, Consolas, monospace; }
    .public-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
    .public-page details { margin-bottom: 12px; }
    .public-page summary { cursor: pointer; font-weight: 650; }
    .public-note { border-left: 3px solid var(--primary); padding: 10px 16px; color: var(--muted); background: #101930; }
    @media (max-width: 650px) { .public-header { padding: 16px; } .public-links { gap: 10px; } .public-shell { padding-top: 28px; } }