.article-wrap{max-width:1100px;margin:0 auto;padding:60px min(10%,max(5%,50% - 550px))}.breadcrumb{color:var(--color-text-subtle);margin-bottom:40px;font-size:.85em}.breadcrumb a{color:var(--color-accent);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.breadcrumb span{color:var(--color-border-medium);margin:0 8px}.article-meta{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;display:flex}.article-tag{text-transform:uppercase;letter-spacing:.8px;color:var(--color-accent);background:#00bceb14;border:1px solid #00bceb33;border-radius:6px;padding:3px 10px;font-size:.75em;font-weight:600}.article-date,.article-read-time{color:var(--color-text-subtle);font-size:.85em}.article-date:before{content:"·";color:var(--color-border-medium);margin-right:12px}h1.article-title{color:var(--color-text);margin:0 0 32px;font-size:clamp(1.8em,3vw,3em);font-weight:700;line-height:1.2}.article-hero{border:1px solid var(--color-border);border-radius:16px;width:100%;margin-bottom:40px;overflow:hidden}.article-hero img{width:100%;display:block}.author-row{border-bottom:1px solid var(--color-border);align-items:center;gap:14px;margin-bottom:48px;padding-bottom:32px;display:flex}.author-avatar{object-fit:cover;border:2px solid var(--color-border);border-radius:50%;flex-shrink:0;width:48px;height:48px}.author-name{font-size:.95em;font-weight:600}.author-title{color:var(--color-text-muted);margin-top:2px;font-size:.82em}.article-body{color:var(--color-text);line-height:1.8}.article-body a{color:var(--color-accent);text-underline-offset:3px;-webkit-text-decoration:underline #00bceb59;text-decoration:underline #00bceb59;transition:color .2s,text-decoration-color .2s}.article-body a:hover{color:var(--color-accent-hover);-webkit-text-decoration-color:var(--color-accent-hover);text-decoration-color:var(--color-accent-hover)}.article-body h2{color:var(--color-text);margin:56px 0 16px;font-size:clamp(1.3em,2vw,1.7em);font-weight:700}.article-body h3{color:var(--color-text);margin:32px 0 10px;font-size:1.1em;font-weight:600}.article-body p{margin:0 0 20px;font-size:1em}.article-body hr{border:none;border-top:1px solid var(--color-border);margin:48px 0}.article-body ul,.article-body ol{margin:0 0 20px;padding-left:1.5em}.article-body li{margin-bottom:8px}.article-body strong{color:var(--color-text);font-weight:600}.article-body em{font-style:italic}.callout{border-left:3px solid var(--color-accent);color:var(--color-text);background:linear-gradient(135deg,#00bceb12,#187adc12);border-radius:0 12px 12px 0;margin:32px 0;padding:20px 24px;font-size:1.05em;font-style:italic;line-height:1.6}.usage-box{grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 36px;display:grid}.usage-item{border:1px solid var(--color-border);border-radius:12px;padding:20px}.usage-item.do{background:#00cc440a;border-color:#00cc4440}.usage-item.dont{background:#eb72510a;border-color:#eb725140}.usage-label{text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:.72em;font-weight:700}.usage-item.do .usage-label{color:#0c4}.usage-item.dont .usage-label{color:#eb7251}.usage-item p{color:var(--color-text-muted);margin:0;font-size:.9em}.timeline-steps{flex-direction:column;gap:0;margin:24px 0 36px;padding:0;list-style:none;display:flex}.timeline-steps li{border-bottom:1px solid var(--color-border);align-items:flex-start;gap:16px;padding:16px 0;font-size:.95em;display:flex}.timeline-steps li:last-child{border-bottom:none}.timeline-num{background:var(--color-accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;margin-top:1px;font-size:.78em;font-weight:700;display:flex}.principles-list{flex-direction:column;gap:12px;margin:16px 0 32px;padding:0;list-style:none;display:flex}.principles-list li{border-left:3px solid var(--color-accent);background:var(--color-hover);border-radius:0 10px 10px 0;padding:16px 20px;font-size:.95em}.article-figure{margin:32px 0}.article-figure img{border:1px solid var(--color-border);width:100%;box-shadow:0 4px 24px var(--color-shadow);cursor:zoom-in;border-radius:12px;transition:opacity .2s,box-shadow .2s;display:block}.article-figure img:hover{opacity:.92;box-shadow:0 8px 40px var(--color-shadow)}.article-figure figcaption{color:var(--color-text-subtle);text-align:center;margin-top:10px;font-size:.82em;font-style:italic}.back-to-blog{color:var(--color-accent);align-items:center;gap:8px;margin-top:48px;font-size:.9em;font-weight:500;transition:gap .2s;display:inline-flex}.back-to-blog:hover{color:var(--color-accent-hover);gap:12px}@media (max-width:768px){h1.article-title{font-size:1.8em}.usage-box{grid-template-columns:1fr}}