:root{--ink:#2b1a0c;--paper:#f3e3c0;--paper2:#e8d2a2;--wood:#5c3a1e;--wood2:#3e2512;--wood3:#2a170a;--gold:#ffd34d;--gold2:#c98e1f;--rust:#8a4b12}
*{box-sizing:border-box}
html{background:var(--wood3)}
body{margin:0;color:var(--ink);font:16px/1.75 "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:var(--wood3) repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 64px),
  repeating-linear-gradient(0deg,#3a210f 0 8px,#331d0d 8px 16px)}
a{color:var(--rust)}
img{max-width:100%;height:auto;display:block}
.pix{image-rendering:pixelated}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
/* 像素描边：用阶梯阴影模拟 */
.frame{background:var(--paper);border:4px solid var(--wood3);
  box-shadow:0 0 0 4px var(--gold2),0 0 0 8px var(--wood3),8px 12px 0 8px rgba(0,0,0,.45)}
.wood{background:var(--wood);color:#f8e7c4;border:4px solid var(--wood3);
  box-shadow:inset 0 4px 0 #7a5030,inset 0 -4px 0 var(--wood2)}
header.top{position:sticky;top:0;z-index:9;background:var(--wood2);border-bottom:4px solid #000;box-shadow:0 4px 0 var(--gold2)}
header.top .wrap{display:flex;align-items:center;gap:12px;height:60px}
header.top img{width:36px;height:36px;border:2px solid #000}
header.top .name{font-weight:900;font-size:20px;color:var(--gold);letter-spacing:2px;text-shadow:2px 2px 0 #000;text-decoration:none}
header.top nav{margin-left:auto;display:flex;gap:4px}
header.top nav a{color:#f8e7c4;text-decoration:none;padding:6px 10px;font-size:15px}
header.top nav a:hover{background:var(--wood);outline:2px solid var(--gold2)}
.hero{padding:32px 0 8px}
.hero .frame{padding:0;overflow:hidden}
.hero .tag{margin:28px auto 0;text-align:center;color:#f8e7c4}
.hero h1{margin:0;font-size:clamp(30px,6vw,48px);color:var(--gold);letter-spacing:6px;text-shadow:4px 4px 0 #000}
.hero p{margin:6px 0 0;font-size:clamp(16px,2.6vw,20px)}
.btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:22px 0 6px}
.btn{display:inline-block;padding:10px 22px;font-weight:800;font-size:17px;text-decoration:none;color:var(--wood3);background:var(--gold);
  border:4px solid #000;box-shadow:inset -4px -4px 0 var(--gold2),inset 4px 4px 0 #fff3b0,4px 4px 0 #000}
.btn:hover{transform:translate(2px,2px);box-shadow:inset -4px -4px 0 var(--gold2),inset 4px 4px 0 #fff3b0,2px 2px 0 #000}
.btn.ghost{background:var(--paper2);box-shadow:inset -4px -4px 0 #c9ad78,inset 4px 4px 0 #fff8e6,4px 4px 0 #000}
.note{text-align:center;color:#d9c39a;font-size:14px}
section{padding:40px 0 8px}
h2.ribbon{display:table;margin:0 auto 26px;padding:6px 26px;font-size:24px;letter-spacing:4px;color:var(--gold);
  background:var(--wood);border:4px solid #000;box-shadow:inset 0 4px 0 #7a5030,inset 0 -4px 0 var(--wood2),4px 4px 0 #000;text-shadow:2px 2px 0 #000}
.intro{padding:26px 30px;font-size:17px}
.intro p{margin:0 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.card{padding:20px 20px 16px}
.card .ico{font-size:30px;line-height:1}
.card h3{margin:8px 0 4px;font-size:19px;color:var(--wood2)}
.card p{margin:0;font-size:15px}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.shots figure{margin:0;padding:8px 8px 4px}
.shots figcaption{text-align:center;font-size:14px;padding:4px 0 2px;color:var(--wood2);font-weight:700}
.dev{padding:24px 30px}
.dev p{margin:0 0 10px}
footer{margin-top:48px;padding:22px 0 30px;background:var(--wood2);border-top:4px solid #000;box-shadow:0 -4px 0 var(--gold2);color:#d9c39a;font-size:14px;text-align:center}
footer a{color:var(--gold)}
footer p{margin:4px 0}
/* 隐私政策页 */
.doc{padding:28px clamp(18px,4vw,44px) 30px;margin-top:32px}
.doc h1{margin:0 0 4px;font-size:clamp(22px,4vw,30px);color:var(--wood2)}
.doc .date{color:#7a5a36;margin:0 0 18px}
.doc h2{font-size:19px;margin:26px 0 8px;padding-left:10px;border-left:6px solid var(--gold2);color:var(--wood2)}
.doc a{word-break:break-all}
@media (max-width:600px){header.top nav a{padding:6px 6px;font-size:14px}header.top .name{font-size:17px;letter-spacing:1px}.intro,.dev{padding:20px}}