:root { --forest:#394b3c; --leaf:#718b61; --accent:#c9e97f; --ink:#334139; --mist:#f8f7f2; --line:#d8ded6; }
* { box-sizing:border-box; } body { display:grid; place-items:center; min-height:100vh; margin:0; padding:24px; min-width:320px; color:var(--ink); background:rgba(27,46,32,.42); font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif; }
body::before { content:""; position:fixed; top:0; right:0; width:min(38vw,360px); height:8px; background:var(--accent); }
main { position:relative; width:min(100%,760px); max-height:calc(100vh - 48px); overflow-y:auto; scrollbar-width:none; padding:36px; background:rgba(255,254,250,.98); border:1px solid var(--line); border-radius:22px; box-shadow:0 22px 70px rgba(12,30,18,.28); } main::-webkit-scrollbar { display:none; }
.close-button { position:absolute; top:14px; right:16px; width:34px; height:34px; border:0; border-radius:50%; color:var(--forest); background:rgba(216,222,214,.7); font-size:24px; line-height:1; cursor:pointer; } .close-button:hover { background:var(--accent); } a { color:var(--forest); }
.brand { margin:0; color:var(--leaf); font-size:12px; font-weight:800; letter-spacing:.14em; } h1 { margin:14px 42px 28px 0; color:var(--forest); font-family:"Noto Serif SC","Songti SC",serif; font-size:clamp(30px,7vw,44px); } h2 { margin:30px 0 8px; font-size:19px; } p,li { line-height:1.85; color:#59695f; } ul { padding-left:1.35em; } footer { margin-top:34px; padding-top:18px; border-top:1px solid var(--line); color:#789183; font-size:13px; }