:root { --black:#050505; --panel:#101010; --line:#3a3732; --cream:#e7e0d6; --muted:#969087; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; background:var(--black); color:var(--cream); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; } button { font:inherit; } img { display:block; max-width:100%; }
.site-bar { position:fixed; z-index:30; top:0; left:0; right:0; height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:rgba(5,5,5,.93); border-bottom:1px solid rgba(231,224,214,.14); backdrop-filter:blur(10px); }
.brand-name { font-family:Georgia,serif; font-weight:bold; font-size:18px; letter-spacing:3px; }
.menu-button { color:var(--cream); background:none; border:0; font-size:11px; letter-spacing:2px; cursor:pointer; }
.menu-button span { padding-left:8px; font-size:18px; }
.site-menu { display:none; position:absolute; right:20px; top:62px; width:200px; padding:16px 20px; background:#0f0f0f; border:1px solid var(--line); }
.site-menu.open { display:grid; gap:18px; }.site-menu a { color:#c4bdb3; font-size:11px; letter-spacing:2px; }
.side-switcher { position:fixed; z-index:25; left:0; top:62px; bottom:0; display:flex; flex-direction:column; justify-content:center; width:145px; padding:0 20px; background:#050505; border-right:1px solid rgba(231,224,214,.18); }
.side-switcher a { display:flex; gap:9px; align-items:center; padding:11px 0; color:#8c877f; font-size:9px; letter-spacing:1.7px; transition:color .16s,padding-left .16s; }
.side-switcher a span { width:17px; color:#69645d; font-size:8px; }.side-switcher a:hover,.side-switcher a:focus,.side-switcher a.active { padding-left:7px; color:var(--cream); outline:0; }.side-switcher a.active span { color:#c2aa7e; }
.hero { position:relative; min-height:720px; height:100svh; overflow:hidden; background:#050505; }
.hero > img { width:100%; height:calc(100% - 62px); margin-top:62px; object-fit:cover; object-position:50% 0; }
.hero-portal { position:absolute; right:4%; bottom:6%; width:25%; height:11%; }
.frame { width:min(1280px,calc(100% - 64px)); margin:0 auto; }
.declaration { display:grid; grid-template-columns:180px minmax(0,1fr) 150px; gap:38px; padding:150px 0 135px; }.section-index,.micro { color:#999188; font-size:11px; letter-spacing:2px; }.micro { margin:0 0 19px; line-height:1.5; }
h1,h2,h3 { font-family:Georgia,"Songti SC",serif; font-weight:500; letter-spacing:-2px; } h1 { margin:0 0 30px; font-size:clamp(60px,8.4vw,138px); line-height:.83; } h2 { margin:0 0 27px; font-size:clamp(52px,6vw,94px); line-height:.9; }
.large-copy { max-width:510px; margin:0 0 24px; font-family:Georgia,"Songti SC",serif; font-size:clamp(27px,3.2vw,45px); line-height:1.25; }.body-copy { max-width:540px; color:#bcb5ab; font-size:16px; line-height:1.9; }
.declaration-actions { display:flex; gap:28px; align-items:center; margin-top:40px; }.action-link,.save-button,.contact-button { color:var(--cream); border:0; background:none; font-size:11px; letter-spacing:1.8px; cursor:pointer; }.save-button { padding:14px 18px; border:1px solid #716a60; }.save-button.saved { color:#111; background:var(--cream); }
.release-stamp { display:flex; flex-direction:column; gap:12px; align-self:end; padding-left:18px; border-left:1px solid var(--line); color:#807a72; font-size:10px; letter-spacing:2px; }
.system-section { display:grid; grid-template-columns:1fr 1fr; min-height:830px; background:#111; }.system-image { display:flex; align-items:center; justify-content:center; padding:80px; background:#020202; }.system-image img { width:min(650px,100%); }.system-copy { max-width:630px; padding:100px max(40px,7vw) 85px; }
.spec-list { margin:50px 0 44px; border-top:1px solid var(--line); }.spec-list div { display:grid; grid-template-columns:100px 1fr; gap:18px; padding:17px 0; border-bottom:1px solid var(--line); } dt { color:#837d75; font-size:10px; letter-spacing:1.6px; } dd { margin:0; font-size:13px; }
.size-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:15px 0; }.size { height:43px; color:#c8c0b7; background:transparent; border:1px solid #5c564f; cursor:pointer; }.size.active,.size:hover { color:#101010; background:var(--cream); }.size-control small { color:#8c857c; font-size:11px; }
.material-board { padding:130px 0; }.board-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(45px,8vw,120px); align-items:center; margin-top:70px; }.board-grid img { border:1px solid #34312d; }.board-grid h2 { font-size:clamp(43px,5vw,78px); }
.world { position:relative; min-height:900px; overflow:hidden; }.world > img { width:100%; height:900px; object-fit:cover; object-position:center 28%; }.world-copy { position:absolute; left:max(32px,calc((100% - 1280px)/2)); bottom:100px; width:min(530px,calc(100% - 64px)); padding:34px; background:rgba(5,5,5,.8); border-left:1px solid #807a72; }.world-copy p:last-child,.guide-list p { color:#aaa39a; line-height:1.8; }
.guide { padding:135px 0 120px; }.guide-head { margin:46px 0 70px; }.guide-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.guide-list article { padding:30px 28px 34px 0; border-bottom:1px solid var(--line); }.guide-list article+article { padding-left:28px; border-left:1px solid var(--line); }.guide-list h3 { margin:20px 0 12px; font-size:25px; }.guide-list span,.contact-line { color:#898278; font-size:11px; letter-spacing:2px; }.contact-line { display:flex; justify-content:space-between; margin-top:46px; padding:22px 0; border-bottom:1px solid var(--line); }
.toast { position:fixed; z-index:40; left:50%; bottom:28px; padding:13px 19px; color:#0b0b0b; background:var(--cream); transform:translate(-50%,140px); transition:transform .25s; }.toast.show { transform:translate(-50%,0); }
footer { display:flex; justify-content:space-between; gap:20px; padding:24px 32px; color:#7f7870; border-top:1px solid #2b2925; font-size:10px; letter-spacing:1.5px; }
@media (max-width:760px) { .side-switcher { display:none; }.site-bar { padding:0 19px; }.hero { min-height:590px; }.hero > img { object-position:56% 0; }.frame { width:calc(100% - 40px); }.declaration,.system-section,.board-grid,.guide-list { grid-template-columns:1fr; }.declaration { padding:92px 0 90px; gap:28px; }.release-stamp { display:grid; grid-template-columns:1fr 1fr; padding:18px 0 0; border-left:0; border-top:1px solid var(--line); }.system-image { padding:38px 25px; }.system-copy { padding:72px 20px; }.material-board,.guide { padding:87px 0; }.board-grid { margin-top:44px; }.world { min-height:730px; }.world > img { height:730px; }.world-copy { left:20px; bottom:40px; width:calc(100% - 40px); padding:24px; }.guide-list article,.guide-list article+article { padding:27px 0; border-left:0; }.contact-line,footer { flex-wrap:wrap; }.contact-line { gap:20px; }.hero-portal { width:47%; } }
/* =========================================
   SYRITHAL 响应式增强补丁（追加到文件末尾）
   ========================================= */

/* 1. 全局图片安全规则（防止任何图片撑破容器） */
img { max-width: 100%; height: auto; }

/* 2. 修复 .world 区域在小屏下的固定高度溢出 */
@media screen and (max-width: 760px) {
  .world { min-height: auto; }
  .world > img { 
    height: auto; 
    min-height: 480px; /* 保持视觉张力但允许自适应 */
    object-position: center 35%; 
  }
  
  /* 3. 压缩过大的垂直间距，避免小屏出现大片空白 */
  .declaration { padding: 60px 0 70px; }
  .material-board, .guide { padding: 60px 0; }
  .system-copy { padding: 50px 20px; }
  .board-grid { margin-top: 30px; gap: 30px; }
  
  /* 4. 标题流体字号下限保护（防止极小屏幕字太大换行难看） */
  h1 { font-size: clamp(36px, 9vw, 138px); }
  h2 { font-size: clamp(30px, 7vw, 94px); }
  .large-copy { font-size: clamp(20px, 4vw, 45px); }
}

/* 5. 适配新的 Footer + 备案号结构 */
footer {
  flex-direction: row; /* 桌面端保持横排 */
  align-items: center;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  gap: 20px;
}

.beian-footer a {
  color: #69645d;
  font-size: 10px;
  letter-spacing: 1.5px;
  transition: color 0.2s;
  white-space: nowrap;
}
.beian-footer a:hover { color: var(--cream); }

/* 6. 小屏 Footer 纵向堆叠 */
@media screen and (max-width: 760px) {
  footer {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
    gap: 16px;
  }
  .footer-main {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .beian-footer { margin-top: 4px; }
}