docs: explain stylesheet ownership, responsive rules and display boundaries

app/assets/styles/official-site.pBD-PXD7.css

@@ -1,3 +1,5 @@
+/* 公开官网布局：导航、首屏、产品卡片、基础设施展示与联系页脚。 */
+/* 导入方：app/layouts/official-site.vue。 */
 .official-site {
   min-height: 100vh;
   color: var(--p-text-color, #334155);
@@ -9,6 +11,7 @@
   color: inherit;
   text-decoration: none;
 }
+/* 滚动时保持此区域可见；定位偏移需与页面固定顶栏及父级滚动容器一起核对。 */
 .official-header {
   z-index: 20;
   border-bottom: 1px solid var(--console-panel-border, #e2e8f0);
@@ -291,6 +294,7 @@
 .official-button i {
   font-size: 0.8rem;
 }
+/* 首屏装饰性网络图由CSS元素组成，与真实资源监控数据无关。 */
 .official-hero-visual {
   border: 1px solid
     color-mix(in srgb, var(--official-primary) 17%, var(--console-panel-border));
@@ -523,6 +527,7 @@
   color: var(--official-primary);
   font-size: 0.72rem;
 }
+/* 官网产品卡片网格，不改变商品接口或库存判定。 */
 .official-product-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
@@ -893,6 +898,7 @@
   flex-shrink: 0;
   justify-content: flex-end;
 }
+/* 官网联系信息和页脚链接区域，与会员控制台页脚分别维护。 */
 .official-footer {
   border-top: 1px solid var(--console-panel-border);
   background: var(--p-content-background);
@@ -988,11 +994,13 @@
 .official-footer-bottom a:hover {
   color: var(--official-primary);
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .official-site a:focus-visible,
 .official-site button:focus-visible {
   outline: 2px solid var(--official-primary);
   outline-offset: 3px;
 }
+/* 视口条件 (width<=900px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=900px) {
   .official-header-inner {
     gap: 18px;
@@ -1024,6 +1032,7 @@
     grid-column: 2;
   }
 }
+/* 视口条件 (width<=680px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=680px) {
   .official-footer-bottom,
   .official-footer-main,
@@ -1168,6 +1177,7 @@
     padding: 12px 0;
   }
 }
+/* 尊重减少动态效果偏好：保留状态信息，降低或取消非必要动画。 */
 @media (prefers-reduced-motion: reduce) {
   .official-site *,
   .official-site :after,