:root{
  --brand:#ff6b35;
  --brand-dark:#e8551f;
  --brand-light:#ff8f66;
  --brand-glow:rgba(255,107,53,.35);
  --bg:#f7f5f2;
  --bg-soft:#ffffff;
  --bg-elev:#ffffff;
  --text:#1c1a18;
  --text-soft:#5a544e;
  --text-mute:#8b837b;
  --border:rgba(28,26,24,.1);
  --border-soft:rgba(28,26,24,.06);
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.88);
  --shadow-sm:0 2px 8px rgba(28,26,24,.06);
  --shadow:0 8px 28px rgba(28,26,24,.08);
  --shadow-lg:0 18px 50px rgba(28,26,24,.14);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;
  --maxw:1180px;
  --header-h:68px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#121013;
    --bg-soft:#1a171b;
    --bg-elev:#1f1b20;
    --text:#f3efec;
    --text-soft:#c4bcb5;
    --text-mute:#8f8780;
    --border:rgba(255,255,255,.12);
    --border-soft:rgba(255,255,255,.07);
    --glass:rgba(26,23,27,.72);
    --glass-strong:rgba(26,23,27,.88);
    --shadow-sm:0 2px 8px rgba(0,0,0,.3);
    --shadow:0 8px 28px rgba(0,0,0,.4);
    --shadow-lg:0 18px 50px rgba(0,0,0,.55);
    --brand-glow:rgba(255,107,53,.45);
  }
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 12% -8%, rgba(255,107,53,.10), transparent 60%),
    radial-gradient(900px 500px at 92% 4%, rgba(255,143,102,.08), transparent 62%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{
  color:var(--brand);
  text-decoration:none;
  transition:color .25s var(--ease),opacity .25s var(--ease);
}
a:hover{color:var(--brand-dark);}

h1,h2,h3,h4{
  line-height:1.3;
  margin:0 0 .6em;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--text);
}
h1{font-size:clamp(1.6rem,3.6vw,2.6rem);}
h2{font-size:clamp(1.35rem,2.8vw,2rem);}
h3{font-size:clamp(1.1rem,2vw,1.35rem);}

p{margin:0 0 1em;}
ul,ol{margin:0 0 1em;padding-left:1.35em;}
li{margin-bottom:.4em;}

strong{font-weight:700;color:var(--text);}

time{color:var(--text-mute);font-size:.85em;}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

::selection{background:var(--brand);color:#fff;}

:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}

/* ============ HEADER ============ */
#site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--border-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 6px 24px rgba(28,26,24,.05);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}

.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:20px;
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:1.18rem;
  color:var(--text);
  letter-spacing:-.02em;
  flex-shrink:0;
  transition:transform .3s var(--ease);
}
.logo:hover{transform:translateY(-1px);color:var(--text);}
.logo svg{
  border-radius:50%;
  box-shadow:0 4px 14px var(--brand-glow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.logo:hover svg{
  transform:rotate(-8deg) scale(1.06);
  box-shadow:0 6px 22px var(--brand-glow);
}
.logo span{
  background:linear-gradient(135deg,var(--brand),var(--brand-light));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

#site-header nav[aria-label="主导航"]{
  flex:1;
  min-width:0;
}
#site-header nav[aria-label="主导航"] ul{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
  overflow-x:auto;
  scrollbar-width:none;
}
#site-header nav[aria-label="主导航"] ul::-webkit-scrollbar{display:none;}
#site-header nav[aria-label="主导航"] li{margin:0;}
#site-header nav[aria-label="主导航"] a{
  display:block;
  padding:8px 12px;
  font-size:.9rem;
  font-weight:600;
  color:var(--text-soft);
  border-radius:var(--radius-pill);
  white-space:nowrap;
  position:relative;
  transition:color .25s var(--ease),background .25s var(--ease);
}
#site-header nav[aria-label="主导航"] a::after{
  content:"";
  position:absolute;
  left:50%;bottom:2px;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-light));
  border-radius:2px;
  transform:translateX(-50%);
  transition:width .3s var(--ease);
}
#site-header nav[aria-label="主导航"] a:hover{
  color:var(--brand);
  background:rgba(255,107,53,.08);
}
#site-header nav[aria-label="主导航"] a:hover::after{width:60%;}

#site-header form[role="search"]{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:4px 4px 4px 14px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
#site-header form[role="search"]:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-glow);
}
#site-header input[type="search"]{
  border:0;
  background:transparent;
  font:inherit;
  font-size:.88rem;
  color:var(--text);
  width:170px;
  padding:6px 0;
  outline:none;
}
#site-header input[type="search"]::placeholder{color:var(--text-mute);}
#site-header form[role="search"] button{
  border:0;
  cursor:pointer;
  font:inherit;
  font-size:.85rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  padding:7px 16px;
  border-radius:var(--radius-pill);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
#site-header form[role="search"] button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px var(--brand-glow);
  filter:brightness(1.06);
}
#site-header form[role="search"] button:active{transform:translateY(0);}

/* ============ MAIN ============ */
main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px 60px;
}

main > section{
  margin:0 0 28px;
  padding:34px 30px;
  background:var(--bg-elev);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  animation:riseIn .7s var(--ease) both;
}

main > section:nth-of-type(1){animation-delay:.02s;}
main > section:nth-of-type(2){animation-delay:.06s;}
main > section:nth-of-type(3){animation-delay:.1s;}
main > section:nth-of-type(4){animation-delay:.14s;}
main > section:nth-of-type(5){animation-delay:.18s;}
main > section:nth-of-type(6){animation-delay:.22s;}
main > section:nth-of-type(7){animation-delay:.26s;}
main > section:nth-of-type(8){animation-delay:.3s;}

@keyframes riseIn{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}

main > section h2{
  position:relative;
  padding-bottom:.5em;
  margin-bottom:1.1em;
}
main > section h2::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:64px;height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-light));
  box-shadow:0 2px 10px var(--brand-glow);
  transition:width .5s var(--ease);
}
main > section:hover h2::after{width:110px;}

main > section h3{
  margin-top:1.6em;
  padding-left:14px;
  border-left:4px solid var(--brand);
  color:var(--text);
}
main > section h3:first-of-type{margin-top:.4em;}

/* ============ HERO ============ */
#hero{
  position:relative;
  margin-top:28px;
  padding:64px 40px 58px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(900px 420px at 88% -12%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(700px 380px at 6% 110%, rgba(255,143,102,.55), transparent 62%),
    linear-gradient(135deg,#ff6b35 0%,#ff8f66 46%,#ffb088 100%);
  background-size:200% 200%;
  animation:heroFlow 14s ease-in-out infinite,riseIn .7s var(--ease) both;
  border:0;
  box-shadow:0 20px 60px rgba(255,107,53,.28);
}
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.22), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.16), transparent 40%);
  pointer-events:none;
}
#hero::after{
  content:"";
  position:absolute;
  top:-40%;right:-10%;
  width:420px;height:420px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  filter:blur(10px);
  animation:floaty 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroFlow{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
@keyframes floaty{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(24px) scale(1.06);}
}

#hero h1{
  position:relative;
  color:#fff;
  margin-bottom:.5em;
  text-shadow:0 2px 20px rgba(120,40,0,.25);
}
#hero p{
  position:relative;
  color:rgba(255,255,255,.94);
  max-width:820px;
  font-size:1.02rem;
}
#hero p:last-child{margin-bottom:0;}
#hero a{
  display:inline-block;
  color:#fff;
  font-weight:700;
  padding:2px 4px;
  border-bottom:2px solid rgba(255,255,255,.6);
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease);
  border-radius:6px;
}
#hero a:hover{
  color:#fff;
  border-color:#fff;
  background:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

/* ============ BREADCRUMB ============ */
main > nav[aria-label="面包屑导航"]{
  margin:0 0 22px;
  padding:12px 20px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm);
  animation:riseIn .7s var(--ease) both;
}
main > nav[aria-label="面包屑导航"] ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:.86rem;
}
main > nav[aria-label="面包屑导航"] li{margin:0;color:var(--text-mute);}
main > nav[aria-label="面包屑导航"] li + li::before{
  content:"/";
  margin-right:8px;
  color:var(--text-mute);
  opacity:.6;
}
main > nav[aria-label="面包屑导航"] a{font-weight:600;}

/* ============ ANCHOR NAV ============ */
main > nav[aria-label="页面锚点导航"]{
  margin:0 0 28px;
  padding:18px 22px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  animation:riseIn .7s var(--ease) both;
}
main > nav[aria-label="页面锚点导航"] ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}
main > nav[aria-label="页面锚点导航"] li{margin:0;}
main > nav[aria-label="页面锚点导航"] a{
  display:inline-block;
  padding:6px 14px;
  font-size:.84rem;
  font-weight:600;
  color:var(--text-soft);
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  transition:all .28s var(--ease);
}
main > nav[aria-label="页面锚点导航"] a:hover{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 8px 20px var(--brand-glow);
}

/* ============ CARDS / ARTICLES / QUOTES ============ */
main article,
main blockquote{
  position:relative;
  margin:0 0 18px;
  padding:22px 24px;
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
main article:hover,
main blockquote:hover{
  transform:translateY(-5px);
  border-color:rgba(255,107,53,.35);
  box-shadow:var(--shadow-lg);
}
main article h3{
  margin-top:0;
  border-left:0;
  padding-left:0;
  font-size:1.12rem;
}
main article h3::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  margin-right:10px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-light));
  box-shadow:0 0 0 4px rgba(255,107,53,.14);
  vertical-align:middle;
  transition:box-shadow .35s var(--ease);
}
main article:hover h3::before{
  box-shadow:0 0 0 7px rgba(255,107,53,.2);
}
main article p:last-child{margin-bottom:0;}

main blockquote{
  border-left:5px solid var(--brand);
  background:linear-gradient(135deg,rgba(255,107,53,.07),rgba(255,143,102,.03));
  font-style:normal;
}
main blockquote p{
  margin:0;
  color:var(--text-soft);
  font-size:.98rem;
}
main blockquote p::before{
  content:"“";
  font-size:2.4rem;
  line-height:0;
  color:var(--brand);
  opacity:.5;
  margin-right:4px;
  vertical-align:-.35em;
  font-family:Georgia,serif;
}

/* ============ LISTS IN SECTIONS ============ */
main > section ul li::marker,
main > section ol li::marker{
  color:var(--brand);
  font-weight:700;
}

/* ============ CONTACT / TRUST / AUTHOR ============ */
#contact ul,
#trust ul,
#author ul,
#sitemap ul,
#links ul{
  list-style:none;
  padding:0;
  display:grid;
  gap:8px;
}
#sitemap ul,
#links ul{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
#contact ul li,
#trust ul li,
#author ul li{
  padding:10px 16px;
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  font-size:.94rem;
  transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
#contact ul li:hover,
#trust ul li:hover,
#author ul li:hover{
  transform:translateX(4px);
  border-color:rgba(255,107,53,.4);
  box-shadow:0 6px 18px rgba(255,107,53,.1);
}
#sitemap ul li,
#links ul li{margin:0;}
#sitemap ul a,
#links ul a{
  display:block;
  padding:9px 14px;
  font-size:.88rem;
  font-weight:600;
  color:var(--text-soft);
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  transition:all .28s var(--ease);
}
#sitemap ul a:hover,
#links ul a:hover{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 8px 20px var(--brand-glow);
}

/* ============ FAQ ============ */
#faq article h3{
  font-size:1.05rem;
  color:var(--brand-dark);
}
#faq article h3::before{display:none;}

/* ============ HOWTO ============ */
#howto ol{
  counter-reset:step;
  list-style:none;
  padding:0;
}
#howto ol li{
  position:relative;
  counter-increment:step;
  padding:14px 18px 14px 58px;
  margin-bottom:10px;
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
#howto ol li::before{
  content:counter(step);
  position:absolute;
  left:14px;top:50%;
  transform:translateY(-50%);
  width:30px;height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:800;
  color:#fff;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow:0 4px 12px var(--brand-glow);
}
#howto ol li:hover{
  transform:translateX(5px);
  border-color:rgba(255,107,53,.4);
  box-shadow:0 8px 22px rgba(255,107,53,.12);
}

/* ============ FOOTER ============ */
footer{
  position:relative;
  margin-top:20px;
  padding:48px 20px 32px;
  background:linear-gradient(180deg,var(--bg-soft),var(--bg));
  border-top:1px solid var(--border-soft);
  color:var(--text-soft);
}
footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-light),var(--brand));
  background-size:200% 100%;
  animation:heroFlow 8s linear infinite;
}
footer > div{
  max-width:var(--maxw);
  margin:0 auto;
  text-align:center;
}
footer > div p{
  margin:0 0 .55em;
  font-size:.9rem;
}
footer > div p:first-child{
  font-weight:800;
  font-size:1.02rem;
  color:var(--text);
}
footer > div a{font-weight:600;}

footer nav[aria-label="页脚导航"]{
  max-width:var(--maxw);
  margin:22px auto 18px;
}
footer nav[aria-label="页脚导航"] ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 4px;
  list-style:none;
  margin:0;
  padding:0;
}
footer nav[aria-label="页脚导航"] li{margin:0;}
footer nav[aria-label="页脚导航"] a{
  display:inline-block;
  padding:5px 12px;
  font-size:.84rem;
  font-weight:600;
  color:var(--text-soft);
  border-radius:var(--radius-pill);
  transition:color .25s var(--ease),background .25s var(--ease);
}
footer nav[aria-label="页脚导航"] a:hover{
  color:var(--brand);
  background:rgba(255,107,53,.1);
}

footer > p{
  max-width:var(--maxw);
  margin:0 auto;
  text-align:center;
  font-size:.82rem;
  color:var(--text-mute);
  padding-top:16px;
  border-top:1px solid var(--border-soft);
}

/* ============ SCROLL ANIMATION (progressive) ============ */
@supports (animation-timeline: view()){
  main > section{
    animation:riseIn .9s var(--ease) both;
    animation-timeline:view();
    animation-range:entry 0% cover 26%;
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  #site-header input[type="search"]{width:130px;}
  #site-header nav[aria-label="主导航"] a{padding:8px 9px;font-size:.85rem;}
  #hero{padding:52px 30px 48px;}
}

@media (max-width:860px){
  :root{--header-h:auto;}
  .header-inner{
    flex-wrap:wrap;
    padding:10px 16px;
    gap:10px;
  }
  .logo{order:1;}
  #site-header form[role="search"]{
    order:2;
    margin-left:auto;
    flex:1 1 200px;
    max-width:280px;
  }
  #site-header input[type="search"]{width:100%;}
  #site-header nav[aria-label="主导航"]{
    order:3;
    flex:1 1 100%;
    width:100%;
  }
  #site-header nav[aria-label="主导航"] ul{
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  main{padding:0 16px 48px;}
  main > section{padding:26px 20px;}
  #hero{padding:44px 22px 40px;border-radius:var(--radius);}
  #hero h1{font-size:1.5rem;}
  main > nav[aria-label="页面锚点导航"]{padding:14px 16px;}
}

@media (max-width:520px){
  body{font-size:15px;}
  .header-inner{padding:10px 12px;}
  .logo{font-size:1.05rem;}
  .logo svg{width:34px;height:34px;}
  #site-header form[role="search"]{flex:1 1 100%;max-width:none;order:3;}
  #site-header nav[aria-label="主导航"]{order:4;}
  main{padding:0 12px 40px;}
  main > section{padding:22px 16px;border-radius:var(--radius);}
  #hero{padding:36px 18px 34px;}
  #hero p{font-size:.94rem;}
  main article,
  main blockquote{padding:18px 16px;}
  #howto ol li{padding:12px 14px 12px 50px;}
  #howto ol li::before{left:12px;width:26px;height:26px;font-size:.78rem;}
  footer{padding:36px 14px 26px;}
  #sitemap ul,
  #links ul{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}

/* ============ HOVER-ONLY DEVICES ============ */
@media (hover:none){
  main article:hover,
  main blockquote:hover,
  #contact ul li:hover,
  #trust ul li:hover,
  #author ul li:hover,
  #howto ol li:hover{transform:none;}
  main > section:hover h2::after{width:64px;}
}

/* ============ PRINT ============ */
@media print{
  #site-header,footer nav,main > nav{display:none;}
  body{background:#fff;color:#000;}
  main > section{box-shadow:none;border:1px solid #ccc;break-inside:avoid;}
  #hero{background:#f0f0f0;color:#000;box-shadow:none;}
  #hero h1,#hero p,#hero a{color:#000;text-shadow:none;}
}