:root{--bg:#FAF9F5;--fg:#21201C;--mut:#6b6860;--card:#ffffff;--line:rgba(33,32,28,.12);--acc:#7a3fd0}
html.night{--bg:#21201C;--fg:#FAF9F5;--mut:#b5b1a6;--card:#2b2a25;--line:rgba(250,249,245,.14);--acc:#c9a7ff}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);transition:background .4s,color .4s}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;line-height:1.75;font-size:17px}
a{color:var(--acc)}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:20px;padding:14px 5vw;background:var(--bg);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787,#5BCEFA,#F5A9B8,#FFFFFF)}
.logo{font-weight:900;font-size:22px;text-decoration:none;color:var(--fg);letter-spacing:-.5px}
.logo span{color:var(--mut);font-weight:600}
nav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-left:auto}
nav a{color:var(--mut);text-decoration:none;font-size:15px}
nav a:hover,nav a.on{color:var(--fg);font-weight:600}
.menu{display:none;margin-left:auto;background:none;border:none;color:var(--fg);font-size:22px;cursor:pointer}
.theme-btn{width:40px;height:40px;border:none;border-radius:50%;background:var(--line);color:var(--fg);font-size:18px;cursor:pointer;flex:none}
main{max-width:900px;margin:0 auto;padding:40px 5vw 60px}
h1{font-size:clamp(30px,5vw,46px);line-height:1.2;margin:.3em 0 .4em;letter-spacing:-.5px}
h2{font-size:24px;margin:1.8em 0 .5em}
.lead{font-size:19px;color:var(--mut)}
.rainbow{background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787,#E40303);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:flow 8s linear infinite}
@keyframes flow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.hero{padding:30px 0 10px}.hero h1{font-size:clamp(40px,8vw,84px);font-weight:900}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:30px 0}
.card,.box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;text-decoration:none;color:var(--fg);transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.card h3{margin:0 0 6px}.card p,.box p{margin:0;color:var(--mut);font-size:15.5px}
.box h2{margin:0 0 8px;font-size:20px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.facts ul,main ul{padding-left:1.2em}.facts li{margin:.4em 0}
.t{width:100%;border-collapse:collapse;margin:10px 0;font-size:15.5px}
.t th,.t td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.t th{color:var(--mut);font-weight:600}
.search{width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:16px;margin:10px 0 20px}
.gloss{margin:0}.term{padding:14px 0;border-bottom:1px solid var(--line)}
.term dt{font-weight:700}.term dd{margin:4px 0 0;color:var(--mut)}
.timeline{list-style:none;padding:0;border-left:3px solid var(--line);margin:20px 0 20px 10px}
.timeline li{position:relative;padding:0 0 18px 24px}
.timeline li::before{content:"";position:absolute;left:-9px;top:8px;width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,#5BCEFA,#F5A9B8)}
.timeline .y{font-weight:800;font-size:18px}.timeline p{margin:2px 0 0;color:var(--mut)}
.warn{background:rgba(228,3,3,.08);border-left:4px solid #E40303;padding:12px 16px;border-radius:8px}
.warn.big{font-weight:600}
.note{color:var(--mut);font-size:14px}
.links li{margin:.4em 0}
.refs{margin-top:50px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--mut)}
.refs h2{font-size:16px;margin:0 0 8px}
footer{max-width:900px;margin:0 auto;padding:20px 5vw 40px;color:var(--mut);font-size:14px}
footer .bar{height:4px;border-radius:2px;margin-bottom:16px;background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787)}
@media (max-width:760px){.menu{display:block}nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;padding:12px 5vw;border-bottom:1px solid var(--line)}body.open nav{display:flex}}