:root {
    --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
    --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    --base-fontsize: 1.15rem;
    --header-scale: 1.25;
    --line-height: 1.618;
    
    /* 主题颜色 */
    --bg: #fff;
    --accent-bg: #f5f7ff;
    --text: #212121;
    --text-light: #585858;
    --border: #d8dae1;
    --accent: #0d47a1;
    --accent-light: #90caf9;
    --code: #d81b60;
    --preformatted: #444;
    --marked: #ffdd33;
    --disabled: #efefef;
    --link-color: #1abc9c;
}

/* 2. 基础重置 */
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    margin: 0;
    padding: 0;
}
hr {
    border: none;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 0.8em;

}
/* 3. 布局结构 */
body {
    display: grid;
    min-height: 100vh;
    grid-template-areas: 'header header header' 'nav main aside' 'footer footer footer';
    grid-template-columns: minmax(10%, 1fr) minmax(50%, 50rem) minmax(10%, 1fr);
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 1.125rem;
    line-height: 1.7rem;
    overflow-x: hidden;
    background-attachment: fixed;
}

/* 4. 主要区块样式 */
header {
    grid-area: header;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #0cf;
    text-shadow: 1rem 1rem 1rem #000c;
    font-weight: 500;
    background-position: center;
    background-size: cover;
}

main {
    grid-area: main;
    margin: 0 auto;
    padding-top: 0;
    max-width: 90rem;
    min-height: calc(100vh - 8rem);
    width: 100%;
    background-color: #0008;
    color: white;
    border-radius: 0 0 1rem 1rem;
}

article {
    margin: 1rem;
}

/* 5. 导航和侧边栏共同样式 */
nav, aside {
    margin: 0 1rem 0 0;
    font-size: 1rem;
    line-height: 2;
    display: grid;
    justify-content: end;
    align-items: start;
}

nav { grid-area: nav; }
aside { grid-area: aside; }

nav > div, aside > div {
    position: sticky;
    top: 0;
    padding: 1rem;
    border-radius: 1rem;
    background-color: #0008;
    color: #0cf;
    font-weight: bold;
    font-size: 1rem;
    display: grid;
}

nav *, aside * {
    color: #0cf;
}

/* 6. 页脚样式 */
footer {
    grid-area: footer;
    display: grid;
    height: 3rem;
    background-color: #0004;
    color: white;
    font-size: 0.9rem;
    justify-content: center;
    align-items: center;
}

/* 7. 排版样式 */
h1, h2, h3, h4, h5, h6 {
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    color: #0cf;
    line-height: 1.35;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}

h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5, h6 { font-size: 1.2em; }

/* 8. 链接样式 */
a {
    color: #0cf ;
    text-decoration: none;
    border-bottom: 1px solid var(--link-color);
    display: inline-block;
    margin: 0.5rem;
    padding: 0 0.25rem;
    transition: 0.4s;
}

a:hover {
    border-bottom-color: #555;
    color: #555;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, nav a, aside a {
    border: none;
    margin: 0;
    padding: 0;
}

/* 9. 文本样式 */
p, pre, ul, ol, dl, blockquote {
    margin-bottom: 1.2em;
    color: white;
}

blockquote {
    position: relative;
    color: #999;
    border-left: 1px solid #1abc9c;
    padding: 0.5rem;
    margin: 0.5rem;
    background-color: #f4f4f480;
}

blockquote p {
    margin: 0;
    padding: 0;
}

strong, b {
    font-weight: bold;
    color: #fff;
}

/* 10. 代码样式 */
pre, code, pre tt {
    font-family: Courier, 'Courier New', monospace;
}

pre {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 1em 1.5em;
    display: block;
    -webkit-overflow-scrolling: touch;
}

/* 11. 列表样式 */
ul {
    margin-left: 1.3em;
    list-style: disc;
}

ol {
    list-style: decimal;
    margin-left: 1.9em;
}

/* 12. 响应式设计 */
@media screen and (max-width: 1000px) {
    body {
        grid-template-areas: 'header' 'nav' 'main' 'footer';
        grid-template-columns: 100%;
    }
    
    nav {
        padding: 1rem 0;
        position: static;
        justify-content: start;
        align-items: end;
    }
    
    nav > div {
        margin: 0;
        padding: 1rem;
    }
}

/* 13. 工具类 */
[v-cloak] {
    display: none;
}

.temp-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1em;
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
    border-radius: .25rem;
    z-index: 1000;
}

.table-of-contents {
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.table-of-contents .nav-link {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0.3rem 0;
    transition: color 0.2s;
}

.table-of-contents .nav-link:hover {
    color: #0cf;
}