*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{scroll-behavior:smooth}
body{min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-bg);background-image:radial-gradient(circle at 85% 12%,rgba(212,168,67,.07),transparent 32%),repeating-linear-gradient(45deg,rgba(244,239,230,.015) 0 1px,transparent 1px 12px);color:var(--color-text);font-family:var(--font-body);font-size:1rem;line-height:1.75;-webkit-font-smoothing:antialiased}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
:where(a,button,input,select,textarea){-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--color-gold-bright);outline-offset:3px;border-radius:2px}
::selection{background:var(--color-gold);color:#0B1F1A}
main{display:block}
#main-content{flex:1;outline:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-headline);font-style:italic;font-weight:800;text-transform:uppercase;line-height:1.06;letter-spacing:.01em;color:var(--color-text);margin-bottom:.5em}
h1{font-size:clamp(2rem,5vw,4rem)}
h2{font-size:clamp(1.5rem,3vw,2.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.8rem)}
p{max-width:70ch}
a{transition:color .15s ease}
.hidden,[hidden],.is-hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{
  --color-bg:#0B1F1A;
  --color-bg-2:#12352D;
  --color-gold:#D4A843;
  --color-gold-bright:#EBC87A;
  --color-red:#E63946;
  --color-text:#F4EFE6;
  --color-text-dim:#8CA69A;
  --color-wine:#7A1E1E;
  --color-indigo:#4A3F63;
  --color-teal:#2A9D8F;
  --font-headline:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'Roboto Mono','SFMono-Regular',Consolas,monospace;
  --shadow-hard:6px 6px 0 rgba(0,0,0,.45);
  --shadow-soft:0 10px 24px rgba(0,0,0,.25);
  --border-w:2px;
  --border-w-strong:4px;
  --container:1200px;
  --gutter:clamp(16px,3vw,32px);
  --header-h:64px;
}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* 通用按钮 */
.btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--color-gold);padding:10px 18px;font-family:var(--font-headline);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;line-height:1;color:var(--color-gold);background:rgba(212,168,67,.08);box-shadow:3px 3px 0 rgba(0,0,0,.35);transition:background .15s,color .15s,transform .15s,box-shadow .15s}
.btn:hover{background:var(--color-gold);color:#0B1F1A;transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(0,0,0,.35)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.35)}
.btn-red{border-color:var(--color-red);color:var(--color-red);background:rgba(230,57,70,.08)}
.btn-red:hover{background:var(--color-red);color:var(--color-text)}
.btn-outline{border-color:var(--color-text-dim);color:var(--color-text);background:transparent}
.btn-outline:hover{border-color:var(--color-gold-bright);color:var(--color-gold-bright);background:rgba(212,168,67,.08)}

/* 通用标签 */
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;border:1px solid currentColor;line-height:1.2;background:rgba(11,31,26,.4)}
.tag-gold{color:var(--color-gold)}
.tag-red{color:var(--color-red)}
.tag-teal{color:var(--color-teal)}
.tag-indigo{color:#B9A3E3;border-color:var(--color-indigo);background:rgba(74,63,99,.2)}

/* 章节 */
.section{padding-block:clamp(32px,6vw,72px)}
.section-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px}
.section-index{font-family:var(--font-mono);font-size:.75rem;color:var(--color-red);letter-spacing:.1em;line-height:1;padding-bottom:8px}
.section-title{font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:.02em;margin:0}
.section-title .em,.em-gold{color:var(--color-gold)}
.section-head-line{flex:1;height:2px;background:linear-gradient(90deg,var(--color-gold),transparent)}
.lead{font-size:1.125rem;color:var(--color-text-dim)}

/* 网格 */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* 卡片 */
.card{background:var(--color-bg-2);border:2px solid rgba(212,168,67,.25);padding:18px;box-shadow:4px 4px 0 rgba(0,0,0,.3);transition:border-color .15s,transform .15s,box-shadow .15s;position:relative}
.card:hover{border-color:var(--color-gold);transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.card-title{font-family:var(--font-headline);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.3rem;color:var(--color-text)}
.card-meta{font-family:var(--font-mono);font-size:.78rem;color:var(--color-text-dim);letter-spacing:.04em}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--color-gold);font-family:var(--font-headline);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.95rem;letter-spacing:.04em}
.card-link:hover{color:var(--color-gold-bright)}

/* 收藏协议 */
[data-favorite]{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-headline);font-style:italic;font-weight:800;text-transform:uppercase;padding:6px 10px;border:2px solid var(--color-text-dim);background:rgba(244,239,230,.04);color:var(--color-text-dim);font-size:.8rem;line-height:1;transition:border-color .15s,color .15s,background .15s}
[data-favorite]:hover{border-color:var(--color-gold);color:var(--color-gold)}
[data-favorite].is-active{border-color:var(--color-gold);background:var(--color-gold);color:#0B1F1A}
[data-favorite-item].is-favorited{border-color:var(--color-gold)}

/* 面包屑 */
.breadcrumb{margin-block:16px 8px}
.breadcrumb-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:var(--color-text-dim)}
.breadcrumb-item a{color:var(--color-gold)}
.breadcrumb-item a:hover{color:var(--color-gold-bright)}
.breadcrumb-sep{color:var(--color-text-dim);font-family:var(--font-mono)}
.breadcrumb-current{color:var(--color-text)}

/* 媒体框 */
.media-frame{position:relative;aspect-ratio:16/9;background:var(--color-bg-2);border:2px solid rgba(212,168,67,.4);overflow:hidden}
.media-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,168,67,.08) 25%,transparent 25%,transparent 50%,rgba(230,57,70,.06) 50%,rgba(230,57,70,.06) 75%,transparent 75%);pointer-events:none}
.media-frame::after{content:"REPLAY";position:absolute;right:8px;bottom:8px;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;color:var(--color-gold);opacity:.85;pointer-events:none}
.media-frame img,.media-frame video,.media-frame>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* 框景 */
.corner-frame{position:relative}
.corner-frame::before,.corner-frame::after{content:"";position:absolute;width:28px;height:28px;border-color:var(--color-gold);border-style:solid;pointer-events:none}
.corner-frame::before{top:-8px;left:-8px;border-width:3px 0 0 3px}
.corner-frame::after{bottom:-8px;right:-8px;border-width:0 3px 3px 0}

/* 速度斜切 */
.diag{position:relative;overflow:hidden}
.diag::before{content:"";position:absolute;top:0;bottom:0;right:0;width:min(40%,320px);background:linear-gradient(105deg,transparent 0 55%,rgba(212,168,67,.09) 55%);pointer-events:none}
.speed-lines{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.speed-lines::before{content:"";position:absolute;top:40%;left:-20%;width:70%;height:2px;background:linear-gradient(90deg,transparent,var(--color-gold));transform:rotate(-8deg);opacity:.6}
.speed-lines::after{content:"";position:absolute;top:64%;left:20%;width:50%;height:1px;background:linear-gradient(90deg,transparent,var(--color-red));transform:rotate(14deg);opacity:.5}

/* 数据数字 */
.stat-number{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.6rem,4vw,2.8rem);color:var(--color-gold);line-height:1.1;font-variant-numeric:tabular-nums}
[data-filter-status]{font-family:var(--font-mono);font-size:.8rem;color:var(--color-text-dim);display:block;margin-top:12px}

/* 跳跃链接 */
.skip-link{position:fixed;top:8px;left:8px;z-index:2000;padding:10px 16px;background:var(--color-gold);color:#0B1F1A;font-weight:700;font-size:.9rem;transform:translateY(-240%);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0)}

/* 滚动进度 */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1500;background:linear-gradient(90deg,var(--color-red),var(--color-gold));transform:scaleX(0);transform-origin:left center;pointer-events:none}

/* 头部 */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(11,31,26,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--color-gold);box-shadow:0 2px 0 var(--color-wine)}
.site-header::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-red) 0 20%,var(--color-gold) 20% 40%,var(--color-teal) 40% 60%,transparent 60%);pointer-events:none}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h);padding-block:8px}
.brand-mark{display:flex;align-items:center;gap:10px;color:var(--color-gold);flex:none}
.brand-mark:hover .brand-logo-svg{transform:rotate(8deg)}
.brand-logo-svg{width:42px;height:42px;flex:none;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4));transition:transform .3s ease}
.brand-text{font-family:var(--font-headline);font-style:italic;font-weight:800;font-size:1.3rem;line-height:1.05;color:var(--color-text);letter-spacing:.01em}
.brand-sub{display:block;font-family:var(--font-body);font-style:normal;font-weight:400;text-transform:none;font-size:.65rem;letter-spacing:.08em;color:var(--color-text-dim);margin-top:2px}
.site-nav{display:block}
.nav-list{display:flex;flex-wrap:wrap;gap:2px}
.nav-link{display:block;padding:8px 12px;font-family:var(--font-headline);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;line-height:1;color:var(--color-text-dim);border:2px solid transparent;transition:color .15s,border-color .15s,background-color .15s}
.nav-link:hover{color:var(--color-gold-bright);background-color:rgba(212,168,67,.08)}
.nav-link[aria-current="page"]{color:var(--color-gold);border-color:var(--color-gold);background-color:rgba(212,168,67,.1);box-shadow:inset 0 -3px 0 var(--color-gold)}
.nav-toggle{display:none;align-items:center;gap:6px;border:2px solid var(--color-gold);padding:8px 10px;background:rgba(212,168,67,.08);color:var(--color-gold)}
.nav-toggle-box{display:grid;gap:4px;width:16px}
.nav-toggle-line{height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-toggle-text{font-family:var(--font-headline);font-style:italic;text-transform:uppercase;font-weight:700;line-height:1}

/* 头部功能区 */
.header-utility{display:flex;align-items:center;gap:10px;flex:none}
.utility-search{display:flex;align-items:center;border:2px solid var(--color-text-dim);background:var(--color-bg-2);transition:border-color .15s}
.utility-search:focus-within{border-color:var(--color-gold)}
.utility-search-input{background:transparent;border:0;padding:6px 8px;width:120px;color:var(--color-text);font-size:.875rem;outline:none}
.utility-search-input::placeholder{color:var(--color-text-dim)}
.utility-search-btn{padding:6px 10px;background:var(--color-gold);color:#0B1F1A;font-weight:700;font-size:.72rem;line-height:1;text-transform:uppercase;letter-spacing:.05em}
.utility-search-btn:hover{background:var(--color-gold-bright)}
.utility-fav-wrap{position:relative}
.utility-fav{display:flex;align-items:center;gap:6px;border:2px solid var(--color-gold);background:rgba(212,168,67,.08);color:var(--color-gold);padding:6px 10px;font-weight:700;line-height:1;font-size:.875rem;transition:background .15s,color .15s,border-color .15s}
.utility-fav:hover{border-color:var(--color-gold-bright);color:var(--color-gold-bright)}
.utility-fav.is-active{background:var(--color-gold);color:#0B1F1A}
.utility-fav-count{font-family:var(--font-mono);background:var(--color-red);color:var(--color-text);min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font-size:.72rem;padding-inline:4px}
.status-live{display:inline-flex;align-items:center;gap:6px;color:var(--color-text-dim);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;border:2px solid transparent}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--color-teal);box-shadow:0 0 0 0 rgba(42,157,143,.55);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(42,157,143,.55)}70%{box-shadow:0 0 0 9px rgba(42,157,143,0)}100%{box-shadow:0 0 0 0 rgba(42,157,143,0)}}

/* 收藏面板 */
.fav-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(280px,80vw);background:var(--color-bg-2);border:2px solid var(--color-gold);box-shadow:var(--shadow-hard);padding:14px;z-index:1200}
.fav-panel-title{font-family:var(--font-headline);font-style:italic;font-weight:800;text-transform:uppercase;color:var(--color-gold);font-size:1rem;letter-spacing:.06em;margin-bottom:10px;padding-bottom:6px;border-bottom:1px dashed rgba(212,168,67,.4)}
.fav-panel-list{display:grid;gap:6px}
.fav-panel-list li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 8px;background:rgba(11,31,26,.45);border:1px solid rgba(244,239,230,.12);font-size:.875rem;color:var(--color-text)}
.fav-panel-remove{color:var(--color-red);font-family:var(--font-mono);font-size:.85rem;font-weight:700;line-height:1;padding:4px;border:1px solid transparent}
.fav-panel-remove:hover{border-color:var(--color-red);background:rgba(230,57,70,.1)}
.fav-panel-empty{font-size:.8125rem;color:var(--color-text-dim)}

/* 页脚 */
.site-footer{background:var(--color-bg);border-top:4px solid var(--color-wine);position:relative;margin-top:80px}
.footer-accent-bar{height:6px;background:linear-gradient(90deg,var(--color-wine) 0 20%,var(--color-red) 20% 45%,var(--color-gold) 45% 65%,rgba(11,31,26,0) 65%)}
.footer-top{display:grid;grid-template-columns:1.5fr .8fr .7fr 1.2fr;gap:32px;padding:48px 0 40px}
.footer-brand{display:inline-block;font-family:var(--font-headline);font-style:italic;font-weight:800;font-size:1.6rem;color:var(--color-gold);letter-spacing:.02em}
.footer-brand:hover{color:var(--color-gold-bright)}
.footer-brand-sub{color:var(--color-text-dim);font-size:.75rem;letter-spacing:.1em;font-style:normal;font-weight:400;margin-left:4px}
.footer-about{margin-top:12px;font-size:.9rem;color:var(--color-text-dim);max-width:36em}
.footer-trust{margin-top:14px;font-size:.8rem;color:var(--color-text-dim);border-left:3px solid var(--color-gold);padding-left:10px;max-width:42em;opacity:.85}
.footer-heading{font-family:var(--font-headline);font-style:italic;font-weight:800;text-transform:uppercase;color:var(--color-gold);font-size:1.1rem;letter-spacing:.08em;margin-bottom:14px}
.footer-links{display:grid;gap:8px}
.footer-links a{color:var(--color-text-dim);font-size:.9rem;transition:color .15s,padding-left .15s}
.footer-links a:hover{color:var(--color-gold-bright);padding-left:4px}
.footer-contact-line{font-size:.875rem;color:var(--color-text-dim);margin-bottom:6px}
.footer-service-note{margin-top:12px;font-size:.75rem;color:var(--color-text-dim);opacity:.85;border-top:1px dashed rgba(140,166,154,.3);padding-top:8px}
.footer-bottom{border-top:1px solid rgba(140,166,154,.25);padding:16px 0}
.footer-bottom-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.footer-copyright,.footer-icp{font-size:.8rem;color:var(--color-text-dim);font-family:var(--font-mono)}

/* 返回顶部 */
.back-to-top{position:fixed;right:20px;bottom:20px;z-index:1000;display:flex;align-items:center;gap:6px;background:var(--color-gold);color:#0B1F1A;font-family:var(--font-headline);font-style:italic;font-weight:800;text-transform:uppercase;padding:10px 14px;border:2px solid var(--color-gold);box-shadow:var(--shadow-hard);font-size:.85rem;line-height:1;transition:background .15s,transform .15s}
.back-to-top:hover{background:var(--color-gold-bright);transform:translateY(-3px)}

/* 响应式 */
@media (max-width: 1240px){
  .nav-link{padding:8px 8px;font-size:.95rem}
  .utility-search-input{width:96px}
}
@media (max-width: 1024px){
  .brand-sub{display:none}
  .status-text{display:none}
  .nav-link{padding:8px 6px;font-size:.875rem}
  .utility-search-input{width:80px}
  .utility-fav-label{display:none}
}
@media (max-width: 900px){
  .header-inner{flex-wrap:wrap;justify-content:flex-start;row-gap:10px;padding-block:10px}
  .brand-mark{order:1}
  .nav-toggle{order:2;margin-left:auto;display:inline-flex}
  .header-utility{order:3;flex-basis:100%;justify-content:stretch;gap:8px}
  .utility-search{flex:1;min-width:0}
  .utility-search-input{width:100%}
  .utility-fav-label{display:inline}
  .site-nav{order:4;flex-basis:100%;display:none;max-height:70vh;overflow:auto;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .site-nav[data-open]{display:block}
  .nav-list{flex-direction:column;gap:0;padding:6px 0 12px}
  .nav-link{border:0;border-bottom:1px solid rgba(212,168,67,.15);border-radius:0;font-size:1rem;padding:13px 4px}
  .nav-link[aria-current="page"]{border-left:4px solid var(--color-gold);border-bottom:1px solid rgba(212,168,67,.15)}
}
@media (max-width: 640px){
  .footer-top{grid-template-columns:1fr;padding:32px 0 28px;gap:24px}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start}
  .back-to-top{right:12px;bottom:12px}
  .brand-text{font-size:1.1rem}
  .brand-logo-svg{width:36px;height:36px}
}

/* 无障碍动效 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .status-dot{animation:none}
  .card:hover{transform:none}
  .back-to-top:hover{transform:none}
}