/* ═══════════════════════════════════════════════════════════════
   Quiet Switch — 全站唯一样式表
   前缀 qs-　版心 1120px　字体 Bricolage Grotesque + Source Sans 3
   配色：墨 #12131A / 玫 #D4426B / 钢蓝 #4A7AB5 / 纸 #F6F4EF
   这套值不得出现在任何其它站点。
   ═══════════════════════════════════════════════════════════════ */

:root{
  --qs-ink:#12131A;
  --qs-ink-2:#2B2E3C;
  --qs-ink-3:#5A5F73;
  --qs-paper:#F6F4EF;
  --qs-paper-2:#EDEAE2;
  --qs-card:#FFFFFF;
  --qs-rose:#D4426B;
  --qs-rose-soft:#FBEDF1;
  --qs-steel:#4A7AB5;
  --qs-steel-soft:#ECF2F9;
  --qs-line:#DED9CF;
  --qs-wrap:1120px;

  /* 协议色——全站统一，读者扫一眼就知道设备走哪条网络 */
  --qs-matter:#6B4BD6;
  --qs-thread:#1E8A6E;
  --qs-zigbee:#C8761A;
  --qs-wifi:#3E6FA8;
  --qs-zwave:#A6373F;

  --qs-r:14px;
  --qs-r-sm:8px;
  --qs-shadow:0 1px 2px rgba(18,19,26,.05), 0 8px 24px -12px rgba(18,19,26,.18);
  --qs-shadow-lift:0 2px 4px rgba(18,19,26,.06), 0 18px 40px -16px rgba(18,19,26,.26);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--qs-paper);
  color:var(--qs-ink);
  font:400 17px/1.68 "Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4,h5{
  font-family:"Bricolage Grotesque","Source Sans 3",sans-serif;
  font-weight:700;letter-spacing:-.022em;line-height:1.16;margin:0;
  font-variation-settings:"wdth" 100,"opsz" 24;
}
h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.15rem);letter-spacing:-.032em}
h2{font-size:clamp(1.45rem,1.1rem + 1.3vw,2.05rem)}
h3{font-size:1.2rem;letter-spacing:-.012em}
p{margin:0 0 1.05em}
:focus-visible{outline:2.5px solid var(--qs-rose);outline-offset:3px;border-radius:4px}

.qs-wrap{width:100%;max-width:var(--qs-wrap);margin-inline:auto;padding-inline:22px}

/* ── 跳转链接 ─────────────────────────────────────────────── */
.qs-skip{position:absolute;left:-9999px;top:0;background:var(--qs-ink);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 var(--qs-r-sm) 0}
.qs-skip:focus{left:0}

/* ── 顶栏：房间带 ─────────────────────────────────────────── */
.qs-top{position:sticky;top:0;z-index:60;background:rgba(246,244,239,.9);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--qs-line)}
.qs-top-in{display:flex;align-items:center;gap:20px;height:62px}
.qs-logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.06rem;letter-spacing:-.03em;flex:none}
.qs-logo svg{width:26px;height:26px;flex:none}
.qs-logo b{color:var(--qs-rose)}
.qs-rooms{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;margin:0;padding:0;list-style:none}
.qs-rooms::-webkit-scrollbar{display:none}
.qs-rooms a{
  display:block;white-space:nowrap;text-decoration:none;font-size:.86rem;font-weight:600;
  color:var(--qs-ink-3);padding:7px 11px;border-radius:999px;transition:background .15s,color .15s;
}
.qs-rooms a:hover{background:var(--qs-paper-2);color:var(--qs-ink)}
.qs-rooms a[aria-current="true"]{background:var(--qs-ink);color:#fff}

/* ── 首屏 ─────────────────────────────────────────────────── */
.qs-hero{background:var(--qs-ink);color:#EFEDE7;padding:62px 0 0;position:relative;overflow:hidden}
.qs-hero::after{
  content:"";position:absolute;inset:auto -10% -40% 55%;height:380px;
  background:radial-gradient(ellipse at center,rgba(212,66,107,.26),transparent 68%);
  pointer-events:none;
}
.qs-hero h1{color:#fff;max-width:17ch}
.qs-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:46px;align-items:start;position:relative;z-index:1}
.qs-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--qs-rose);margin-bottom:17px}
.qs-kicker::before{content:"";width:22px;height:2px;background:var(--qs-rose)}
.qs-lede{font-size:1.14rem;color:#C3C6D2;max-width:54ch;margin-top:18px}
.qs-meta{display:flex;flex-wrap:wrap;gap:7px 18px;font-size:.84rem;color:#8D92A4;margin:26px 0 40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.qs-meta b{color:#DADCE4;font-weight:600}

/* 首屏右侧：生态选择器 */
.qs-picker{background:#1C1E28;border:1px solid rgba(255,255,255,.1);border-radius:var(--qs-r);padding:22px;margin-top:8px}
.qs-picker h2{font-size:1.02rem;color:#fff;margin-bottom:5px}
.qs-picker p{font-size:.88rem;color:#9397A8;margin-bottom:15px}
.qs-eco{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.qs-eco button{
  font:600 .88rem/1.3 "Source Sans 3",sans-serif;color:#C9CCD6;cursor:pointer;
  background:#262935;border:1px solid rgba(255,255,255,.1);border-radius:var(--qs-r-sm);
  padding:11px 10px;text-align:left;transition:all .16s;
}
.qs-eco button:hover{background:#2F3240;color:#fff}
.qs-eco button[aria-pressed="true"]{background:var(--qs-rose);border-color:var(--qs-rose);color:#fff}
.qs-picker-out{font-size:.9rem;color:#B6BAC6;border-top:1px solid rgba(255,255,255,.1);padding-top:13px;min-height:62px}
.qs-picker-out b{color:#fff}
.qs-picker-out a{color:var(--qs-rose);text-decoration:none;font-weight:600}
.qs-picker-out a:hover{text-decoration:underline}

/* 首屏底部：12 个品类入口 */
.qs-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:1px;background:rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.09);margin-top:46px}
.qs-cats a{
  background:var(--qs-ink);padding:17px 16px 19px;text-decoration:none;display:block;transition:background .16s;
}
.qs-cats a:hover{background:#1A1C26}
.qs-cats em{display:block;font-style:normal;font-size:.71rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6E7386;margin-bottom:6px}
.qs-cats b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:.99rem;color:#fff;font-weight:700;letter-spacing:-.015em;margin-bottom:3px}
.qs-cats span{display:block;font-size:.82rem;color:#9398AA;line-height:1.45}

/* ── 内容区 ───────────────────────────────────────────────── */
.qs-main{padding:52px 0 0}
.qs-sec{padding:38px 0;border-bottom:1px solid var(--qs-line)}
.qs-sec:last-child{border-bottom:0}
.qs-h2{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.qs-h2 .qs-tagword{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--qs-rose);background:var(--qs-rose-soft);padding:4px 9px;border-radius:999px;flex:none;
}

/* 直答块——本站的署名式元素 */
.qs-answer{
  background:var(--qs-card);border:1px solid var(--qs-line);border-left:4px solid var(--qs-rose);
  border-radius:0 var(--qs-r-sm) var(--qs-r-sm) 0;padding:16px 20px;margin:0 0 22px;font-size:1.02rem;
}
.qs-answer b:first-child{color:var(--qs-rose)}

/* ── 协议标签 ─────────────────────────────────────────────── */
.qs-proto{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:5px;white-space:nowrap}
.qs-proto::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.qs-proto[data-p="matter"]{color:var(--qs-matter);background:#EFEAFB}
.qs-proto[data-p="thread"]{color:var(--qs-thread);background:#E6F4F0}
.qs-proto[data-p="zigbee"]{color:var(--qs-zigbee);background:#FBF0E2}
.qs-proto[data-p="wifi"]{color:var(--qs-wifi);background:#EBF1F8}
.qs-proto[data-p="zwave"]{color:var(--qs-zwave);background:#FAEBEC}

/* ── 产品卡：横向规格板 ───────────────────────────────────── */
.qs-card{
  background:var(--qs-card);border:1px solid var(--qs-line);border-radius:var(--qs-r);
  box-shadow:var(--qs-shadow);margin:20px 0;overflow:hidden;transition:box-shadow .2s,transform .2s;
}
.qs-card:hover{box-shadow:var(--qs-shadow-lift);transform:translateY(-1px)}
.qs-card-top{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0}
.qs-card-img{background:var(--qs-paper-2);border-right:1px solid var(--qs-line);padding:18px;display:flex;align-items:center;justify-content:center}
.qs-card-img img{width:100%;border-radius:var(--qs-r-sm)}
.qs-card-body{padding:20px 22px}
.qs-card-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.qs-badge{
  font-size:.71rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:var(--qs-ink);color:#fff;padding:5px 10px;border-radius:5px;flex:none;
}
.qs-card h3{flex:1 1 220px;min-width:0}
.qs-card-sub{font-size:.95rem;color:var(--qs-ink-3);margin-bottom:14px}

/* 兼容矩阵——四格，本站独有 */
.qs-works{display:flex;gap:0;border:1px solid var(--qs-line);border-radius:var(--qs-r-sm);overflow:hidden;margin:14px 0}
.qs-works div{flex:1;text-align:center;padding:9px 4px;font-size:.74rem;font-weight:700;letter-spacing:.02em;border-right:1px solid var(--qs-line);color:var(--qs-ink-3);background:var(--qs-paper)}
.qs-works div:last-child{border-right:0}
.qs-works div[data-ok="1"]{color:#17684F;background:#E8F4EF}
.qs-works div[data-ok="0"]{color:#9A9FB0;background:var(--qs-paper-2);text-decoration:line-through}
.qs-works div em{display:block;font-style:normal;font-size:.63rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.65;margin-bottom:1px}

.qs-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;background:var(--qs-line);border:1px solid var(--qs-line);border-radius:var(--qs-r-sm);overflow:hidden;margin:14px 0}
.qs-specs div{background:var(--qs-card);padding:9px 11px}
.qs-specs dt{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--qs-ink-3);margin-bottom:2px}
.qs-specs dd{margin:0;font-size:.91rem;font-weight:600}

.qs-why{margin:14px 0 0;padding:0 0 0 1.1em;font-size:.97rem}
.qs-why li{margin-bottom:7px}
.qs-why li::marker{color:var(--qs-rose)}

.qs-skip-if{
  background:var(--qs-paper-2);border-radius:var(--qs-r-sm);padding:12px 15px;margin:15px 0 0;font-size:.93rem;color:var(--qs-ink-2);
}
.qs-skip-if b{color:var(--qs-ink)}

.qs-card-foot{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:15px 22px;border-top:1px solid var(--qs-line);background:var(--qs-paper)}
.qs-rating{font-size:.88rem;color:var(--qs-ink-3)}
.qs-rating b{color:var(--qs-ink);font-size:1rem}

/* ── 按钮 ─────────────────────────────────────────────────── */
.qs-b{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  font:700 .94rem/1 "Source Sans 3",sans-serif;padding:12px 19px;border-radius:999px;border:1.5px solid transparent;transition:all .16s;
}
.qs-b-go{background:var(--qs-rose);color:#fff}
.qs-b-go:hover{background:#BE3A5F;transform:translateY(-1px)}
.qs-b-line{background:transparent;color:var(--qs-ink);border-color:var(--qs-line)}
.qs-b-line:hover{border-color:var(--qs-ink);background:var(--qs-card)}
.qs-b-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)}
.qs-b-ghost:hover{background:rgba(255,255,255,.16)}

/* ── 表格 ─────────────────────────────────────────────────── */
.qs-tablewrap{overflow-x:auto;border:1px solid var(--qs-line);border-radius:var(--qs-r);background:var(--qs-card);margin:20px 0}
.qs-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}
.qs-table th,.qs-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--qs-line)}
.qs-table thead th{background:var(--qs-paper-2);font-size:.73rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--qs-ink-3);position:sticky;top:0}
.qs-table tbody tr:last-child td{border-bottom:0}
.qs-table tbody tr:hover{background:var(--qs-paper)}
.qs-table td:first-child{font-weight:600}

/* ── 提示框 ───────────────────────────────────────────────── */
.qs-note{background:var(--qs-steel-soft);border-left:3px solid var(--qs-steel);border-radius:0 var(--qs-r-sm) var(--qs-r-sm) 0;padding:13px 17px;margin:18px 0;font-size:.95rem}
.qs-warn{background:#FDF3E8;border-left:3px solid #C8761A;border-radius:0 var(--qs-r-sm) var(--qs-r-sm) 0;padding:13px 17px;margin:18px 0;font-size:.95rem}
.qs-note b,.qs-warn b{display:block;margin-bottom:3px}

/* ── FAQ ──────────────────────────────────────────────────── */
.qs-faq{border:1px solid var(--qs-line);border-radius:var(--qs-r);background:var(--qs-card);overflow:hidden;margin:20px 0}
.qs-faq details{border-bottom:1px solid var(--qs-line)}
.qs-faq details:last-child{border-bottom:0}
.qs-faq summary{cursor:pointer;padding:15px 20px;font-weight:600;font-size:1rem;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.qs-faq summary::-webkit-details-marker{display:none}
.qs-faq summary::after{content:"+";font-family:"Bricolage Grotesque",sans-serif;font-size:1.3rem;color:var(--qs-rose);flex:none;line-height:1}
.qs-faq details[open] summary::after{content:"\2212"}
.qs-faq details[open] summary{background:var(--qs-paper)}
.qs-faq-a{padding:0 20px 17px;font-size:.97rem;color:var(--qs-ink-2)}

/* ── 作者卡 ───────────────────────────────────────────────── */
.qs-byline{display:flex;gap:16px;align-items:flex-start;background:var(--qs-card);border:1px solid var(--qs-line);border-radius:var(--qs-r);padding:19px 21px;margin:26px 0}
.qs-byline img{width:54px;height:54px;border-radius:50%;flex:none;background:var(--qs-paper-2)}
.qs-byline p{margin:0;font-size:.94rem;color:var(--qs-ink-2)}
.qs-byline b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.02rem;color:var(--qs-ink);margin-bottom:4px}

/* ── 页脚 ─────────────────────────────────────────────────── */
.qs-foot{background:var(--qs-ink);color:#9398AA;padding:46px 0 30px;font-size:.9rem;margin-top:30px}
.qs-foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(150px,1fr));gap:30px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
.qs-foot h5{color:#fff;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:11px}
.qs-foot ul{list-style:none;margin:0;padding:0}
.qs-foot li{margin-bottom:7px}
.qs-foot a{color:#AEB2C0;text-decoration:none}
.qs-foot a:hover{color:#fff;text-decoration:underline}
.qs-legal{padding-top:22px;font-size:.84rem;line-height:1.62;color:#7B8094}
.qs-legal b{color:#C3C6D2}
.qs-legal p{margin:0 0 .75em}

/* ── 面包屑 / 页头 ───────────────────────────────────────── */
.qs-crumb{font-size:.84rem;color:var(--qs-ink-3);padding:16px 0 0}
.qs-crumb a{text-decoration:none}
.qs-crumb a:hover{text-decoration:underline}
.qs-phead{padding:10px 0 30px;border-bottom:1px solid var(--qs-line)}
.qs-phead .qs-lede{color:var(--qs-ink-3);font-size:1.08rem;max-width:62ch;margin-top:14px}
.qs-phead .qs-meta{color:var(--qs-ink-3);border-top-color:var(--qs-line);margin-bottom:0}
.qs-phead .qs-meta b{color:var(--qs-ink-2)}

.qs-disclose{font-size:.84rem;color:var(--qs-ink-3);background:var(--qs-paper-2);border-radius:var(--qs-r-sm);padding:10px 14px;margin:18px 0}
.qs-disclose a{color:var(--qs-rose)}

/* ── 响应式 ───────────────────────────────────────────────── */
@media(max-width:900px){
  .qs-hero-grid{grid-template-columns:1fr;gap:30px}
  .qs-card-top{grid-template-columns:1fr}
  .qs-card-img{border-right:0;border-bottom:1px solid var(--qs-line);padding:22px 60px}
  .qs-eco{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body{font-size:16px}
  .qs-hero{padding-top:40px}
  .qs-cats{grid-template-columns:1fr 1fr}
  .qs-works{flex-wrap:wrap}
  .qs-works div{flex:1 1 50%;border-bottom:1px solid var(--qs-line)}
  .qs-card-foot{padding:14px 18px}
  .qs-card-body{padding:18px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .qs-top,.qs-picker,.qs-foot,.qs-b{display:none}
  body{background:#fff}
}

/* 第 5 步：评分改为跳转链接（不展示亚马逊星级）；周边表加当前选品 */
a.qs-rating{color:var(--qs-ink-3);text-decoration:underline;text-decoration-color:var(--qs-line);text-underline-offset:3px}
a.qs-rating:hover{color:var(--qs-ink);text-decoration-color:currentColor}
.qs-pick{display:block;margin-top:3px;font-size:.84rem;font-weight:400;color:var(--qs-ink-3)}

/* 第 6 步：子页面组件 */
.qs-proto[data-p="other"]{color:#5A5F73;background:#ECEBE7}
.qs-via{font-size:.74rem;color:var(--qs-ink-3);white-space:nowrap;margin-left:6px}
.qs-skip-if b{display:block;margin-bottom:3px}
.qs-picker-slim{margin:24px 0 8px}
.qs-picker-slim .qs-eco{grid-template-columns:repeat(4,1fr)}
.qs-toc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.qs-toc a{font-size:.85rem;padding:5px 12px;border:1px solid var(--qs-line);border-radius:99px;text-decoration:none;color:var(--qs-ink-2);background:var(--qs-card)}
.qs-toc a:hover{border-color:var(--qs-ink);color:var(--qs-ink)}
.qs-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:18px 0}
.qs-related a{display:block;background:var(--qs-card);border:1px solid var(--qs-line);border-radius:var(--qs-r-sm);padding:13px 15px;text-decoration:none;color:var(--qs-ink)}
.qs-related a:hover{border-color:var(--qs-ink)}
.qs-related em{display:block;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--qs-rose);margin-bottom:4px}
.qs-related b{display:block;font-weight:600;line-height:1.35}
.qs-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.qs-split>div{background:var(--qs-card);border:1px solid var(--qs-line);border-radius:var(--qs-r);padding:17px 19px}
.qs-split h3{font-size:1.05rem;margin-bottom:8px}
.qs-split ul{margin:0;padding-left:18px}
.qs-split li{margin-bottom:6px}
.qs-mini a{font-weight:600}
@media(max-width:620px){.qs-picker-slim .qs-eco{grid-template-columns:1fr 1fr}.qs-split{grid-template-columns:1fr}}
.qs-start{list-style:none;margin:22px 0 4px;padding:0;display:grid;gap:8px;max-width:620px}
.qs-start li{display:grid;grid-template-columns:86px 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px}
.qs-start span{grid-row:1/3;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--qs-rose)}
.qs-start-n{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:#fff;text-decoration:none;line-height:1.25}
.qs-start-n:hover{text-decoration:underline}
.qs-start em{grid-column:2;font-style:normal;font-size:.84rem;color:#A9AEC0;line-height:1.35}
.qs-start .qs-b{grid-column:3;grid-row:1/3;white-space:nowrap;padding:8px 14px;font-size:.84rem}
.qs-rooms{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);padding-right:28px}
@media(max-width:620px){
  .qs-start li{grid-template-columns:1fr auto;row-gap:2px}
  .qs-start span{grid-row:auto;grid-column:1/3}
  .qs-start-n{grid-column:1}
  .qs-start em{grid-column:1}
  .qs-start .qs-b{grid-column:2;grid-row:2/4}
  .qs-meta{display:none}
}
.qs-hero h1{max-width:21ch}