:root {
    --ink: #141210;
    --paper: #f4efe6;
    --bronze: #a65e2e;
    --bronze-soft: #c4a07a;
    --line: rgba(20, 18, 16, 0.1);
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "PMingLiU", "SimSun", serif;
    -webkit-font-smoothing: antialiased;
}
.home {
    max-width: 500px;
    margin: 0 auto;
    min-height: calc(100vh - 64px);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(166, 94, 46, 0.07), transparent 36%),
        var(--paper);
}
.hero {
    position: relative;
    background: var(--ink);
    color: #f6f1e8;
    padding: 16px 22px 36px;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -56px;
    top: -48px;
    border: 1px solid rgba(196, 160, 122, 0.28);
    border-radius: 50%;
}
.hero::after {
    content: "";
    position: absolute;
    width: 104px;
    height: 104px;
    right: -12px;
    top: -4px;
    border: 1px solid rgba(196, 160, 122, 0.18);
    border-radius: 50%;
}
.eyebrow {
    position: relative;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.42em;
    color: var(--bronze-soft);
}
.hero h1 {
    position: relative;
    margin: 8px 0 0;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.28em;
    line-height: 1.2;
}
.lead {
    position: relative;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: 0.08em;
    color: rgba(246, 241, 232, 0.78);
}
.plate-wrap {
    position: relative;
    margin: -22px auto 0;
    width: 252px;
    background: #fbf8f3;
    border: 1px solid rgba(20, 18, 16, 0.06);
    box-shadow: 0 14px 32px rgba(20, 18, 16, 0.1);
    padding: 12px 12px 10px;
}
.plate-wrap svg {
    width: 100%;
    height: auto;
    display: block;
}
.plate-wrap text { font-family: "Songti SC", "STSong", "SimSun", serif; }
.plate-note {
    margin: 6px 0 0;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.34em;
    color: #8a8176;
}
.chapters { padding: 12px 24px 0; }
.chapter {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.chapter:last-child { border-bottom: 1px solid var(--line); }
.chapter b {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--bronze);
}
.chapter h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.16em;
}
.chapter p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #5c564e;
}
.enter-wrap { padding: 16px 24px 8px; }
.enter {
    display: block;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background: var(--ink);
    color: #f6f1e8;
    text-decoration: none;
    letter-spacing: 0.46em;
    font-size: 14px;
}
.enter:active { background: #2a2420; }
.closing {
    margin: 0;
    padding: 0 24px 16px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.38em;
    color: #9a9186;
}
.cell-num { font-size: 11px; fill: #a89888; }
.cell-name { font-size: 18px; fill: #141210; }
.cell-center { fill: #a65e2e; font-size: 20px; }