:root { color-scheme: light; font-family: "Microsoft YaHei", sans-serif; color: #1f3035; background: #e8f0ee; }
* { box-sizing: border-box; }
body { margin: 0; background: #e8f0ee; }
header.b35-brand { padding: 19px 5vw; color: #f1fbfa; background: #172e39; font: 700 22px/1.35 Georgia,serif; }
.b35-brand a { color: inherit; text-decoration: none; }
nav.b35-navigation { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 12px 5vw; background: #c7dbd8; border-bottom: 1px solid #a3c1be; }
.b35-navigation a { color: #26505b; text-decoration: none; font-size: 13px; }
main { max-width: 1350px; margin: auto; padding: 31px 5vw 74px; }
main > h1 { margin: 0 0 17px; color: #203a43; font: 600 clamp(28px,4vw,45px)/1.2 Georgia,serif; }
.p22-cover { display: grid; grid-template-columns: minmax(0,1fr) 176px; grid-template-areas: "title marks" "copy marks"; gap: 13px 25px; padding: 29px 32px; background: #172e39; color: #eaf6f3; border-bottom: 5px solid #36a5ad; }
.p22-cover-title { grid-area: title; }
.p22-cover-title p { margin: 0 0 6px; color: #74d0d1; font-size: 12px; letter-spacing: .12em; }
.p22-cover-title h2 { margin: 0; color: #f1fbf7; font: 25px/1.3 Georgia,serif; }
.p22-cover-copy { grid-area: copy; max-width: 980px; line-height: 1.95; text-align: justify; }
.p22-cover-copy p { margin: 0; }
.p22-mark-row { grid-area: marks; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: center; }
.p22-mark-row figure { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 6px; background: #203e49; border: 1px solid #37616a; }
.p22-icon, .p22-gallery-icon { display: block; width: 42px; height: 42px; object-fit: contain; }
.p22-mark-row figcaption { color: #a9d6d0; font-size: 9px; }
.p22-contents { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 14px; margin-top: 27px; align-items: start; }
.p22-contents > section { min-width: 0; padding: 18px; background: #fbfdf9; border: 1px solid #cddbd7; }
.p22-contents > section > header { margin-bottom: 12px; padding-bottom: 9px; border-bottom: 2px solid #36a5ad; }
.p22-contents h2 { margin: 0; color: #245863; font-size: 18px; }
.p22-contents h3 { margin: 0 0 8px; color: #223d45; font-size: 16px; }
.p22-contents p { margin: 0; line-height: 1.9; }
.p22-recommend-module { grid-column: span 6; border-radius: 18px 0 0 0; }
.p22-recommendation { padding: 4px 2px; }
.p22-news-module { grid-column: span 10; background: #fff !important; }
.p22-news-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 21px; margin: 0; padding: 0; list-style: none; }
.p22-news-list > li { border-top: 1px solid #dce4e1; }
.p22-news-item { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 5px 10px; padding: 12px 0; }
.p22-news-item time { color: #608087; font-size: 10px; }
.p22-news-item h2 { margin: 0; color: #253c42; font-size: 15px; }
.p22-news-item p { grid-column: 2; line-height: 1.8; }
.p22-trend-module { grid-column: span 4; color: #eff9f7; background: #28505a !important; }
.p22-trend-module > header { border-color: #62aeb2 !important; }
.p22-trend-module h2 { color: #b3e1dc; }
.p22-trend-note { padding: 5px 2px; }
.p22-resource-module { grid-column: span 6; background: #d8e9e4 !important; }
.p22-resource-entry { padding: 5px 2px; }
.p22-insight-module { grid-column: span 4; }
.p22-insight-panel { padding: 5px 2px; }
.p22-community-module { grid-column: span 6; }
.p22-community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p22-community-grid .site-viewpoint { padding: 12px; background: #eaf2ef; border-radius: 0 14px; }
.p22-community-grid .site-viewpoint:last-child { grid-column: 1 / -1; }
.p22-community-grid h3 { font-size: 14px; }
.p22-community-grid p { line-height: 1.8; }
.p22-community-grid small { display: block; margin-top: 7px; color: #28727b; }
.p22-timeline-module { grid-column: span 4; background: #f0e9dd !important; }
.p22-timeline-note { padding: 5px 1px; }
.p22-deep-module { grid-column: span 6; background: #d9e8ec !important; }
.p22-deep-sheet { padding: 5px 2px 5px 13px; border-left: 3px solid #238d9b; }
.p22-gallery-module { grid-column: span 4; color: #eaf6f3; background: #1e3740 !important; }
.p22-gallery-module > header { border-color: #47727a !important; }
.p22-gallery-module h2 { color: #87d1d1; }
.p22-gallery-card { display: grid; grid-template-columns: 50px 1fr; gap: 10px; margin: 0; align-items: start; }
.p22-gallery-card figcaption { line-height: 1.85; }
.p22-gallery-card strong { display: block; margin-bottom: 6px; color: #eaf6f3; }
.p22-guide-module { grid-column: span 6; }
.p22-guide-frame { padding: 12px; background: #edf4ef; border: 1px dashed #84aaa0; }
.p22-faq-module { grid-column: span 10; background: #dce9e5 !important; }
.p22-faq-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.p22-question { padding: 10px 12px; background: #f8fbf6; border-left: 3px solid #36a5ad; }
.p22-question summary { color: #244d57; cursor: pointer; font-weight: 650; line-height: 1.6; }
.p22-answer { margin: 8px 0 0; line-height: 1.85; }
.p22-about-layout { display: grid; grid-template-columns: 150px minmax(0,1fr) 90px; grid-template-areas: "head head head" "rail copy art"; gap: 18px 22px; max-width: 1100px; margin: auto; padding: 28px; background: #fbfdf9; border-top: 5px solid #36a5ad; }
.p22-about-layout > header { grid-area: head; padding-bottom: 13px; border-bottom: 1px solid #cbdad6; }
.p22-about-layout > header p { color: #52818a; }
.p22-about-layout h1, .p22-news-page h1, .p22-data-page h1, .p22-online-page h1, .p22-app-page h1 { margin: 0; color: #203e47; font: 600 clamp(27px,3vw,38px)/1.2 Georgia,serif; }
.p22-about-rail { grid-area: rail; display: grid; align-content: start; gap: 8px; color: #376a70; font-size: 13px; }
.p22-about-rail strong { padding-bottom: 7px; border-bottom: 2px solid #36a5ad; }
.p22-about-entries { grid-area: copy; }
.p22-about-entries section { margin-bottom: 16px; line-height: 1.9; }
.p22-about-entries h2 { margin: 0 0 7px; font-size: 18px; }
.p22-about-entries p { margin: 0; }
.p22-about-art { grid-area: art; display: flex; flex-direction: column; gap: 8px; }
.p22-about-art img { padding: 5px; background: #e1ece8; }
.p22-news-page { max-width: 1180px; margin: auto; padding: 28px 32px; background: #fbfdf9; }
.p22-news-page > header { margin-bottom: 16px; padding-bottom: 13px; border-bottom: 2px solid #36a5ad; }
.p22-news-page > header p { color: #5b7f84; }
.p22-news-page .p22-news-list { grid-template-columns: 1fr; }
.p22-news-page .p22-news-item { grid-template-columns: 54px minmax(0,1fr); padding: 16px 3px; }
.p22-news-image { grid-row: span 3; width: 42px; height: 42px; object-fit: contain; }
.p22-data-page { max-width: 1040px; margin: auto; padding: 30px; color: #eaf6f3; background: #1e3740; }
.p22-data-page > header { margin-bottom: 22px; border-bottom: 1px solid #47727a; }
.p22-data-page h1 { color: #87d1d1; }
.p22-data-page > header p { color: #a8c9c9; }
.p22-data-columns { display: grid; grid-template-columns: 90px 1fr; gap: 22px; }
.p22-data-columns > aside { display: grid; align-content: start; gap: 7px; }
.p22-data-columns > aside b { padding: 9px 6px; color: #1f4149; background: #8fd2cf; text-align: center; font-size: 13px; }
.p22-data-copy section { padding: 15px 0; border-bottom: 1px solid #47636a; line-height: 1.9; }
.p22-data-copy h2 { margin: 0 0 8px; color: #b7e2dc; font-size: 17px; }
.p22-data-page > img { margin-top: 20px; }
.p22-online-page { max-width: 1060px; margin: auto; padding: 28px 33px; background: #d7e7e5; border-radius: 30px 0 0 0; }
.p22-online-page > header { padding-left: 16px; border-left: 4px solid #238d9b; }
.p22-online-page > header p { color: #52767b; }
.p22-word-band { display: flex; flex-wrap: wrap; gap: 8px; margin: 19px 0 14px; }
.p22-word-band span { padding: 8px 13px; color: #28535c; background: #f3f8f4; border-radius: 18px; font-size: 13px; }
.p22-online-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 15px; }
.p22-online-columns section { padding: 17px; background: #f4f8f3; line-height: 1.9; }
.p22-online-columns h2 { margin: 0 0 8px; color: #315f67; font-size: 18px; }
.p22-online-page > img { margin-top: 20px; }
.p22-app-page { max-width: 1060px; margin: auto; padding: 29px; background: #fbfdf9; }
.p22-app-page > header { padding-bottom: 14px; border-bottom: 3px solid #36a5ad; }
.p22-app-page > header p { color: #5e8183; }
.p22-app-stage { display: grid; grid-template-columns: 180px 1fr; gap: 25px; margin-top: 22px; align-items: center; }
.p22-device-card { min-height: 290px; padding: 25px 18px; border: 8px solid #213b43; border-radius: 29px; background: #dceae5; }
.p22-device-card div { width: 69%; height: 38px; margin: 15px auto; border: 1px solid #a5c7bd; border-radius: 6px; background: #f8fcf8; }
.p22-device-card div:nth-child(2) { width: 84%; height: 52px; background: #c9e2d4; }
.p22-device-card span { display: block; width: 35px; height: 4px; margin: 21px auto 0; border-radius: 4px; background: #527178; }
.p22-app-copy section { padding: 15px 0; border-bottom: 1px solid #cfddda; line-height: 1.9; }
.p22-app-copy h2 { margin: 0 0 8px; color: #2d5a63; font-size: 18px; }
footer.b35-footer { padding: 28px 5vw; color: #eaf6f3; background: #172e39; }
.b35-footer a { margin-right: 16px; color: #8fd2cf; }
@media (max-width: 900px) {
  main { padding: 20px 4vw 48px; }
  .p22-contents { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .p22-contents > section { grid-column: span 6 !important; }
  .p22-cover { grid-template-columns: 1fr; grid-template-areas: "title" "copy" "marks"; }
  .p22-mark-row { grid-template-columns: repeat(3,55px); justify-content: start; }
  .p22-about-layout { grid-template-columns: 1fr; grid-template-areas: "head" "rail" "copy" "art"; }
  .p22-about-rail, .p22-about-art { display: flex; flex-direction: row; flex-wrap: wrap; }
  .p22-data-columns { grid-template-columns: 1fr; }
  .p22-data-columns > aside { display: flex; flex-wrap: wrap; }
  .p22-app-stage { grid-template-columns: 1fr; }
  .p22-device-card { min-height: 180px; max-width: 220px; }
}
@media (max-width: 560px) {
  .p22-about-layout, .p22-news-page, .p22-data-page, .p22-online-page, .p22-app-page { padding: 19px; }
  .p22-news-list, .p22-faq-stack { grid-template-columns: 1fr; }
  .p22-community-grid { grid-template-columns: 1fr; }
  .p22-community-grid .site-viewpoint:last-child { grid-column: auto; }
}