/* 华夏甲胄志同款：黑白灰、细线条、中文衬线标题。只调整视觉主题，不改变原站区块结构。 */
:root { --black:#050505; --ink:#111; --muted:#777; --line:#e7e7e7; --paper:#fff; --soft:#f7f7f7; --serif:"Noto Serif SC","Songti SC","SimSun",serif; --sans:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--serif); }
button, input, select, textarea { font:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid #777; outline-offset:4px; }
button { cursor:pointer; } button:disabled { cursor:not-allowed; }
#hero { background:var(--black); }
#hero > div:first-child > img { filter:none; opacity:.76; }
#hero button:first-child { background:#fff; color:#111; border:1px solid #fff; }
#hero button:first-child:hover { background:#e7e7e7; }
nav img, footer img { filter:grayscale(1); }
#timeline { background:var(--black); }
#timeline [class*="text-[#555555]"], #timeline [class*="text-[#666666]"] { color:#bdbdbd; }
#timeline [class*="bg-[#555555]"] { background-color:#777; }
#timeline [class*="border-[#555555]"] { border-color:#aaa; }
[class~="bg-amber-50"], [class~="hover:bg-amber-50"]:hover, [class~="hover:bg-amber-50/30"]:hover { background-color:#f1f1f1!important; }
[class~="bg-amber-100"], [class~="bg-green-100"] { background-color:#eee!important; }
[class*="text-green-600"] { color:#555!important; }
.demo-note { margin:18px auto 0; max-width:660px; font-family:var(--sans); font-size:12px; line-height:1.8; color:#888; }
#hero .demo-note { color:#ccc; bottom:96px; z-index:10; margin:0; }
.annotation-point { border:0; padding:0; background:transparent; text-align:left; }
.reference-armor-image { object-position:center 35%; }
.overview-armor-image, .timeline-armor-image { object-position:center 35%; }
.annotation-point:focus .annotation-label { opacity:1; }
.local-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:#0008; backdrop-filter:blur(5px); }
.local-modal article { width:min(100%,520px); background:#fff; padding:32px; border-radius:16px; box-shadow:0 12px 48px #0004; }
.local-modal h2 { font-size:24px; margin-bottom:16px; font-weight:700; }
.local-modal p { font-size:14px; line-height:1.9; color:#666; }
.local-modal button { margin-top:24px; background:#111; color:#fff; padding:10px 24px; border-radius:8px; }
@media(max-width:600px) {
  #hero { min-height:max(100svh,760px); padding-bottom:120px; }
  #hero h1 { font-size:44px; }
  #hero p[class*="tracking-"] { font-size:13px; letter-spacing:.16em; }
  #upload [class*="p-12"] { padding:32px 20px; }
  #upload > div > div:last-child { grid-template-columns:1fr; }
  #upload > div > div:last-child > div { padding:12px 16px; }
  #result h3 { font-size:25px; }
  #result [class*="grid-cols-2"] { gap:8px; }
  #result button { font-size:12px; }
  form [class*="grid-cols-2"] { grid-template-columns:1fr; }
  #timeline [class*="max-w-7xl"] { padding-left:20px; padding-right:20px; }
  #timeline [class*="text-3xl"] { font-size:25px; }
  .annotation-label { left:auto!important; right:24px; }
}
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} *, *::before, *::after { animation:none!important; transition:none!important; } }