:root { --fg:#1c1e21; --muted:#606770; --line:#e4e6eb; --accent:#0a84ff; --bg:#ffffff; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       color:var(--fg); background:var(--bg); line-height:1.65; }
.wrap { max-width:760px; margin:0 auto; padding:48px 22px 80px; }
header.top { display:flex; align-items:center; justify-content:space-between;
        border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px;
         color:var(--fg); text-decoration:none; }
.brand .dot { width:12px; height:12px; border-radius:3px; background:var(--accent); }
.lang { position:relative; }
.lang select { appearance:none; -webkit-appearance:none; border:1px solid var(--line); background:#fff;
        color:var(--fg); border-radius:8px; padding:7px 32px 7px 12px; font-size:14px; cursor:pointer; }
.lang::after { content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
        pointer-events:none; color:var(--muted); font-size:12px; }
h1 { font-size:28px; margin:18px 0 6px; }
h2 { font-size:19px; margin:34px 0 10px; }
h3 { font-size:16px; margin:22px 0 8px; }
p, li { color:#2b2f36; }
.muted { color:var(--muted); font-size:14px; }
ul { padding-left:20px; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.note { background:#f5f7fa; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:18px 0; }
.caps { text-transform:uppercase; font-size:14px; letter-spacing:.01em; }
footer.bottom { margin-top:48px; border-top:1px solid var(--line); padding-top:18px; font-size:13px; color:var(--muted); }

/* index card */
body.center { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#0f1115; color:#e8eaed; }
.card { width:min(440px,90vw); background:#161a20; border:1px solid #232a33; border-radius:16px; padding:36px 32px; }
.card .brand { color:#e8eaed; font-size:22px; margin-bottom:6px; }
.sub { color:#9aa0a6; font-size:14px; margin:0 0 26px; }
a.link { display:flex; justify-content:space-between; align-items:center; text-decoration:none;
         color:#e8eaed; padding:15px 16px; border:1px solid #232a33; border-radius:11px; margin-bottom:12px;
         transition:background .15s, border-color .15s; }
a.link:hover { background:#1c222b; border-color:#2f3947; text-decoration:none; }
a.link .arrow { color:#5f6b7a; }
.card .foot { margin-top:22px; color:#6b7280; font-size:12.5px; }
.card .lang select { background:#1c222b; border-color:#2f3947; color:#e8eaed; }