:root{--red:#a3221b;--red2:#7a1712;--black:#141010;--ink:#231b18;--gold:#c9a24a;--gold2:#e8cf8a;--paper:#f6efe2;--muted:#8d7b6a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--paper);font:16px/1.75 "Noto Serif SC","Songti SC","STSong","Source Han Serif SC",serif;-webkit-text-size-adjust:100%}
a{color:var(--gold2)}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
header.hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(circle at 50% 35%,#3a0f0b 0,#141010 70%);padding:24px 16px}
.hero h1{font-size:2rem;letter-spacing:.2em;margin:.4em 0 .1em;color:var(--gold2)}
.hero p.sub{color:#e9d9c0;margin:.2em 0}
.hero canvas{width:min(72vw,320px);height:min(72vw,320px)}
.badge{display:inline-block;font-size:.72rem;border:1px solid var(--gold);color:var(--gold2);border-radius:99px;padding:1px 10px;margin:2px}
nav.toc{position:sticky;top:0;z-index:9;background:rgba(20,16,16,.94);border-bottom:1px solid #3b2b22;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
nav.toc a{display:inline-block;padding:10px 12px;color:#e9d9c0;text-decoration:none;font-size:.9rem}
nav.toc a:hover{color:var(--gold2)}
section{padding:36px 0;border-bottom:1px solid #2c211c}
h2{color:var(--gold2);font-size:1.45rem;letter-spacing:.08em;margin:.2em 0 .6em}
h2 small{display:block;font-size:.8rem;color:var(--muted);letter-spacing:0}
h3{color:#f1d9a0;margin:1em 0 .3em;font-size:1.12rem}
.poem{color:#f0c9a0;font-style:italic;margin:.2em 0}
.formula{font-family:"Cambria Math","STIX Two Math","Times New Roman",serif;background:#22150f;border-left:3px solid var(--gold);padding:6px 10px;margin:6px 0;border-radius:4px;overflow-x:auto;white-space:normal;word-break:break-word}
.card{background:linear-gradient(160deg,#2a1210,#191111);border:1px solid #4a2c1f;border-radius:14px;padding:14px;margin:16px 0;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.card .fig{display:flex;justify-content:center;margin:6px 0}
.card .fig svg,.card .fig canvas{width:100%;max-width:340px;height:auto}
.meta{font-size:.88rem;color:#d8c6ad}
.meta b{color:var(--gold2)}
.tag-ai{display:block;text-align:center;font-size:.72rem;color:#c8a98a;margin-top:2px}
.todo{color:#ffb37a;font-weight:bold}
.note{font-size:.85rem;color:#bfae98}
.lab{background:#1d1412;border:1px solid #47301f;border-radius:14px;padding:14px;margin:16px 0}
.ctrl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.ctrl label{font-size:.9rem;display:flex;align-items:center;gap:6px;flex:1 1 220px}
.ctrl input[type=range]{flex:1;accent-color:var(--red)}
select,button,input[type=number]{font:inherit;font-size:.9rem;background:#2d1a14;color:var(--paper);border:1px solid var(--gold);border-radius:8px;padding:5px 10px}
button{cursor:pointer;background:linear-gradient(#a3221b,#7a1712)}
button.ghost{background:#2d1a14}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.btns button.on{background:var(--gold);color:#1a0f0b}
.out{font-size:.92rem;color:#f3e2c4;background:#140d0b;border-radius:8px;padding:8px 10px;margin-top:6px}
canvas.big,svg.big{width:100%;height:auto;display:block;background:#0f0b0a;border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:.86rem}
td,th{border-bottom:1px solid #3a2a20;padding:5px 4px;text-align:left}
th{color:var(--gold2)}
.quiz .q{margin:12px 0;padding:10px;border-radius:10px;background:#201513}
.quiz .opt{display:block;width:100%;text-align:left;margin:4px 0;background:#2d1a14}
.quiz .opt.right{background:#2f5a2a}.quiz .opt.wrong{background:#6b1d17}
.disclaimer{background:#2a1a10;border:1px dashed var(--gold);padding:12px;border-radius:10px;font-size:.88rem}
ol.src li{font-size:.85rem;margin:4px 0;word-break:break-all}
footer{padding:30px 0 60px;text-align:center;color:var(--muted);font-size:.8rem}
.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:middle;margin-right:4px;border:1px solid #0004}
.grid2{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}.hero h1{font-size:2.6rem}}
.svgbox svg{width:100%;height:auto;display:block;border-radius:10px}