/* CodeBobby — css/sensor-logger.css */

    
    .toc-label{font-family:var(--mono);font-size:0.65rem;color:var(--text-dim);letter-spacing:0.22em;text-transform:uppercase;margin-bottom:1.2rem;display:flex;align-items:center;gap:0.5rem}
    .toc-label::after{content:'';flex:1;height:1px;background:var(--border)}
    .toc-list{list-style:none;display:flex;flex-direction:column;gap:0.15rem}
    .toc-item a{font-family:var(--mono);font-size:0.72rem;color:var(--text-dim);text-decoration:none;letter-spacing:0.06em;padding:0.4rem 0.7rem;display:block;border-left:2px solid transparent;transition:all 0.15s}
    .toc-item a:hover,.toc-item a.active{color:var(--accent);border-left-color:var(--accent);background:rgba(0,245,160,0.05)}
    .toc-divider{height:1px;background:var(--border);margin:1rem 0}
    .toc-meta{font-family:var(--mono);font-size:0.65rem;color:var(--text-dim);display:flex;flex-direction:column;gap:0.6rem;margin-top:1.5rem}
    .toc-meta-item{display:flex;align-items:center;gap:0.5rem}
    .toc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
    .article-hero{padding:4rem 4rem 3rem;border-bottom:1px solid var(--border);position:relative;overflow:hidden;background:linear-gradient(180deg,#09111c 0%,var(--bg) 100%)}
    .article-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(0,245,160,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,245,160,0.025) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 70% 80% at 30% 50%,black 30%,transparent 100%)}
    .hero-glow{position:absolute;width:500px;height:300px;background:radial-gradient(ellipse,rgba(0,212,255,0.07) 0%,transparent 70%);top:-50px;right:-100px;pointer-events:none}
    .article-breadcrumb{font-family:var(--mono);font-size:0.7rem;color:var(--text-dim);margin-bottom:1.5rem;display:flex;align-items:center;gap:0.5rem}
    .article-breadcrumb a{color:var(--text-dim);text-decoration:none;transition:color 0.2s}.article-breadcrumb a:hover{color:var(--accent)}
    .article-breadcrumb span{color:var(--border2)}
    .article-tags{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
    .atag{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.22rem 0.65rem;border:1px solid}
    .atag.green{color:var(--accent);border-color:rgba(0,245,160,0.3);background:rgba(0,245,160,0.06)}
    .atag.blue{color:var(--accent2);border-color:rgba(0,212,255,0.3);background:rgba(0,212,255,0.06)}
    .atag.red{color:var(--accent3);border-color:rgba(255,77,109,0.3);background:rgba(255,77,109,0.06)}
    .atag.yellow{color:var(--accent4);border-color:rgba(245,166,35,0.3);background:rgba(245,166,35,0.06)}
    .article-title{font-family:var(--display);font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:-0.025em;line-height:1.1;margin-bottom:1.2rem}
    .hl{color:var(--accent)}.hl2{color:var(--accent2)}
    .article-byline{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
    .byline-item{font-family:var(--mono);font-size:0.72rem;color:var(--text-dim);display:flex;align-items:center;gap:0.4rem}
    .arch-diagram{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin:2.5rem 0 0}
    .arch-node{background:var(--surface);padding:1.5rem;display:flex;flex-direction:column;gap:0.8rem;transition:background 0.2s}
    .arch-node:hover{background:var(--surface2)}
    .arch-icon{width:44px;height:44px;border:1px solid;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
    .arch-icon.green{border-color:rgba(0,245,160,0.3);background:rgba(0,245,160,0.07)}
    .arch-icon.blue{border-color:rgba(0,212,255,0.3);background:rgba(0,212,255,0.07)}
    .arch-icon.purple{border-color:rgba(168,85,247,0.3);background:rgba(168,85,247,0.07)}
    .arch-name{font-family:var(--display);font-size:1rem;font-weight:700}
    .arch-desc{font-size:0.82rem;color:var(--text-dim);line-height:1.6}
    .article-body{padding:0 4rem 4rem}
    .article-section{margin-bottom:4rem;scroll-margin-top:80px}
    .section-eyebrow{font-family:var(--mono);font-size:0.65rem;color:var(--accent);letter-spacing:0.22em;text-transform:uppercase;margin-bottom:0.8rem;display:flex;align-items:center;gap:0.7rem}
    .section-eyebrow::before{content:'';width:20px;height:1px;background:var(--accent)}
    .section-title{font-family:var(--display);font-size:1.7rem;font-weight:800;letter-spacing:-0.015em;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
    .article-p{font-size:0.97rem;color:var(--text-dim);line-height:1.85;margin-bottom:1.2rem}
    .article-p strong{color:var(--text)}
    .check-list{list-style:none;display:flex;flex-direction:column;gap:0.6rem;margin-bottom:1.5rem}
    .check-item{display:flex;gap:0.8rem;align-items:flex-start;font-size:0.95rem;color:var(--text-dim)}
    .check-icon{color:var(--accent);font-family:var(--mono);font-size:0.8rem;margin-top:3px;flex-shrink:0}
    .hw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);margin-bottom:2rem}
    .hw-card{background:var(--surface);padding:1.5rem}
    .hw-card-title{font-family:var(--display);font-size:1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem}
    .hw-list{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
    .hw-list li{font-family:var(--mono);font-size:0.75rem;color:var(--text-dim);display:flex;gap:0.5rem}
    .hw-list li::before{content:'→';color:var(--accent);flex-shrink:0}
    .task-block{border:1px solid var(--border);margin-bottom:1rem;overflow:hidden}
    .task-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;background:var(--surface2);border-bottom:1px solid var(--border)}
    .task-name{font-family:var(--display);font-size:0.95rem;font-weight:700;display:flex;align-items:center;gap:0.7rem}
    .task-priority{font-family:var(--mono);font-size:0.62rem;padding:0.18rem 0.55rem;letter-spacing:0.1em;text-transform:uppercase;border:1px solid}
    .task-priority.high{color:var(--accent3);border-color:rgba(255,77,109,0.35);background:rgba(255,77,109,0.08)}
    .task-priority.med{color:var(--accent2);border-color:rgba(0,212,255,0.35);background:rgba(0,212,255,0.08)}
    .task-priority.low{color:var(--accent);border-color:rgba(0,245,160,0.35);background:rgba(0,245,160,0.08)}
    .task-desc{font-size:0.88rem;color:var(--text-dim);padding:0.8rem 1.2rem;line-height:1.65}
    .task-spec{font-family:var(--mono);font-size:0.7rem;color:var(--text-dim);background:var(--bg);padding:0.6rem 1.2rem;border-top:1px solid var(--border);display:flex;gap:2rem}
    .code-wrap{position:relative;margin-bottom:2rem}
    .code-header{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);border-bottom:none;padding:0.6rem 1rem}
    .code-filename{font-family:var(--mono);font-size:0.72rem;color:var(--text-dim);display:flex;align-items:center;gap:0.7rem}
    .code-lang{font-family:var(--mono);font-size:0.62rem;color:var(--accent2);letter-spacing:0.1em;text-transform:uppercase}
    .code-dots{display:flex;gap:5px}
    .code-dot{width:9px;height:9px;border-radius:50%}
    .code-dot.r{background:#ff5f57}.code-dot.y{background:#febc2e}.code-dot.g{background:#28c840}
    .copy-btn{font-family:var(--mono);font-size:0.65rem;color:var(--text-dim);background:var(--surface3);border:1px solid var(--border);padding:0.25rem 0.7rem;cursor:pointer;letter-spacing:0.08em;text-transform:uppercase;transition:all 0.15s}
    .copy-btn:hover{color:var(--accent);border-color:var(--accent)}
    .copy-btn.copied{color:var(--accent);border-color:var(--accent);background:rgba(0,245,160,0.08)}
    pre.codebox{background:var(--bg);border:1px solid var(--border);padding:1.5rem;overflow-x:auto;margin:0;font-family:var(--mono);font-size:0.78rem;line-height:1.85;color:#cdd9e5}
    .kw{color:#c792ea}.fn{color:var(--accent2)}.str{color:#c3e88d}.cm{color:#546e7a}.num{color:#f78c6c}.type{color:var(--accent)}.pp{color:#f78c6c}
    .code-step{font-family:var(--display);font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:0.8rem;display:flex;align-items:center;gap:0.8rem}
    .code-step-num{font-family:var(--mono);font-size:1rem;color:var(--accent);width:36px;height:36px;border:1px solid rgba(0,245,160,0.3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .bench-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.78rem;margin-bottom:1.5rem}
    .bench-table th{text-align:left;padding:0.7rem 1rem;background:var(--surface2);color:var(--text-dim);letter-spacing:0.1em;text-transform:uppercase;font-size:0.65rem;border-bottom:1px solid var(--border)}
    .bench-table td{padding:0.7rem 1rem;border-bottom:1px solid var(--border);color:var(--text-dim)}
    .bench-table tr:hover td{background:var(--surface2)}
    .bench-val{color:var(--accent)!important;font-weight:600}
    .info-box{border:1px solid rgba(0,212,255,0.25);background:rgba(0,212,255,0.05);padding:1.2rem 1.5rem;display:flex;gap:1rem;margin-bottom:1.5rem}
    .info-title{font-family:var(--display);font-size:0.9rem;font-weight:700;color:var(--accent2);margin-bottom:0.5rem}
    .info-list{list-style:none;display:flex;flex-direction:column;gap:0.4rem}
    .info-list li{font-size:0.85rem;color:var(--text-dim);display:flex;gap:0.5rem}
    .info-list li::before{content:'•';color:var(--accent2);flex-shrink:0}
    .deploy-list{display:flex;flex-direction:column;gap:0.5rem}
    .deploy-item{display:flex;align-items:center;gap:0.9rem;padding:0.85rem 1rem;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all 0.15s}
    .deploy-item:hover{border-color:var(--border2);background:var(--surface2)}
    .deploy-item input[type="checkbox"]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
    .deploy-item label{font-size:0.88rem;color:var(--text-dim);cursor:pointer;flex:1}
    .deploy-item:has(input:checked){border-color:rgba(0,245,160,0.25);background:rgba(0,245,160,0.04)}
    .deploy-item:has(input:checked) label{color:var(--text-mid);text-decoration:line-through;text-decoration-color:var(--text-dim)}
    .resources-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
    .resource-group-title{font-family:var(--mono);font-size:0.65rem;color:var(--accent2);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:0.8rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}
    .resource-list{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
    .resource-list li a{font-family:var(--mono);font-size:0.75rem;color:var(--text-dim);text-decoration:none;display:flex;align-items:center;gap:0.5rem;transition:color 0.15s}
    .resource-list li a::before{content:'→';color:var(--border2);transition:color 0.15s}
    .resource-list li a:hover{color:var(--accent)}.resource-list li a:hover::before{color:var(--accent)}
    .article-cta{border-top:1px solid var(--border);padding:3rem 0 0;text-align:center}
    .cta-title{font-family:var(--display);font-size:1.8rem;font-weight:800;margin-bottom:0.8rem}
    .cta-sub{color:var(--text-dim);font-size:0.95rem;margin-bottom:2rem;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.7}
    .cta-btns{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
    
    
    
    
    .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:3rem}
    .related-card{background:var(--surface);padding:1.5rem;cursor:pointer;transition:background 0.18s;text-decoration:none;display:flex;flex-direction:column;gap:0.6rem}
    .related-card:hover{background:var(--surface2)}
    .related-tag{font-family:var(--mono);font-size:0.62rem;color:var(--accent2);letter-spacing:0.12em;text-transform:uppercase}
    .related-title{font-family:var(--display);font-size:0.95rem;font-weight:700;color:var(--text);line-height:1.35}
    .related-meta{font-family:var(--mono);font-size:0.62rem;color:var(--text-dim);margin-top:auto}
    
    @media(max-width:1100px){.resources-grid{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}}
    @media(max-width:700px){.article-hero,.article-body{padding:2rem 1.5rem 3rem}.hw-grid{grid-template-columns:1fr}.arch-diagram{grid-template-columns:1fr}}