/*! * M5Stack Web Design Tokens v1.0.0 * 来源：m5stack.com 源码快照（dev @ f63985c，2026-10-13），核对于 2026-10-22 * 用法：，再按需引入 components.css * 密度：默认 product（1440 固定像素）；营销页在或任意容器加 data-m5-density="marketing" */ :root{--m5-blue:#0282cb;--m5-blue-hover:#0295e9;--m5-blue-active:#016fad;--m5-blue-deep:#0064c2;--m5-black:#000;--m5-ink:#434343;--m5-ink-2:#555;--m5-ink-muted:#707070;--m5-ink-hint:#959595;--m5-ink-on-dark:#a0a0a0;--m5-ink-inverse:#fff;--m5-line:#e5e5e5;--m5-line-soft:#eee;--m5-line-strong:silver;--m5-surface:#fff;--m5-surface-subtle:#f5f7f6;--m5-surface-inverse:#000;--m5-danger:#ff4d4f;--m5-warning:#ff8a00;--m5-success:#00a870;--m5-font:Montserrat, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;--m5-font-display:"HuXiaoBoSaoBaoTi", Montserrat, "Microsoft YaHei", sans-serif;--m5-font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;--m5-radius-xs:4px;--m5-radius-sm:6px;--m5-radius-md:8px;--m5-radius-lg:10px;--m5-radius-xl:12px;--m5-radius-2xl:16px;--m5-radius-pill:999px;--m5-shadow-sm:0 1px 2px #0000000f;--m5-shadow-md:1px 1px 10px #81818166;--m5-shadow-lg:0 4px 8px #0000001a;--m5-dur-fast:.1s;--m5-dur-base:.25s;--m5-dur:.3s;--m5-dur-slow:.38s;--m5-dur-reveal:.75s;--m5-ease:ease;--m5-ease-emphasized:cubic-bezier(.8, 0, .2, 1);--m5-container:1320px;--m5-container-header:1330px;--m5-gutter:24px;--m5-header-h:56px;--m5-font-display-size:44px;--m5-font-h1:36px;--m5-font-h2:28px;--m5-font-h3:20px;--m5-font-body-l:18px;--m5-font-body:16px;--m5-font-caption:13px;--m5-font-nav:14px;--m5-font-btn:14px;--m5-space-xs:4px;--m5-space-s:8px;--m5-space-m:12px;--m5-space-l:16px;--m5-space-xl:24px;--m5-space-2xl:32px;--m5-space-3xl:48px;--m5-space-4xl:64px}[data-m5-density=marketing]{--m5-font-display-size:82px;--m5-font-h1:60px;--m5-font-h2:46px;--m5-font-h3:30px;--m5-font-body-l:28px;--m5-font-body:22px;--m5-font-caption:18px;--m5-font-nav:19px;--m5-font-btn:20px;--m5-space-xs:10px;--m5-space-s:16px;--m5-space-m:20px;--m5-space-l:28px;--m5-space-xl:40px;--m5-space-2xl:60px;--m5-space-3xl:80px;--m5-space-4xl:146px;--m5-gutter:40px;--m5-header-h:60px}@media (width<=1024px){[data-m5-density=marketing]{--m5-font-display-size:56px;--m5-font-h1:44px;--m5-font-h2:34px;--m5-font-h3:22px;--m5-font-body-l:20px;--m5-font-body:17px;--m5-font-caption:14px;--m5-font-nav:15px;--m5-font-btn:16px;--m5-space-3xl:56px;--m5-space-4xl:72px}}@media (width<=640px){[data-m5-density=marketing]{--m5-font-display-size:40px;--m5-font-h1:32px;--m5-font-h2:26px;--m5-font-h3:19px;--m5-font-body-l:18px;--m5-font-body:16px;--m5-font-caption:13px;--m5-font-nav:14px;--m5-font-btn:14px;--m5-space-3xl:40px;--m5-space-4xl:48px;--m5-gutter:20px}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--m5-font);font-size:var(--m5-font-body);color:var(--m5-ink);background:var(--m5-surface);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;line-height:1.6}h1,h2,h3,h4{color:var(--m5-ink);margin:0;font-weight:700;line-height:1.28}h1{font-size:var(--m5-font-h1)}h2{font-size:var(--m5-font-h2)}h3{font-size:var(--m5-font-h3)}h4{font-size:var(--m5-font-body-l)}p{margin:0 0 var(--m5-space-m)}a{color:var(--m5-blue);text-decoration:none}a:hover{color:var(--m5-blue-hover)}img{max-width:100%;height:auto;display:block}ul,ol{margin:0;padding:0;list-style:none}button{font-family:inherit}:focus-visible{outline:2px solid var(--m5-blue);outline-offset:2px}::selection{color:var(--m5-ink);background:#0282cb2e}.m5-display{font-family:var(--m5-font-display);font-size:var(--m5-font-display-size);color:var(--m5-blue);font-weight:700;line-height:1.15}.m5-h1{font-size:var(--m5-font-h1);font-weight:700}.m5-h2{font-size:var(--m5-font-h2);font-weight:700}.m5-h3{font-size:var(--m5-font-h3);font-weight:700}.m5-lead{font-size:var(--m5-font-body-l);color:var(--m5-ink-2)}.m5-caption{font-size:var(--m5-font-caption);color:var(--m5-ink-hint)}.m5-mono{font-family:var(--m5-font-mono)}.m5-section-title{font-size:var(--m5-font-h2);color:var(--m5-blue);font-weight:700}.m5-container{width:100%;max-width:var(--m5-container);padding:0 var(--m5-gutter);margin:0 auto}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:root{--m5-font:Arial,"PingFang SC","Microsoft YaHei",sans-serif}body{color:#333a3e;background:#fff;font-size:13px}header{border-bottom:1px solid #e6e9e8;justify-content:space-between;align-items:center;gap:24px;height:76px;padding:0 3.5%;display:flex}.brand{letter-spacing:-1px;color:#14191b;align-items:center;font-size:27px;font-weight:900;display:flex}.brand>span{color:var(--m5-blue)}.brand i{border-left:1px solid #dfe3e4;height:22px;margin:0 20px}.brand small{letter-spacing:2px;font-size:11px}.header-note{letter-spacing:.4px;color:#929b9f;font-size:10px}.header-note span{color:#ccd1d2;margin:0 10px}header>a:last-child{font-size:11px}main{max-width:1800px;margin:auto;padding:0 3.5%}.intro{justify-content:space-between;align-items:center;gap:30px;padding:35px 0 30px;display:flex}.eyebrow{letter-spacing:1.8px;color:var(--m5-blue);margin:0 0 12px;font-size:9px;font-weight:700}h1{color:var(--m5-blue);letter-spacing:-1px;font-size:clamp(25px,2.6vw,38px)}.intro p:last-child{color:#939ca1;margin:11px 0 0;font-size:12px}.coverage{color:#939da3;white-space:nowrap;gap:24px;font-size:10px;display:flex}.coverage strong{color:#292e32;font-size:32px;font-weight:500;line-height:1.2;display:block}.library{grid-template-columns:234px minmax(0,1fr);gap:22px;display:grid}.catalog{background:#fff;border:1px solid #e6eaeb;border-radius:10px;flex-direction:column;align-self:start;max-height:890px;display:flex;overflow:hidden}#search{color:#384248;outline-offset:2px;background:#f7f9f8;border:1px solid #e3e8e6;border-radius:6px;width:calc(100% - 28px);margin:16px 14px 12px;padding:10px 12px;font-size:11px}.filters{gap:4px;padding:0 14px;display:flex}.filters button{flex:1;padding:7px 8px;font-size:10px}.filters button.active{color:var(--m5-blue);background:#eaf5fb}button{cursor:pointer;color:#879198;background:0 0;border:0;border-radius:6px;padding:7px 10px;font-family:inherit;font-size:10px;transition:background .2s,color .2s}button:hover{color:var(--m5-blue);background:#eef3f5}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--m5-blue);outline-offset:2px}.list-hint{color:#a1aaae;margin:13px 0 12px;padding:0 16px;font-size:9px}#product-list{padding:0 8px 10px;overflow:auto}.group-title{letter-spacing:1.2px;color:#a2abb0;padding:10px 10px 5px;font-size:9px}.product-option{text-align:left;border:1px solid #0000;align-items:center;gap:10px;width:100%;margin:2px 0;padding:11px 10px;display:flex}.product-option.selected{background:#f0f8fc;border-color:#d5eaf5}.product-option>span:first-child{width:24px;font-family:var(--m5-font-mono);color:#9aa8b0;font-size:9px}.product-option>div{flex:1}.product-option strong{color:#3c454a;font-size:11px;font-weight:600;display:block}.product-option small{color:#a0a9ae;margin-top:3px;font-size:9px;display:block}.dot{background:#c7d0d5;border-radius:50%;width:5px;height:5px}.dot.modeled{background:#69afd3}.dot.verified{background:var(--m5-blue)}.content{min-width:0}.scene{background:#f5f7f6;border:1px solid #e4e9e7;border-radius:10px;flex-direction:column;min-height:590px;display:flex;position:relative;overflow:hidden}.scene-head{z-index:4;justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute;top:17px;left:22px;right:18px}#model-tag{color:#67757c;font-size:11px}.pill{color:#7e939f;background:#e9f0f3;border-radius:4px;margin-left:10px;padding:3px 7px;font-size:8px;display:inline-block}.tools{gap:2px;display:flex}.tools button[aria-pressed=true]{color:var(--m5-blue);background:#e3f1f8}#stage{position:absolute;inset:0 0 55px;overflow:hidden}#loading{color:#9aa4a9;z-index:1;pointer-events:none;justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute;inset:0}[hidden]{display:none!important}.scene-foot{z-index:4;background:#fafbfa;border-top:1px solid #e1e7e4;justify-content:space-between;align-items:center;gap:12px;min-height:55px;margin-top:auto;padding:0 15px;display:flex;position:relative}.scene-foot>span{color:#a0aaae;font-size:9px}.views{background:#fff;border:1px solid #e7ebea;border-radius:7px;gap:1px;padding:3px;display:flex}.views button{padding:5px 10px;font-size:9px}.views button.active{background:var(--m5-blue);color:#fff}#reference-panel{z-index:3;background:#fff;border:1px solid #dce5e7;border-radius:8px;width:220px;padding:8px;position:absolute;bottom:77px;right:22px;box-shadow:0 6px 20px #26364212}#reference-panel img{object-fit:contain;width:100%;height:200px}#reference-panel span{color:#a3adb3;text-align:center;padding:7px 0 2px;font-size:8px;display:block}#pending{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:60px 40px 85px}#pending img{object-fit:contain;mix-blend-mode:multiply;max-width:90%;max-height:330px}#pending p{color:#8b989f;margin-top:15px;font-size:11px}#error{color:#9d4c4c;z-index:5;background:#fff;border:1px solid #e7d8d8;padding:20px;font-size:12px;position:absolute;inset:80px 40px auto}.product-detail{grid-template-columns:1fr 1fr;gap:36px;padding:28px 5px 35px;display:grid}.product-detail h2{color:#38434a;letter-spacing:-.3px;margin-bottom:16px;font-size:20px}.product-detail h2 small{color:#a3adb2;margin-left:10px;font-size:10px;font-weight:400}.facts-grid{grid-template-columns:1fr 1fr;gap:10px 22px;display:grid}.fact{font-size:10px}.fact span{color:#9ea8ae;margin-bottom:3px;font-size:9px;display:block}.fact strong{color:#5c6b74;font-weight:500}.detail-reference{border-left:1px solid #ebeeee;padding-left:28px}.detail-reference .eyebrow{font-size:8px}.progress-line{color:#86949c;margin:0 0 9px;font-size:11px;line-height:1.9}.next-action{color:#89969d;margin:8px 0;font-size:10px;line-height:1.9}.limitation{color:#a1a9ad;font-size:9px;line-height:1.9}.source-link{margin-top:10px;font-size:10px;display:inline-block}footer{color:#c4cbcf;background:#000;justify-content:space-between;align-items:center;margin:10px -3.8% 0;padding:24px 3.8%;font-size:9px;display:flex}footer span span,footer>span:nth-child(2){color:#6c777e;margin-left:12px}footer a{color:#a0adb4}.empty{color:#9aa7ae;padding:20px;font-size:12px}@media (width<=1100px){.header-note{display:none}.library{grid-template-columns:204px minmax(0,1fr);gap:16px}.scene{min-height:540px}.scene-foot{justify-content:center}.scene-foot>span{display:none}.scene-head{left:16px;right:12px}.tools button{padding:7px;font-size:9px}.product-detail{gap:22px}.detail-reference{padding-left:20px}.coverage{gap:17px}.coverage strong{font-size:27px}}@media (width<=760px){header{height:64px}.brand{font-size:24px}.brand i{margin:0 12px}header>a:last-child{font-size:9px}.intro{padding:28px 0 22px;display:block}.intro h1{max-width:320px;font-size:27px;line-height:1.4}.intro p:last-child{max-width:320px;font-size:11px;line-height:1.8}.coverage{gap:25px;margin-top:20px}.coverage strong{font-size:24px}.coverage>div{align-items:center;gap:8px;font-size:9px;display:flex}.library{flex-direction:column;gap:15px;display:flex}.catalog{width:100%;max-height:none;display:block}#product-list{gap:7px;padding:4px 10px 10px;display:flex;overflow:auto}.group-title{display:none}.product-option{flex-shrink:0;width:145px;margin:0;padding:10px 8px}.product-option>span:first-child{width:16px}.product-option strong{font-size:10px}.product-option small{font-size:8px}.dot{width:4px;height:4px}.filters{padding-bottom:6px}.filters button{flex:0;padding:7px 14px}.list-hint{display:none}#search{width:calc(100% - 24px);margin:12px 12px 8px}.scene{min-height:445px}.scene-head{flex-direction:column;align-items:flex-start;gap:5px;top:13px;left:14px}.tools{margin-left:-7px}.tools button{padding:5px 7px;font-size:8px}.pill{font-size:7px}#model-tag{font-size:10px}.views button{padding:6px 8px;font-size:8px}.scene-foot{padding:0 8px}.product-detail{grid-template-columns:1fr;gap:23px;padding:24px 5px}.detail-reference{border-top:1px solid #e7edef;border-left:0;padding:20px 0 0}.product-detail h2{font-size:21px}.coverage div{white-space:nowrap}footer{flex-wrap:wrap;gap:12px;line-height:1.8}footer>span:nth-child(2){display:none}#reference-panel{width:160px;bottom:70px;right:12px}#reference-panel img{height:150px}.progress-line{font-size:11px}}#configuration{color:#72838e;background:#fff;border:1px solid #dbe4e8;border-radius:5px;max-width:150px;margin-right:4px;padding:4px;font-size:9px}.dynamics{border:1px solid var(--m5-line-default,#e5e5e5);background:#fff;border-radius:10px;margin-top:18px;padding:22px}.dynamics-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.dynamics-heading .eyebrow{margin-bottom:7px}.dynamics h3{color:var(--m5-blue);margin:0;font-size:20px}.dynamics-heading>span{color:#707070;font-size:11px}.dynamics-grid{grid-template-columns:1fr 1fr;gap:24px 32px;display:grid}.dynamics h4{color:#434343;margin:0 0 10px;font-size:14px;font-weight:600}.tools{flex-wrap:wrap;align-items:center}#display-target{color:#555;max-width:190px;font:inherit;background:#fff;border:1px solid #e5e5e5;border-radius:6px;padding:5px 7px;font-size:10px}.control-note{color:#707070;margin:8px 0 12px;font-size:11px;line-height:1.7}.connection-selects{grid-template-columns:1fr 1fr;gap:10px;display:grid}.connection-selects label{color:#707070;font-size:11px}.connection-selects select{color:#434343;width:100%;font:inherit;background:#fff;border:1px solid #e5e5e5;border-radius:6px;margin-top:5px;padding:8px;display:block}.connection-actions{flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;display:flex}.dynamics button{color:#555;background:#fff;border:1px solid #e5e5e5;padding:8px 12px;font-size:11px}.dynamics button:disabled{opacity:.45;cursor:default}.dynamics button:hover:not(:disabled){color:var(--m5-blue);background:#f5f7f6}.dynamics .action-primary{background:var(--m5-blue);color:#fff;border-color:var(--m5-blue)}.dynamics .action-primary:hover:not(:disabled){color:#fff;background:#0295e9}.connection-actions output{color:#707070;font-size:11px}.range-control{color:#555;grid-template-columns:76px minmax(60px,1fr) 66px;align-items:center;gap:10px;margin:12px 0;font-size:11px;display:grid}.range-control input{width:100%;accent-color:var(--m5-blue);min-width:0}.range-control output{text-align:right;font-family:var(--m5-font-mono);color:#707070;font-size:10px}#cable-controls{margin-top:16px}.button-controls{flex-wrap:wrap;gap:6px;max-height:235px;padding:2px;display:flex;overflow:auto}.dynamics .model-button{touch-action:none;-webkit-user-select:none;user-select:none;min-width:42px}.dynamics .model-button[aria-pressed=true]{border-color:var(--m5-blue);color:var(--m5-blue);background:#eaf5fb;transform:translateY(1px)}.joint-control{border-bottom:1px solid #eee;padding:10px 0}.joint-control:first-child{padding-top:0}.joint-control strong{color:#434343;font-size:12px;font-weight:500}.joint-status{color:#707070;font-size:11px;font-family:var(--m5-font-mono);margin-left:12px}#input-events{white-space:pre-wrap;line-height:1.8;font-family:var(--m5-font-mono);overflow-wrap:anywhere;color:#555;background:#f5f7f6;border-radius:6px;min-height:90px;padding:12px;font-size:10px;display:block}.input-events details{color:#707070;margin-top:12px;font-size:11px}.input-events summary{cursor:pointer;padding:5px 0}.input-events pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f5f7f6;max-height:230px;padding:12px;font-size:10px;overflow:auto}.dynamics select:focus-visible,.dynamics input:focus-visible{outline:2px solid var(--m5-blue);outline-offset:2px}.button-inspection{color:#707070;border-top:1px solid #eee;margin-top:16px;padding-top:12px;font-size:11px}.button-inspection label{align-items:center;gap:10px;display:flex}.button-inspection select{min-width:0;max-width:230px;font:inherit;color:#555;background:#fff;border:1px solid #e5e5e5;border-radius:6px;padding:6px}.button-inspection>div{gap:6px;margin:10px 0;display:flex}.button-inspection>output{font-family:var(--m5-font-mono);font-size:10px;line-height:1.7;display:block}.led-selects{grid-template-columns:minmax(0,1fr) 72px;gap:10px;display:grid}.led-selects label{color:#707070;font-size:11px}.led-selects select,.led-selects input{color:#434343;width:100%;height:34px;font:inherit;background:#fff;border:1px solid #e5e5e5;border-radius:6px;margin-top:5px;padding:5px;display:block}.led-state{font-family:var(--m5-font-mono);color:#707070;margin-left:10px;font-size:10px;display:inline-block}@media (width<=760px){.dynamics{padding:16px}.dynamics-grid{grid-template-columns:1fr;gap:24px}.dynamics-heading{align-items:flex-start}.dynamics-heading>span{max-width:125px;font-size:10px;line-height:1.6}.range-control{grid-template-columns:70px minmax(60px,1fr) 60px;gap:7px}}