:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #19252b;
  --text: #444;
  --muted: #777;
  --teal: #3dbdad;
  --line: #e1e5e3;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #148a7e; outline-offset: 6px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
.skip-link { position: absolute; left: 20px; top: -80px; padding: 12px; background: white; z-index: 2; }
.skip-link:focus { top: 16px; }
.site-header { max-width: 1200px; margin: auto; padding: 36px 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { flex: 0 0 112px; }
.brand img { width: 112px; height: 112px; }
nav { display: flex; align-items: center; gap: 44px; }
nav a, nav button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font-size: 16px; font-weight: 400; white-space: nowrap; }
nav a:hover, nav button:hover { color: #16897e; }
.intro { position: relative; padding-top: 64px; text-align: center; }
h1 { padding: 0 24px; color: #444; font-size: clamp(30px, 5.6vw, 60px); font-weight: 400; line-height: 1.25; letter-spacing: .06em; text-wrap: balance; }
.product-name-lead, .product-name-key, .product-name-tail { white-space: nowrap; }
.product-name-key { margin-inline: .18em; font-weight: 700; font-synthesis: weight; }
.system-char { position: relative; display: inline-block; }
.platforms { margin: 52px auto 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: center; }
.platforms li { position: relative; display: flex; align-items: center; gap: 13px; padding: 0 30px; color: #595e62; font-size: 22px; font-weight: 400; line-height: 32px; white-space: nowrap; }
.platforms li + li { border-left: 1px solid #c7cbce; }
.platforms li > img:not(.macos-accent):not(.medical-doodle) { width: 30px; height: 30px; opacity: .68; }
.macos-accent { position: absolute; width: 190px; height: 74px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.tutorial-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; margin-top: 76px; padding: 20px; background: white; border: 1px solid #333b40; border-radius: 5px; font-size: 20px; font-weight: 400; line-height: 32px; }
.tutorial-button img { width: 32px; height: 32px; }
.tutorial-button:hover { background: #f5faf8; }
.software-preview { position: relative; width: calc(100% - 48px); max-width: 1760px; margin: 132px auto 0; overflow: hidden; }
.software-preview img { width: 100%; height: auto; }
/* 原始截图独立嵌入机框，保留全貌与文字细节。 */
.software-screen { position: absolute; left: 4.1912%; top: 4.5378%; width: 91.6176%; line-height: 0; cursor: zoom-in; }
.software-preview .device-frame { width: 116.4706%; max-width: none; margin-left: -8.2353%; pointer-events: none; }
.first-version { max-width: 1160px; margin: 0 auto; padding: 168px 32px; display: grid; grid-template-columns: 400px 1fr; align-items: center; column-gap: 112px; }
.certificate-image { display: block; padding: clamp(10px, 1.2vw, 18px); border: 3px solid #cbd0cd; background: #fff; box-shadow: 0 1px 2px rgb(34 42 38 / 10%), 0 10px 28px rgb(34 42 38 / 10%), inset 0 0 0 1px #eceeec; cursor: zoom-in; }
.certificate-image img { width: 100%; height: auto; }
.version-copy h2 { color: #444; font-size: 32px; font-weight: 600; line-height: 1.4; }
.version-copy p { margin-top: 10px; color: #727577; font-size: 18px; line-height: 1.85; }
.history-list { display: grid; gap: 32px; margin: 36px 0 0; padding: 0; list-style: none; }
.history-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; }
.history-list time { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--teal); font-size: 26px; font-weight: 400; line-height: 1.5; }
.history-list h3 { color: #444; font-size: 20px; font-weight: 600; line-height: 1.5; }
.history-list p { text-wrap: pretty; }
.highlights { position: relative; max-width: 1280px; margin: auto; padding: 68px 80px 100px; }
.highlights > h2 { text-align: center; color: #484848; font-size: 60px; font-weight: 650; line-height: 1.4; }
.highlights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 112px 132px; margin-top: 104px; }
.highlights article { padding-left: 30px; }
.highlights h3 { position: relative; font-size: 32px; font-weight: 600; line-height: 1.45; }
.highlights h3::before { content: ""; position: absolute; left: -30px; top: .19em; width: 3px; height: 1em; border-radius: 2px; background: var(--teal); }
.highlights p { text-wrap: balance; margin-top: 20px; color: var(--muted); font-size: 24px; font-weight: 400; line-height: 1.85; }
.highlights .highlights-intro { max-width: 40em; margin: 24px auto 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 20px); font-weight: 400; line-height: 1.8; text-align: center; }
.medical-doodle { position: absolute; opacity: .14; pointer-events: none; }
.highlight-glucose { width: 42px; height: 42px; max-width: none; left: 50%; top: calc(100% + 36px); transform: translateX(-50%) rotate(-18deg); }
.highlight-platforms { position: relative; }
.highlight-iv-bag { width: 42px; height: 42px; right: 54px; top: calc(100% + 114.2px); transform: translateX(50%) rotate(18deg); }
.highlight-doodle-anchor { position: relative; }
.highlight-infrared { opacity: .4; width: 42px; height: 42px; max-width: none; left: 50%; top: calc(100% + 36px); transform: translateX(-50%) rotate(-17deg); }
.syringe { left: 9%; top: 24px; width: 48px; height: 48px; transform: rotate(-19deg); }
.bandaids { right: 10%; top: 326px; width: 40px; height: 40px; transform: rotate(12deg); }
.system-doodle { left: 50%; top: calc(1.25em + 177px); width: 40px; height: 40px; opacity: .4; transform: translateX(-50%) rotate(-14deg); }
.blood-pressure { left: 45px; top: calc(314px - 1.25 * clamp(30px, 5.6vw, 60px)); width: 44px; height: 44px; transform: translateX(-50%) rotate(-12deg); }
.stethoscope { right: 7%; top: 18px; width: 56px; height: 56px; transform: rotate(17deg); }
.thermometer { left: 14%; bottom: 28px; width: 42px; height: 42px; transform: rotate(-31deg); }
dialog { width: min(440px, calc(100% - 40px)); padding: 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: white; }
dialog::backdrop { background: rgb(28 42 39 / 25%); }
dialog h2 { font-size: 24px; font-weight: 500; }
dialog p { margin-top: 18px; font-size: 16px; line-height: 1.8; color: #6d7470; }
.close-panel { float: right; min-height: 44px; padding: 0 8px; margin: -12px -8px 0 12px; border: none; background: white; color: #68716e; font-size: 14px; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 1350px) {
  .highlight-iv-bag { right: 78px; }
  .site-header { margin-inline: 8%; }
  .software-preview { margin-inline: 24px; }
  .first-version { margin-inline: auto; padding-inline: 32px; }
  .highlights { margin-inline: 3%; padding-inline: 48px; }
  .highlights-grid { column-gap: 84px; }
}
@media (max-width: 850px) {
  .highlight-iv-bag { width: 32px; height: 32px; right: -24px; top: calc(100% + 24px); }
  .highlight-glucose { width: 32px; height: 32px; top: calc(100% + 25px); }
  .highlight-infrared { width: 32px; height: 32px; top: calc(100% + 25px); }
  .site-header { padding-block: 24px; gap: 20px; }
  .brand { flex-basis: 88px; }
  .brand img { width: 88px; height: 88px; }
  nav { gap: 20px; }
  .intro { padding-top: 72px; }
  .blood-pressure { top: calc(306px - 1.25 * clamp(30px, 5.6vw, 60px)); }
  .first-version { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding-block: 132px; }
  .version-copy h2 { font-size: 28px; }
  .version-copy p { font-size: 16px; }
  .history-list { gap: 28px; }
  .history-list li { grid-template-columns: 58px minmax(0, 1fr); gap: 18px; }
  .history-list time { font-size: 22px; }
  .history-list h3 { font-size: 18px; }
  .highlights-grid { gap: 80px 48px; }
  .highlights h3 { font-size: 22px; }
  .highlights p { font-size: 18px; }
}
@media (max-width: 600px) {
  .site-header { margin-inline: 20px; padding-block: 12px; gap: 12px; }
  .brand { flex-basis: 76px; }
  .brand img { width: 76px; height: 76px; }
  nav { justify-content: flex-end; flex-wrap: nowrap; column-gap: 12px; row-gap: 0; }
  nav a, nav button { min-height: 40px; font-size: 14px; }
  .intro { position: relative; padding-top: 64px; }
  h1 { padding-inline: 24px; font-size: clamp(26px, 7.8vw, 30px); line-height: 1.45; letter-spacing: .05em; }
  .product-name-lead, .product-name-tail { font-weight: 300; }
  .product-name-tail { display: block; }
  .system-char { position: static; }
  .platforms { margin-top: 44px; }
  .platforms li { gap: 6px; padding-inline: 11px; font-size: 14px; line-height: 24px; }
  .platforms li > img:not(.macos-accent):not(.medical-doodle) { width: 20px; height: 20px; }
  .macos-accent { width: 116px; height: 52px; }
  .tutorial-button { margin-top: 64px; font-size: 17px; line-height: 26px; padding: 16px; gap: 14px; }
  .tutorial-button img { width: 28px; height: 28px; }
  .software-preview { width: calc(100% - 24px); margin-top: 96px; margin-inline: auto; }
  .first-version { display: flex; flex-direction: column; gap: 64px; padding: 120px 24px; }
  .certificate-preview { width: min(100%, 360px); }
  .version-copy h2 { font-size: 28px; }
  .version-copy p { font-size: 16px; margin-top: 10px; }
  .highlights { margin: 0; padding: 44px 40px 104px; }
  .highlights > h2 { font-size: 34px; }
  .highlights-grid { grid-template-columns: 1fr; gap: 60px; margin-top: 76px; }
  .highlights article { padding-left: 24px; }
  .highlights h3 { font-size: 22px; }
  .highlights h3::before { left: -24px; }
  .highlights p { font-size: 16px; margin-top: 16px; }
  .highlights article p { max-width: 17em; }
  .highlight-infrared, .highlight-glucose, .highlight-iv-bag { display: none; }
  .syringe { left: 8%; top: 12px; width: 30px; height: 30px; }
  .bandaids { right: 6%; top: 360px; width: 26px; height: 26px; }
  .system-doodle { left: auto; right: 6%; top: 300px; width: 26px; height: 26px; transform: rotate(-14deg); }
  .blood-pressure { left: 21px; top: calc(272px - 2.9 * clamp(26px, 7.8vw, 30px)); width: 28px; height: 28px; }
  .stethoscope { right: 7%; top: 3px; width: 36px; height: 36px; }
  .thermometer { left: 12%; bottom: 20px; width: 30px; height: 30px; }
}
@media (max-width: 374px) {
  .brand { flex-basis: 64px; }
  .brand img { width: 64px; height: 64px; }
  nav { column-gap: 6px; }
  nav a, nav button { font-size: 12px; }
}
@media (min-width: 1024px) {
  .highlight-iv-bag { right: calc(120px - 4.5vw); }
  .site-header { width: 84%; max-width: none; margin-inline: auto; }
  .software-preview { width: 96%; max-width: none; margin-inline: auto; }
  .first-version { width: 86%; max-width: none; padding-inline: 0; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); column-gap: 7vw; }
  .highlights { width: 86%; max-width: none; margin-inline: auto; padding-inline: 0; }
  .highlights-grid { column-gap: 9vw; }
  .highlights p { max-width: 28em; }
}
@media (min-width: 1280px) {
  .first-version { grid-template-columns: minmax(0, 7fr) minmax(736px, 10fr); column-gap: 3vw; }
}
@media (min-width: 1151px) {
  .first-version { align-items: stretch; }
  .certificate-preview { align-self: center; }
  .version-copy { display: flex; flex-direction: column; }
  .history-list { flex: 1; align-content: space-between; gap: 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 1150px) { .highlight-iv-bag { display: none; } }

.product-footer { overflow: hidden; margin-top: 16px; padding-top: 48px; background: #fff; }
.footer-columns { position: relative; top: -32px; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 64px; width: 74%; max-width: 1200px; margin: auto; }
.footer-columns h2 { margin: 0 0 20px; color: #444; font-size: 16px; font-weight: 400; line-height: 1.6; }
.footer-columns ul { margin: 0; padding: 0; list-style: none; }
.footer-columns li + li { margin-top: 5px; }
.footer-columns a, .footer-columns button { display: inline-block; padding: 4px 0; border: 0; background: none; color: #555; font-size: 16px; font-weight: 400; line-height: 1.6; }
.footer-columns a:hover, .footer-columns button:hover, .footer-legal a:hover { color: #16897e; }
.footer-contact .footer-phone { padding-top: 4px; white-space: nowrap; }
.footer-contact p { margin-top: 16px; color: #777; font-size: 14px; line-height: 1.7; }
.footer-scene { position: relative; margin-top: calc(-20vw - 18px); }
.footer-scene > img { width: 100%; height: auto; pointer-events: none; }
.footer-legal { position: absolute; bottom: 13%; left: 37%; width: 29%; text-align: center; color: #777; font-size: 13px; line-height: 1.8; }
.footer-legal p { margin-bottom: 6px; }
@media (max-width: 850px) {
  .product-footer { padding-top: 64px; }
  .footer-columns { width: 84%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
  .footer-legal { position: static; width: auto; padding: 8px 20px 28px; font-size: 12px; }
  .footer-scene { margin-top: calc(-20vw + 20px); }
}
@media (max-width: 600px) {
  .product-footer { overflow: hidden; margin-top: 16px; }
  .footer-columns h2 { margin-bottom: 14px; }
  .footer-columns a, .footer-columns button { font-size: 15px; min-height: 40px; }
  .footer-columns li + li { margin-top: 2px; }
  .footer-contact p { margin-top: 4px; font-size: 12px; }
}

.wecom-contact { position: relative; padding: 40px 24px 48px; text-align: center; }
.wecom-contact h2 { color: #444; font-size: 46px; font-weight: 650; line-height: 1.4; }
.wecom-intro { text-wrap: balance; margin: 22px auto 0; color: var(--muted); font-size: 20px; line-height: 1.8; }
.wecom-qr { width: 190px; height: 190px; margin: 34px auto 0; }
.wecom-caption { margin-top: 20px; color: #555; font-size: 18px; line-height: 1.6; }
@media (max-width: 600px) {
  .wecom-contact { padding: 32px 24px 36px; }
  .wecom-contact h2 { font-size: 30px; }
  .wecom-intro { max-width: 20em; margin-top: 18px; font-size: 16px; }
  .wecom-qr { margin-top: 34px; }
  .wecom-caption { font-size: 17px; }
}

.wecom-contact > :not(.wecom-art) { position: relative; z-index: 1; }
.wecom-art { position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); width: 92%; max-width: 1600px; height: auto; opacity: .75; pointer-events: none; }
@media (max-width: 850px) {
  .wecom-art { display: none; }
}

@media (max-width: 850px) {
  .highlights > h2, .wecom-contact h2 { font-weight: 700; font-synthesis: weight; }
}