:root {
    color-scheme: light dark;
    --paper: #F5F6F7;
    --surface: #FFFFFF;
    --ink: #20242A;
    --ink-2: #5C6470;
    --line: #E7E9EC;
    --knot: #BE3D2A;
    --knot-deep: #A63423;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #17191C;
        --surface: #1E2125;
        --ink: #E4E6E9;
        --ink-2: #9AA1AB;
        --line: #2C3036;
        --knot: #D65A45;
        --knot-deep: #E06B57;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
                 "Microsoft YaHei", sans-serif;
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px }

/* ── 页头 ── */
header { border-bottom: 1px solid var(--line) }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px }
.brand { display: flex; align-items: center; color: var(--knot) }
.brand svg.word { height: 21px; display: block }

.btn {
    display: inline-block; background: var(--knot); color: #fff; text-decoration: none;
    font-size: 15px; font-weight: 600; padding: 9px 18px; border-radius: 9px;
    transition: background .15s;
}
.btn:hover { background: var(--knot-deep) }
.btn.big { font-size: 17px; padding: 13px 28px; border-radius: 11px }

img { max-width: 100%; height: auto; display: block }
a { color: var(--knot) }

/* ── 页脚 ── */
footer { border-top: 1px solid var(--line); padding: 36px 0 56px }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center }
footer a, footer span { color: var(--ink-2); font-size: 14px; text-decoration: none }
footer a:hover { color: var(--ink) }

@media (max-width: 760px) {
    body { font-size: 16px }
}