:root { --ink:#1d2423; --muted:#616b69; --line:#dce2e0; --paper:#fff; --soft:#f5f7f6; --teal:#087f78; --deep:#075e59; --pink:#b23b92; --orange:#c47719; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif; line-height:1.7; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
.topbar-inner,.hero-grid,.shell,.page-shell,.guide-shell,.faq-shell,.footer-inner { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.topbar { position:relative; z-index:20; border-bottom:1px solid var(--line); background:#fff; }
.topbar-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; font-size:20px; font-weight:800; }
.brand img { width:42px; height:42px; border-radius:4px; }
.nav { display:flex; align-items:center; gap:5px; }
.nav a { padding:9px 14px; border-radius:4px; color:#4c5654; }
.nav a.active,.nav a:hover { color:var(--deep); background:#edf5f3; }
.nav .nav-cta { margin-left:8px; color:#fff; background:var(--teal); }
.nav .nav-cta:hover { color:#fff; background:var(--deep); }
.nav-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:4px; background:#fff; font-size:22px; }

.hero { border-bottom:1px solid var(--line); background:linear-gradient(90deg,#fff 0%,#fff 50%,#f4f8f7 50%); }
.hero-grid { min-height:605px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:62px; padding:44px 0; }
.overline,.section-head>span,.showcase-intro>span,.revisit-grid>div>span,.page-shell>span,.guide-page article section>span,.faq-note>span,.download-band span { color:var(--teal); font-size:12px; font-weight:850; }
.hero h1 { max-width:540px; margin:14px 0 18px; font-size:clamp(40px,4.2vw,58px); line-height:1.15; letter-spacing:0; }
.nowrap { white-space:nowrap; }
.hero-copy>p { max-width:540px; margin:0; color:var(--muted); font-size:17px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:27px; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:10px 24px; border:1px solid transparent; border-radius:4px; font-weight:750; }
.button.main { color:#fff; background:var(--teal); }
.button.main:hover { background:var(--deep); }
.button.ghost { border-color:var(--line); background:#fff; }
.button.light { color:var(--deep); background:#fff; }
.hero-data { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:32px 0 0; }
.hero-data div { padding-top:10px; border-top:2px solid var(--teal); }
.hero-data dt { font-weight:750; }
.hero-data dd { margin:0; color:var(--muted); font-size:12px; }

.filter-board { min-height:470px; border:1px solid #c5d7d3; background:#fff; box-shadow:0 20px 48px rgba(20,68,61,.11); }
.board-title { min-height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid #c5d7d3; color:var(--deep); font-size:12px; }
.board-media { position:relative; height:365px; overflow:hidden; background-image:linear-gradient(#e5eeec 1px,transparent 1px),linear-gradient(90deg,#e5eeec 1px,transparent 1px); background-size:40px 40px; }
.board-media figure { position:absolute; margin:0; overflow:hidden; border:5px solid #fff; background:#fff; box-shadow:0 10px 28px rgba(24,63,57,.13); }
.board-media img { width:auto; max-width:400px; height:100%; object-fit:contain; }
.search-screen { z-index:3; top:18px; left:50%; height:330px; transform:translateX(-50%); }
.detail-strip { z-index:2; left:28px; bottom:-58px; height:270px; }
.history-strip { z-index:2; right:28px; top:54px; height:250px; }
.category-ribbon { min-height:56px; display:grid; grid-template-columns:repeat(4,1fr); }
.category-ribbon span { display:flex; align-items:center; justify-content:center; border-right:1px solid var(--line); color:var(--muted); font-size:13px; }
.category-ribbon span:nth-child(1) { border-top:3px solid var(--pink); }
.category-ribbon span:nth-child(2) { border-top:3px solid var(--orange); }
.category-ribbon span:nth-child(3) { border-top:3px solid var(--teal); }
.category-ribbon span:nth-child(4) { border-top:3px solid #5072ad; }

.section { padding:82px 0; }
.section-head { display:grid; grid-template-columns:140px 1fr; align-items:end; margin-bottom:32px; }
.section h2,.faq-note h2 { margin:0; font-size:34px; line-height:1.25; letter-spacing:0; }
.taxonomy { background:#fff; }
.taxonomy-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.taxonomy-grid article { min-height:220px; padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.taxonomy-grid b { color:var(--pink); font-size:13px; }
.taxonomy-grid h3 { margin:46px 0 8px; font-size:21px; }
.taxonomy-grid p,.revisit p,.tool-rows p,.guide-page p,.faq-note p { color:var(--muted); }

.showcase { background:var(--soft); }
.showcase-grid { display:grid; grid-template-columns:.58fr 1.42fr; gap:60px; align-items:center; }
.showcase-intro h2 { margin:10px 0 16px; }
.showcase-intro>div { color:var(--muted); }
.screens { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:end; }
.screens figure { margin:0; padding:12px; border:1px solid var(--line); background:#fff; }
.screens figure:nth-child(2) { transform:translateY(-22px); }
.screens img { width:auto; max-width:400px; height:320px; margin:0 auto; object-fit:contain; }
.screens figcaption { padding-top:10px; color:var(--muted); text-align:center; font-size:13px; }

.revisit { background:#fff; }
.revisit-grid { display:grid; grid-template-columns:.62fr 1.38fr; gap:70px; }
.revisit-grid>div h2 { margin:10px 0 0; }
.revisit ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.revisit li { display:grid; grid-template-columns:55px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.revisit li>span { color:var(--pink); font-size:12px; font-weight:800; }
.revisit h3,.revisit p { margin:0; }

.tools { background:#f6f8f7; }
.tool-rows { border-top:1px solid var(--line); }
.tool-rows article { display:grid; grid-template-columns:180px 1fr 80px; gap:28px; align-items:center; min-height:92px; border-bottom:1px solid var(--line); }
.tool-rows p { margin:0; }
.tool-rows span { color:var(--teal); font-size:12px; font-weight:800; text-align:right; }

.link-band { padding-top:0; background:#f6f8f7; }
.links { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); background:#fff; }
.links article { padding:34px; }
.links article+article { border-left:1px solid var(--line); }
.links article>span { color:var(--pink); font-size:12px; font-weight:800; }
.links h2 { margin:10px 0 12px; font-size:28px; }
.links article>div { margin-bottom:15px; color:var(--muted); }
.links a { color:var(--deep); font-weight:750; }

.download-band { color:#fff; background:var(--deep); }
.download-inner { min-height:190px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.download-band span { color:#a8e1d8; }
.download-band h2 { margin:6px 0 0; font-size:30px; }
footer { padding:28px 0; border-top:1px solid var(--line); background:#fff; }
.footer-inner { color:var(--muted); text-align:center; font-size:13px; }
.footer-inner p { margin:4px 0; }

.page-hero { border-bottom:1px solid var(--line); background:#f2f7f6; }
.page-shell { max-width:920px; padding:72px 0 66px; }
.page-shell h1 { margin:13px 0 17px; font-size:45px; line-height:1.24; }
.page-shell p { max-width:780px; margin:0; color:var(--muted); font-size:17px; }
.guide-page,.faq-page { padding:72px 0 90px; }
.guide-shell,.faq-shell { display:grid; grid-template-columns:230px minmax(0,1fr); gap:70px; align-items:start; }
.guide-page aside { position:sticky; top:22px; display:grid; gap:4px; padding:22px; border:1px solid var(--line); }
.guide-page aside strong { margin-bottom:8px; }
.guide-page aside a { padding:6px 0; color:var(--muted); }
.guide-page article { max-width:800px; }
.guide-page article section { padding-bottom:46px; margin-bottom:46px; border-bottom:1px solid var(--line); }
.guide-page h2 { margin:8px 0 0; font-size:31px; }
.guide-tip { margin-top:22px; padding:18px 22px; border-left:3px solid var(--pink); background:#f7f1f5; }
.guide-tip p { margin:4px 0 0; }
.faq-note { position:sticky; top:22px; }
.faq-note h2 { margin-top:10px; }
.faq-note a { color:var(--deep); font-weight:750; }
.faq-items { border-top:1px solid var(--line); }
.faq-items details { border-bottom:1px solid var(--line); }
.faq-items summary { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 3px; font-weight:750; cursor:pointer; list-style:none; }
.faq-items summary::-webkit-details-marker { display:none; }
.faq-items summary span { color:var(--pink); font-size:24px; }
.faq-items details p { margin:0; padding:0 46px 22px 3px; color:var(--muted); }

@media(max-width:920px){ .hero-grid{grid-template-columns:1fr 1fr;gap:30px}.filter-board{min-height:430px}.board-media{height:325px}.search-screen{height:295px}.detail-strip{height:230px}.history-strip{height:220px} }
@media(max-width:760px){
  .topbar-inner,.hero-grid,.shell,.page-shell,.guide-shell,.faq-shell,.footer-inner{width:min(100% - 32px,1180px)}
  .topbar-inner{min-height:62px}.nav-toggle{display:inline-flex;align-items:center;justify-content:center}.nav{position:absolute;top:62px;right:16px;left:16px;display:none;padding:10px;border:1px solid var(--line);background:#fff;box-shadow:0 18px 38px rgba(20,68,61,.14)}.nav.open{display:grid}.nav .nav-cta{margin-left:0;text-align:center}
  .hero{background:linear-gradient(180deg,#fff 0%,#fff 53%,#f4f8f7 53%)}.hero-grid{min-height:auto;grid-template-columns:1fr;gap:23px;padding:32px 0 27px}.hero h1{margin-top:10px;font-size:34px}.hero-copy>p{font-size:15px}.hero-actions{margin-top:20px}.hero-data{margin-top:20px}
  .filter-board{min-height:276px}.board-title{min-height:36px}.board-media{height:205px}.search-screen{top:9px;height:190px}.detail-strip{left:12px;bottom:-35px;height:155px}.history-strip{right:12px;top:28px;height:150px}.category-ribbon{min-height:35px}
  .section{padding:58px 0}.section-head{grid-template-columns:1fr;gap:8px}.section h2,.faq-note h2{font-size:29px}.taxonomy-grid{grid-template-columns:1fr}.taxonomy-grid article{min-height:auto}.taxonomy-grid h3{margin-top:24px}
  .showcase-grid,.revisit-grid,.guide-shell,.faq-shell{grid-template-columns:1fr;gap:30px}.screens{gap:7px}.screens figure{padding:6px}.screens img{height:210px}.revisit-grid{gap:24px}.tool-rows article{grid-template-columns:1fr;gap:5px;padding:18px 0}.tool-rows span{text-align:left}
  .links{grid-template-columns:1fr}.links article+article{border-top:1px solid var(--line);border-left:0}.download-inner{min-height:205px;align-items:flex-start;flex-direction:column;justify-content:center}
  .page-shell{padding:54px 0 48px}.page-shell h1{font-size:35px}.guide-page,.faq-page{padding:50px 0 65px}.guide-page aside{display:none}.faq-note{position:static}
}
@media(max-width:420px){ .hero h1{font-size:31px}.hero-actions .button{flex:1 1 140px}.hero-data{gap:7px}.hero-data dt{font-size:13px}.board-media{height:200px}.screens img{height:185px} }