:root {
    --accent:     #5a7abf;
    --heading:    #2c3e50;
    --text:       #333;
    --subtle:     #666;
    --bg:         #fff;
    --sidebar-bg: #f5f5f7;
    --border:     #e0e0e0;
    --code-bg:    #f0f0f0;
    --tip-bg:     #eef4ff;
    --tip-border: #5a7abf;
    --warn-bg:    #fff8ee;
    --warn-border:#e0a020;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent:     #7fa0d8;
        --heading:    #d0d8e8;
        --text:       #ddd;
        --subtle:     #999;
        --bg:         #1e1e1e;
        --sidebar-bg: #252525;
        --border:     #3a3a3a;
        --code-bg:    #2a2a2a;
        --tip-bg:     #1e2a3a;
        --tip-border: #7fa0d8;
        --warn-bg:    #2a2010;
        --warn-border:#c08020;
    }
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
}




article {
    padding: 32px 40px;
    max-width: 820px;
    margin: 0 auto;
}

h1 { font-size: 26px; color: var(--heading); margin-bottom: 8px; font-weight: 700; }
h2 { font-size: 18px; color: var(--heading); margin: 32px 0 10px; font-weight: 600;
     border-bottom: 1px solid var(--border); padding-bottom: 6px; }
h3 { font-size: 15px; color: var(--heading); margin: 22px 0 8px; font-weight: 600; }

p  { margin-bottom: 12px; }
ul, ol { margin: 10px 0 12px 24px; }
li { margin-bottom: 4px; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.subtitle {
    font-size: 15px;
    color: var(--subtle);
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}

kbd {
    display: inline-block;
    padding: 1px 6px;
    font-size: 12px;
    font-family: -apple-system, monospace;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
}

.tip {
    background: var(--tip-bg);
    border-left: 3px solid var(--tip-border);
    padding: 10px 14px;
    margin: 16px 0;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
}

.warn {
    background: var(--warn-bg);
    border-left: 3px solid var(--warn-border);
    padding: 10px 14px;
    margin: 16px 0;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 20px;
    font-size: 13px;
}
th {
    text-align: left;
    padding: 7px 10px;
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    font-weight: 600;
}
td {
    padding: 7px 10px;
    border: 1px solid var(--border);
    vertical-align: top;
}

.section-intro {
    font-size: 15px;
    color: var(--subtle);
    margin-bottom: 24px;
}