:root{
  --bg:#F5EFE0;
  --ink:#2A1E12;
  --accent:#E8491D;
  --blue:#1E4B7A;
  --white:#F8F8F8;
  --gold:#D3A047;
  --line:#D1C9B8;
  --dark-red:#8C2A1B;
  --navy:#162333;
  --olive:#7A6B4D;
  --max-w:1280px;
  --font-head:"Helvetica Neue","Montserrat","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Source Serif Pro","Noto Serif SC","Songti SC","Georgia",serif;
  --font-mono:"SFMono-Regular","Roboto Mono","IBM Plex Mono","Cascadia Code",monospace;
  --font-accent:"Noto Serif Tibetan","Tibetan Machine Uni","Kailasa","Source Serif Pro",serif;
  --shadow-sm:0 2px 8px rgba(42,30,18,.08);
  --shadow-lg:0 18px 40px rgba(42,30,18,.16);
  --duration:.24s;
}

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.8;
}

#main-content{
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
}

main:focus{
  outline:none;
}

img,
svg{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
  transition:color var(--duration);
}

a:hover{
  color:var(--accent);
}

button{
  font-family:inherit;
}

ul,
ol{
  list-style:none;
}

[hidden]{
  display:none !important;
}

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.skip-link{
  position:fixed;
  top:-100px;
  left:1.25rem;
  z-index:200;
  background:var(--accent);
  color:var(--white);
  padding:.75rem 1.25rem;
  font-family:var(--font-head);
  font-weight:800;
  font-size:.9rem;
  transform:skewX(-6deg);
  transition:top .2s;
}

.skip-link:focus{
  top:1rem;
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(245,239,224,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}

.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  z-index:1;
  background:linear-gradient(115deg, var(--accent) 0 18%, var(--gold) 18% 32%, var(--blue) 32% 56%, var(--dark-red) 56% 76%, var(--ink) 76%);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:1.25rem;
  min-height:72px;
  gap:1rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  flex:0 0 auto;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:-.06em;
  border-bottom:3px solid var(--accent);
  transform:skewX(-6deg);
}

.brand-name{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.brand-cn{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.1rem;
  letter-spacing:.02em;
}

.brand-en{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--olive);
  margin-top:.2rem;
}

.site-nav{
  flex:1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.nav-list{
  display:flex;
  align-items:center;
  gap:clamp(.25rem,1.4vw,1.6rem);
}

.nav-link{
  position:relative;
  padding:.5rem .2rem;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.02em;
  color:var(--ink);
  transition:color var(--duration);
}

.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:3px;
  background:var(--accent);
  transform:skewX(-20deg) scaleX(0);
  transform-origin:left;
  transition:transform var(--duration);
}

.nav-link:hover{
  color:var(--accent);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after{
  transform:skewX(-20deg) scaleX(1);
}

.nav-link[aria-current="page"]{
  color:var(--accent);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:0 0 auto;
}

.view-toggle,
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border:1px solid var(--ink);
  background:var(--white);
  color:var(--ink);
  transition:background var(--duration), color var(--duration), border-color var(--duration);
}

.view-toggle:hover,
.nav-toggle:hover{
  background:var(--ink);
  color:var(--white);
}

.view-toggle-icon{
  display:block;
  position:relative;
  width:18px;
  height:14px;
  border:2px solid currentColor;
  border-radius:2px;
}

.view-toggle-icon::after{
  content:"";
  position:absolute;
  top:-3px;
  bottom:-3px;
  left:50%;
  border-left:2px solid currentColor;
  transform:translateX(-50%);
}

.view-toggle[aria-pressed="true"]{
  background:var(--navy);
  color:var(--white);
  border-color:var(--navy);
}

.view-toggle[aria-pressed="true"] .view-toggle-icon{
  border-color:var(--gold);
}

.view-toggle[aria-pressed="true"] .view-toggle-icon::after{
  border-left-color:var(--gold);
}

.nav-toggle{
  display:none;
}

.nav-toggle-bar{
  display:block;
  width:20px;
  height:2px;
  background:currentColor;
  transition:transform var(--duration), opacity var(--duration);
}

.nav-toggle-bar + .nav-toggle-bar{
  margin-top:4px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.site-progress{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:4px;
  z-index:2;
  background:transparent;
  pointer-events:none;
}

.site-progress-bar{
  display:block;
  width:100%;
  height:100%;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left center;
}

.site-footer{
  position:relative;
  margin-top:auto;
  overflow:hidden;
  background:var(--navy);
  color:rgba(248,248,248,.82);
}

.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  z-index:1;
  background:linear-gradient(115deg, var(--accent) 0 20%, var(--gold) 20% 38%, var(--blue) 38% 62%, var(--dark-red) 62% 82%, transparent 82%);
}

.footer-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr;
  gap:2.5rem;
  padding:4rem 0 2.5rem;
}

.site-footer .brand{
  color:var(--white);
}

.site-footer .brand-mark{
  background:var(--bg);
  color:var(--ink);
}

.site-footer .brand-en{
  color:var(--gold);
}

.footer-brief{
  max-width:36ch;
  margin-top:1rem;
  font-size:.95rem;
  line-height:1.9;
}

.trust-statement{
  margin-top:1rem;
  padding:.85rem 1rem;
  border-left:3px solid var(--gold);
  background:rgba(211,160,71,.1);
  font-size:.85rem;
  color:rgba(248,248,248,.75);
}

.footer-title{
  margin-bottom:1.1rem;
  font-family:var(--font-head);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}

.footer-links ul,
.footer-contact ul{
  display:grid;
  gap:.65rem;
}

.footer-links a{
  font-family:var(--font-head);
  font-weight:600;
  font-size:.9rem;
  color:rgba(248,248,248,.8);
  transition:color var(--duration), letter-spacing var(--duration);
}

.footer-links a:hover{
  color:var(--gold);
  letter-spacing:.02em;
}

.footer-contact li{
  position:relative;
  padding-left:1.1rem;
  font-size:.9rem;
  color:rgba(248,248,248,.8);
}

.footer-contact li::before{
  content:"//";
  position:absolute;
  left:0;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--accent);
}

.footer-note{
  margin-top:1.2rem;
  font-size:.78rem;
  line-height:1.7;
  color:rgba(248,248,248,.55);
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.75rem;
  border-top:1px solid rgba(248,248,248,.14);
  padding:1.25rem 0;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:rgba(248,248,248,.58);
}

.l-container{
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:1.25rem;
}

.page-main{
  width:100%;
}

.section{
  position:relative;
  padding:clamp(4rem,8vw,7.5rem) 0;
}

.section--tight{
  padding-block:clamp(2.5rem,5vw,4.5rem);
}

.chapter{
  position:relative;
}

.chapter-num{
  display:block;
  margin-bottom:.5rem;
  font-family:var(--font-mono);
  font-size:clamp(3.2rem,9vw,7rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.08em;
  color:rgba(232,73,29,.18);
}

.section-kicker{
  display:block;
  margin-bottom:.75rem;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
}

.section-title{
  margin-bottom:1rem;
  font-family:var(--font-head);
  font-size:clamp(2.1rem,5vw,3.8rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
}

.section-desc{
  max-width:62ch;
  color:var(--olive);
  font-size:1.05rem;
  line-height:1.9;
}

.slant-line{
  width:90px;
  height:5px;
  margin:1.5rem 0;
  background:var(--accent);
  transform:skewX(-22deg);
}

.theme-strip{
  height:8px;
  margin:2rem 0;
  background:linear-gradient(115deg, var(--accent) 0 18%, var(--gold) 18% 36%, var(--blue) 36% 62%, var(--dark-red) 62% 80%, var(--ink) 80%);
  transform:skewX(-22deg);
  transform-origin:left center;
}

.prose{
  max-width:72ch;
  font-size:1.04rem;
  line-height:1.9;
}

.prose p + p{
  margin-top:1.2em;
}

.prose a{
  color:var(--blue);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

.prose a:hover{
  color:var(--accent);
}

.prose ul,
.prose ol{
  margin:1.4em 0;
  padding-left:1.4em;
}

.prose ul{
  list-style:square;
}

.prose li{
  margin-bottom:.5em;
  padding-left:.3em;
}

.prose h2,
.prose h3{
  margin-top:2em;
  margin-bottom:.5em;
}

.prose blockquote{
  margin:1.5em 0;
  padding:1rem 1.4rem;
  border-left:5px solid var(--gold);
  background:var(--white);
  font-style:italic;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.65rem 1.35rem;
  border:2px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-head);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:skewX(-5deg);
  transition:background var(--duration), color var(--duration), border-color var(--duration), box-shadow var(--duration);
}

.btn > span{
  display:inline-block;
  transform:skewX(5deg);
}

.btn:hover{
  background:var(--ink);
  color:var(--white);
  border-color:var(--ink);
}

.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}

.btn-primary:hover{
  background:var(--dark-red);
  border-color:var(--dark-red);
  box-shadow:6px 6px 0 rgba(232,73,29,.2);
}

.btn-outline{
  border-color:var(--blue);
  color:var(--blue);
}

.btn-outline:hover{
  background:var(--blue);
  color:var(--white);
  border-color:var(--blue);
}

.btn-sm{
  min-height:36px;
  padding:.4rem .9rem;
  font-size:.75rem;
}

.breadcrumb-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.5rem;
  font-family:var(--font-head);
  font-size:.82rem;
  letter-spacing:.04em;
}

.breadcrumb-item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

.breadcrumb-link{
  font-weight:600;
  color:var(--blue);
}

.breadcrumb-link:hover{
  color:var(--accent);
}

.breadcrumb-separator{
  font-family:var(--font-mono);
  color:var(--olive);
}

.breadcrumb-item[aria-current="page"]{
  font-weight:600;
  color:var(--olive);
}

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin:1.5rem 0 2rem;
}

.filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  margin:0;
  padding:.45rem 1rem;
  border:1px solid var(--ink);
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-head);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.04em;
  transform:skewX(-5deg);
  transition:background var(--duration), color var(--duration), border-color var(--duration), box-shadow var(--duration);
}

.filter-btn > span{
  display:inline-block;
  transform:skewX(5deg);
}

.filter-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.filter-btn.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
  box-shadow:4px 4px 0 var(--ink);
}

.filter-card{
  transition:opacity .24s, transform .24s;
}

.filter-card.is-hidden{
  display:none;
}

.status-panel,
.console-panel{
  position:relative;
  overflow:hidden;
  padding:1.5rem;
  background:var(--navy);
  color:rgba(248,248,248,.85);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-lg);
}

.status-panel::before,
.console-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(115deg, var(--gold) 0 35%, transparent 35%);
}

.console-panel::after{
  content:"◢";
  position:absolute;
  top:.55rem;
  right:.75rem;
  font-size:1.4rem;
  line-height:1;
  color:rgba(211,160,71,.4);
}

.status-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.65rem 0;
  border-bottom:1px solid rgba(248,248,248,.1);
  font-size:.9rem;
}

.status-row:last-child{
  border-bottom:0;
}

.status-label{
  color:rgba(248,248,248,.68);
}

.status-value{
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--gold);
}

.data-status{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.35rem .8rem;
  border:1px solid rgba(211,160,71,.5);
  background:rgba(211,160,71,.08);
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
}

.status-dot{
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(232,73,29,.2);
}

.mono-label{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}

.tag{
  display:inline-block;
  padding:.25rem .7rem;
  background:var(--white);
  border:1px solid var(--line);
  color:var(--olive);
  font-family:var(--font-head);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.tag-gold{
  background:rgba(211,160,71,.14);
  border-color:var(--gold);
  color:var(--ink);
}

.tag-blue{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
}

.tag-red{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}

.image-frame{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  aspect-ratio:16/9;
  box-shadow:var(--shadow-sm);
}

.image-frame--4x3{
  aspect-ratio:4/3;
}

.image-frame--square{
  aspect-ratio:1/1;
}

.image-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:1rem;
  background:linear-gradient(145deg, rgba(30,75,122,.92), rgba(22,35,51,1));
  color:rgba(248,248,248,.72);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
}

.image-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 16px, rgba(255,255,255,.05) 16px 32px);
}

.image-placeholder span{
  position:relative;
  z-index:1;
}

.image-caption{
  margin-top:.5rem;
  font-size:.8rem;
  font-style:italic;
  text-align:center;
  color:var(--olive);
}

@media (max-width:900px){
  .site-nav{
    position:fixed;
    top:76px;
    left:1rem;
    right:1rem;
    z-index:99;
    display:flex;
    padding:1.25rem;
    background:var(--navy);
    color:var(--white);
    box-shadow:var(--shadow-lg);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.99);
    transform-origin:top right;
    transition:opacity .25s, transform .25s, visibility .25s;
  }

  .site-nav[data-open]{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .nav-list{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
  }

  .nav-link{
    display:block;
    padding:.85rem .75rem;
    border-left:3px solid transparent;
    font-size:1.02rem;
    color:var(--white);
  }

  .nav-link:hover{
    background:rgba(255,255,255,.05);
    color:var(--gold);
  }

  .nav-link::after{
    display:none;
  }

  .nav-link[aria-current="page"]{
    border-left-color:var(--accent);
    background:rgba(232,73,29,.12);
    color:var(--gold);
  }

  .nav-toggle{
    display:inline-flex;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:2rem;
  }
}

html[data-device="mobile"] .site-nav{
  position:fixed;
  top:76px;
  left:1rem;
  right:1rem;
  z-index:99;
  display:flex;
  padding:1.25rem;
  background:var(--navy);
  color:var(--white);
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.99);
  transform-origin:top right;
  transition:opacity .25s, transform .25s, visibility .25s;
}

html[data-device="mobile"] .site-nav[data-open]{
  opacity:1;
  visibility:visible;
  transform:none;
}

html[data-device="mobile"] .nav-list{
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:.25rem;
}

html[data-device="mobile"] .nav-link{
  display:block;
  padding:.85rem .75rem;
  border-left:3px solid transparent;
  font-size:1.02rem;
  color:var(--white);
  background:transparent;
}

html[data-device="mobile"] .nav-link:hover{
  background:rgba(255,255,255,.05);
  color:var(--gold);
}

html[data-device="mobile"] .nav-link::after{
  display:none;
}

html[data-device="mobile"] .nav-link[aria-current="page"]{
  border-left-color:var(--accent);
  background:rgba(232,73,29,.12);
  color:var(--gold);
}

html[data-device="mobile"] .nav-toggle{
  display:inline-flex;
}

html[data-device="desktop"] .site-nav{
  position:static;
  top:auto;
  left:auto;
  right:auto;
  display:flex;
  padding:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  opacity:1;
  visibility:visible;
  transform:none;
}

html[data-device="desktop"] .nav-list{
  width:auto;
  flex-direction:row;
  align-items:center;
  gap:clamp(.25rem,1.4vw,1.6rem);
}

html[data-device="desktop"] .nav-link{
  display:inline-block;
  padding:.5rem .2rem;
  border-left:0;
  font-size:.9rem;
  color:var(--ink);
  background:transparent;
}

html[data-device="desktop"] .nav-link:hover{
  background:transparent;
  color:var(--accent);
}

html[data-device="desktop"] .nav-link::after{
  display:block;
}

html[data-device="desktop"] .nav-link[aria-current="page"]{
  border-left:0;
  background:transparent;
  color:var(--accent);
}

html[data-device="desktop"] .nav-toggle{
  display:none;
}

@media (max-width:600px){
  .header-inner{
    padding-inline:.9rem;
    gap:.8rem;
  }

  .brand-cn{
    font-size:1rem;
  }

  .brand-en{
    letter-spacing:.1em;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:1.8rem;
    padding-top:2.5rem;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto !important;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}