:root{
  --mint:#b4fde1;
  --blue:#add8e6;
  --ink:#172620;
  --paper:#f3fef9;
  --card:#ffffff;
  --line:3px solid #172620;
  --soft:inset -2px -2px 7px rgba(255,255,255,.92), inset 2px 2px 8px rgba(23,38,32,.07), 5px 6px 0 rgba(23,38,32,.12);
  --pop:inset -3px -3px 10px rgba(255,255,255,.9), inset 3px 3px 10px rgba(23,38,32,.1), 6px 8px 16px rgba(23,38,32,.2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-bottom:104px;
  font:400 17px/1.8 Outfit,"Work Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 10% -12%,#dcfff2 0%,rgba(220,255,242,0) 62%),
    radial-gradient(820px 500px at 104% 6%,#e3f5fd 0%,rgba(227,245,253,0) 58%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Work Sans",Outfit,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.3;letter-spacing:.01em}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #0b6d52;outline-offset:2px}

/* ---------- hero ---------- */
.hero{
  position:relative;
  isolation:isolate;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:92px 20px 126px;
  overflow:hidden;
  clip-path:ellipse(160% 100% at 50% 0%);
  background:linear-gradient(160deg,var(--mint) 0%,#dcfbf0 42%,var(--blue) 100%);
}
.hero-media{position:absolute;inset:-12% 0 -12%;z-index:-1}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.45;transform:scale(1.06);will-change:transform}
.hero-inner{
  position:relative;
  max-width:720px;
  text-align:center;
  padding:28px 24px 24px;
  background:rgba(255,255,255,.88);
  border:4px solid var(--ink);
  border-radius:26px;
  box-shadow:var(--pop);
  backdrop-filter:blur(3px);
}
.hero-inner h1{
  margin:0 0 12px;
  font-size:clamp(1.9rem,6.4vw,3.5rem);
  font-weight:700;
  text-wrap:balance;
}
.hero-sub{margin:0;font-size:clamp(.95rem,2.4vw,1.05rem);line-height:1.7;color:#2b4139}
.chips{position:absolute;inset:0;pointer-events:none}
.chips a{
  position:absolute;
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
  background:#fff;
  border:var(--line);
  border-radius:999px;
  box-shadow:inset -2px -2px 6px #fff,4px 4px 0 rgba(23,38,32,.18);
  animation:bob 4.8s ease-in-out infinite;
}
.chips a:nth-child(1){left:5%;top:16%}
.chips a:nth-child(2){right:5%;top:25%;animation-delay:.8s}
.chips a:nth-child(3){left:50%;bottom:12%;translate:-50% 0;animation-delay:1.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- layout ---------- */
.wrap{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:30px;
  align-items:start;
  max-width:1180px;
  margin:0 auto;
  padding:56px 22px 40px;
}
.rail{
  position:sticky;
  top:22px;
  padding:16px 14px 12px;
  background:var(--card);
  border:var(--line);
  border-radius:20px;
  box-shadow:var(--soft);
}
.rail h2{margin:0 0 10px;font-size:.92rem;letter-spacing:.08em}
.rail h2 span,.foot h3 span{display:inline-block;padding:3px 11px;border-radius:11px;background:var(--mint);border:2px solid rgba(23,38,32,.6)}
.rail-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rail-list a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:4px 11px;
  font-size:.95rem;
  text-decoration:none;
  border-radius:12px;
  transition:background .2s ease-out,transform .2s ease-out;
}
.rail-list a:hover{background:#e4fff6;transform:translateX(2px)}
.totop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  margin-top:12px;
  padding:0 14px;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  border:var(--line);
  border-radius:13px;
  background:#fff;
  box-shadow:inset -2px -2px 6px #fff,3px 3px 0 rgba(23,38,32,.14);
  transition:transform .18s ease-out;
}
.totop:active{transform:translateY(2px)}
.col{min-width:0}

/* ---------- prose ---------- */
.prose{max-width:790px}
.prose article{
  position:relative;
  margin:0 0 28px;
  padding:clamp(20px,3.4vw,32px);
  background:var(--card);
  border:var(--line);
  border-radius:22px;
  box-shadow:inset -3px -3px 10px rgba(255,255,255,.9),7px 9px 0 rgba(23,38,32,.1);
  scroll-margin-top:22px;
}
.prose article:nth-of-type(even){background:#f6fdff}
.prose h2{font-size:clamp(1.35rem,3vw,1.75rem);margin:0 0 14px}
.prose h3{font-size:1.15rem;margin:22px 0 10px}
.prose h2>span,.prose h3>span{
  display:inline-block;
  padding:5px 14px;
  border:var(--line);
  border-radius:15px;
  background:linear-gradient(180deg,#dcfff2,var(--mint));
  box-shadow:inset -2px -2px 6px #fff,3px 3px 0 rgba(23,38,32,.16);
}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:5px 0}
.prose strong{font-weight:600;background:linear-gradient(transparent 62%,var(--mint) 62%)}
.prose a{color:#0b604a;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.prose blockquote{
  margin:0 0 16px;
  padding:14px 18px;
  border:var(--line);
  border-left-width:10px;
  border-radius:15px;
  background:#f4fffa;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{margin:8px 0 18px;border:var(--line);border-radius:18px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.95rem}
.prose th,.prose td{border:2px solid rgba(23,38,32,.32);padding:8px 10px;text-align:left;vertical-align:top}
.prose hr{border:0;border-top:3px dashed rgba(23,38,32,.2);margin:22px 0}
.prose code{font-size:.94em;background:#e9f7f1;padding:1px 5px;border-radius:6px}

/* ---------- footer ---------- */
.foot{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:24px;
  margin-top:44px;
  padding:44px clamp(18px,5vw,60px) 34px;
  background:linear-gradient(180deg,#e9fff7,#cfeffb);
  border-top:4px solid var(--ink);
  border-radius:28px 28px 0 0;
  box-shadow:inset 0 4px 0 rgba(255,255,255,.85);
}
.foot h3{margin:0 0 10px;font-size:.9rem;letter-spacing:.08em}
.foot menu{list-style:none;margin:0;padding:0}
.foot menu a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:.95rem;
  text-decoration:none;
  border-bottom:2px dashed transparent;
  transition:border-color .2s ease-out;
}
.foot menu a:hover{border-bottom-color:var(--ink)}
.foot .fbrand{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-weight:700;font-size:1.05rem}
.foot .mark{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--ink)}
.legal{margin:0;font-size:.86rem;color:#3b5348}

/* ---------- dock ---------- */
.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px clamp(10px,3vw,22px) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#eafff7,#c9f2e5 62%,#bfe9f7);
  border-top:4px solid var(--ink);
  border-radius:24px 24px 0 0;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.9),0 -6px 18px rgba(23,38,32,.16);
}
.dock-side{display:flex;gap:4px;flex:1;min-width:0}
.dock-l{justify-content:flex-start}
.dock-r{justify-content:flex-end}
.dock-side a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 10px;
  font-size:.92rem;
  font-weight:500;
  text-decoration:none;
  border-radius:12px;
  white-space:nowrap;
  transition:background .2s ease-out;
}
.dock-side a:hover{background:rgba(255,255,255,.9);box-shadow:inset 2px 2px 0 rgba(23,38,32,.08)}
.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:0 16px;
  font-size:.95rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  background:#fff;
  border:var(--line);
  border-radius:16px;
  box-shadow:inset -2px -2px 6px #fff,3px 3px 0 rgba(23,38,32,.18);
}
.brand .mark{width:24px;height:24px;border-radius:50%;object-fit:cover}
.dock-box{position:relative}
.dock-box>summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  font-size:.95rem;
  font-weight:600;
  background:var(--mint);
  border:var(--line);
  border-radius:16px;
  box-shadow:inset -2px -2px 6px rgba(255,255,255,.9),3px 3px 0 rgba(23,38,32,.2);
  transition:transform .2s ease-out;
}
.dock-box>summary::-webkit-details-marker{display:none}
.dock-box>summary:active{transform:translateY(2px)}
.drawer{
  list-style:none;
  margin:0;
  position:fixed;
  left:0;right:0;top:0;
  bottom:calc(74px + env(safe-area-inset-bottom));
  z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  align-content:start;
  gap:10px;
  padding:22px clamp(14px,4vw,30px) 26px;
  overflow:auto;
  background:linear-gradient(170deg,#eafff7,#cfeffb);
  border-top:4px solid var(--ink);
  animation:drop .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes drop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.drawer li{min-width:0}
.drawer li[hidden]{display:none}
.drawer li a{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 16px;
  font-weight:600;
  text-decoration:none;
  background:#fff;
  border:var(--line);
  border-radius:15px;
  box-shadow:inset -2px -2px 6px #fff,3px 3px 0 rgba(23,38,32,.14);
}
.drawer li a:active{transform:translateY(2px)}
.mi-search{grid-column:1/-1}
.find{
  width:100%;
  min-height:48px;
  padding:0 16px;
  font:inherit;
  color:var(--ink);
  background:#fff;
  border:var(--line);
  border-radius:15px;
  box-shadow:inset 2px 2px 9px rgba(23,38,32,.1);
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .wrap{grid-template-columns:1fr;gap:22px;padding-top:38px}
  .rail{position:static}
  .rail-list{grid-template-columns:1fr 1fr;display:grid}
  .dock-side{display:none}
  .brand{flex:1;justify-content:center}
  .foot{grid-template-columns:1fr 1fr;gap:20px}
  .f1{grid-column:1/-1}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero{padding:78px 14px 100px}
  .hero-inner{padding:22px 16px;border-width:3px;border-radius:20px}
  .chips a{font-size:.8rem;padding:0 11px}
  .chips a:nth-child(3){bottom:9%}
  .wrap{padding:32px 14px 32px}
  .prose article{padding:18px 16px;border-radius:18px}
  .foot{grid-template-columns:1fr 1fr;padding:34px 16px 28px}
  .brand{padding:0 12px;font-size:.9rem}
  .dock-box>summary{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

button[aria-expanded]{min-width:44px;min-height:44px}