.blog-detail-page{min-height:100vh;padding-top:var(--ui-nav-height);color:var(--ui-text-secondary);background:var(--ui-bg)}.blog-detail-progress{position:fixed;top:0;left:0;right:0;z-index:1001;height:2px;pointer-events:none}.blog-detail-progress span{display:block;height:100%;background:var(--ui-accent);transform-origin:0 50%}.article-shell{width:min(100%,1120px);margin:0 auto;padding:var(--ui-space-24) var(--ui-space-24) var(--ui-space-80)}.article-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-16);padding:var(--ui-space-4) 0}.article-back{display:inline-flex;align-items:center;gap:var(--ui-space-6);min-height:28px;color:var(--ui-text-muted);text-decoration:none;font-size:var(--ui-text-13);transition:color .15s ease}.article-back svg{width:15px;height:15px}.article-back:hover{color:var(--ui-accent)}.article-copy{min-height:28px;padding:0;color:var(--ui-text-muted);background:transparent;border:0;font:inherit;font-size:var(--ui-text-13);cursor:pointer;transition:color .15s ease}.article-copy:hover{color:var(--ui-accent)}.article-header{max-width:880px;padding-top:clamp(var(--ui-space-24),3.5vw,2.75rem)}.article-meta{display:flex;align-items:center;flex-wrap:wrap;color:var(--ui-text-faint);font-size:var(--ui-text-12)}.article-meta>*+*:before{content:"·";margin:0 var(--ui-space-10);color:var(--ui-border-strong)}.article-category{color:var(--ui-accent);font-weight:600}.article-title{margin:var(--ui-space-14) 0 0;color:var(--ui-text);font-size:clamp(var(--ui-text-32),4.2vw,var(--ui-text-48));font-weight:700;line-height:1.22;letter-spacing:-.025em;text-wrap:balance}.article-summary{max-width:72ch;margin:var(--ui-space-16) 0 0;color:var(--ui-text-secondary);font-size:var(--ui-text-16);line-height:1.85}.article-tags{display:flex;flex-wrap:wrap;margin-top:var(--ui-space-18);color:var(--ui-text-muted);font-size:var(--ui-text-13)}.article-tags span+span:before{content:"/";margin:0 var(--ui-space-9);color:var(--ui-border-strong)}.article-cover{height:clamp(240px,32vw,400px);margin:clamp(var(--ui-space-28),3.5vw,var(--ui-space-40)) 0 0;overflow:hidden;background:var(--ui-surface-soft);border-radius:var(--ui-radius-md)}.article-cover-img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.98)}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 216px;gap:clamp(var(--ui-space-40),5vw,var(--ui-space-72));align-items:start;margin-top:clamp(var(--ui-space-36),4vw,3.25rem)}.article-main{min-width:0}.article-sidebar{position:sticky;top:calc(var(--ui-nav-height) + 2rem);min-width:0}.article-toc{max-height:calc(100vh - var(--ui-nav-height) - 3rem);padding-top:var(--ui-space-16);overflow:auto;border-top:1px solid var(--ui-border);scrollbar-width:thin}.article-toc h2{margin:0 0 var(--ui-space-11);color:var(--ui-text);font-size:var(--ui-text-12);font-weight:600;letter-spacing:.02em}.article-toc-link{display:block;padding:var(--ui-space-6) var(--ui-space-6) var(--ui-space-6) var(--ui-space-10);color:var(--ui-text-muted);border-left:2px solid transparent;text-decoration:none;font-size:var(--ui-text-12);line-height:1.55;transition:color .15s ease,border-color .15s ease}.article-toc-link:hover{color:var(--ui-text)}.article-toc .article-toc-link.active{color:var(--ui-accent);border-left-color:var(--ui-accent);font-weight:600}.article-toc-link.level-2{padding-left:var(--ui-space-16)}.article-toc-link.level-3{padding-left:var(--ui-space-24);font-size:var(--ui-text-12)}.article-mobile-toc{display:none;margin-bottom:var(--ui-space-28);border-top:1px solid var(--ui-border);border-bottom:1px solid var(--ui-border-soft)}.article-mobile-toc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-16);min-height:44px;padding:0 var(--ui-space-2);color:var(--ui-text);font-size:var(--ui-text-14);font-weight:600;cursor:pointer;list-style:none}.article-mobile-toc summary::-webkit-details-marker{display:none}.article-mobile-toc summary:after{content:"+";color:var(--ui-text-muted);font-size:var(--ui-text-16);font-weight:400}.article-mobile-toc[open] summary:after{content:"−"}.article-mobile-toc nav{max-height:min(50vh,420px);padding:var(--ui-space-4) 0 var(--ui-space-12);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--ui-border-strong) transparent}.article-mobile-toc nav::-webkit-scrollbar{width:6px}.article-mobile-toc nav::-webkit-scrollbar-track{background:transparent}.article-mobile-toc nav::-webkit-scrollbar-thumb{background:var(--ui-border-strong);border-radius:999px}.article-mobile-toc .article-toc-link{padding:var(--ui-space-8) var(--ui-space-4) var(--ui-space-8) var(--ui-space-6);border-left:0}.article-mobile-toc .article-toc-link.level-2{padding-left:var(--ui-space-14)}.article-mobile-toc .article-toc-link.level-3{padding-left:var(--ui-space-22)}.article-mobile-toc .article-toc-link.active{color:var(--ui-accent);font-weight:600}.blog-detail-body{max-width:760px;color:var(--ui-text-secondary)}.blog-detail-body h1,.blog-detail-body h2,.blog-detail-body h3,.blog-detail-body h4{color:var(--ui-text);line-height:1.45;letter-spacing:-.015em;scroll-margin-top:calc(var(--ui-nav-height) + 24px)}.blog-detail-body h1{margin:2.4rem 0 var(--ui-space-14);font-size:clamp(var(--ui-text-24),2.4vw,var(--ui-text-28));font-weight:650}.blog-detail-body h2{margin:2.6rem 0 var(--ui-space-14);font-size:clamp(var(--ui-text-20),2vw,var(--ui-text-23));font-weight:650}.blog-detail-body h3{margin:1.9rem 0 var(--ui-space-10);font-size:var(--ui-text-18);font-weight:600}.blog-detail-body h4{margin:var(--ui-space-24) 0 var(--ui-space-8);font-size:var(--ui-text-16);font-weight:600}.blog-detail-body h1:first-child,.blog-detail-body h2:first-child,.blog-detail-body h3:first-child{margin-top:0}.blog-detail-body p,.blog-detail-body li,.blog-detail-body td,.blog-detail-body th{color:var(--ui-text-secondary);font-size:var(--ui-text-16);line-height:var(--ui-line-height-prose)}.blog-detail-body p{margin:0 0 var(--ui-space-18)}.blog-detail-body ul,.blog-detail-body ol{margin:0 0 var(--ui-space-18);padding-left:var(--ui-space-22)}.blog-detail-body li{margin-bottom:var(--ui-space-5)}.blog-detail-body li::marker{color:var(--ui-text-faint)}.blog-detail-body li+li{margin-top:var(--ui-space-3)}.blog-detail-body strong{color:var(--ui-text);font-weight:600}.blog-detail-body em{color:var(--ui-text)}.blog-detail-body code{padding:.14em .4em;color:var(--ui-text);background:var(--ui-surface-soft);border:1px solid var(--ui-border-soft);border-radius:4px;font-family:var(--ui-font-mono);font-size:.88em}.blog-code-block{position:relative;margin:var(--ui-space-22) 0}.blog-code-copy-btn{position:absolute;top:.55rem;right:.55rem;z-index:1;min-height:26px;padding:0 var(--ui-space-10);color:var(--ui-text-muted);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);font:inherit;font-size:var(--ui-text-11);cursor:pointer;transition:color .15s ease,border-color .15s ease}.blog-code-copy-btn:hover{color:var(--ui-accent);border-color:var(--ui-accent)}.blog-code-copy-btn.copied{color:var(--market-positive);border-color:var(--market-positive)}.blog-detail-body pre{margin:0;padding:var(--ui-space-18) var(--ui-space-20);overflow-x:auto;background:var(--ui-surface);border:1px solid var(--ui-border-soft);border-radius:8px;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}.blog-detail-body .blog-code-block pre{padding-top:2.4rem}.blog-detail-body pre code{padding:0;color:var(--ui-text);background:none;border:0;font-size:var(--ui-text-13);line-height:1.75}.blog-detail-body a{color:var(--ui-accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ui-accent) 35%,transparent);text-underline-offset:3px;transition:text-decoration-color .15s ease}.blog-detail-body a:hover{text-decoration-color:var(--ui-accent)}.blog-detail-body blockquote{margin:1.6rem 0;padding:var(--ui-space-2) 0 var(--ui-space-2) var(--ui-space-18);color:var(--ui-text-secondary);border-left:2px solid var(--ui-accent)}.blog-detail-body blockquote p{margin:0}.blog-detail-body blockquote p+p{margin-top:var(--ui-space-11)}.blog-detail-body img{display:block;max-width:100%;height:auto;margin:var(--ui-space-28) auto;border:1px solid var(--ui-border-soft);border-radius:8px}.blog-detail-body figure{margin:var(--ui-space-28) 0}.blog-detail-body figcaption{margin-top:var(--ui-space-8);color:var(--ui-text-faint);font-size:var(--ui-text-12);text-align:center}.blog-detail-body table{width:100%;margin:1.6rem 0;overflow:hidden;border:1px solid var(--ui-border-soft);border-collapse:separate;border-spacing:0;border-radius:8px;font-size:var(--ui-text-14)}.blog-detail-body th,.blog-detail-body td{padding:var(--ui-space-10) var(--ui-space-12);border-bottom:1px solid var(--ui-border-soft);text-align:left}.blog-detail-body th{color:var(--ui-text);background:var(--ui-surface-soft);font-weight:600}.blog-detail-body tr:last-child td{border-bottom:0}.blog-detail-body tbody tr:hover{background:var(--theme-ink-02)}.blog-detail-body hr{margin:var(--ui-space-36) 0;border:none;border-top:1px solid var(--ui-border-soft)}.article-related{margin-top:clamp(var(--ui-space-48),6vw,var(--ui-space-72));padding-top:var(--ui-space-28);border-top:1px solid var(--ui-border)}.article-related h2{margin:0 0 var(--ui-space-18);color:var(--ui-text);font-size:var(--ui-text-17);font-weight:600;letter-spacing:-.01em}.article-related-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ui-border-soft)}.article-related-item{display:flex;flex-direction:column;gap:var(--ui-space-6);padding:var(--ui-space-16) var(--ui-space-24) 0 0;color:inherit;text-decoration:none;border-right:1px solid var(--ui-border-soft)}.article-related-item+.article-related-item{padding-left:var(--ui-space-24)}.article-related-item:last-child{padding-right:0;border-right:0}.related-meta{color:var(--ui-text-faint);font-size:var(--ui-text-12)}.article-related-item strong{display:-webkit-box;overflow:hidden;color:var(--ui-text);font-size:var(--ui-text-14);font-weight:600;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2;transition:color .15s ease}.article-related-item:hover strong{color:var(--ui-accent)}.article-related-item:focus-visible{outline:2px solid var(--ui-accent);outline-offset:4px}.article-state{display:grid;place-content:center;gap:var(--ui-space-16);min-height:100vh;padding:calc(var(--ui-nav-height) + var(--ui-space-32)) var(--ui-space-24) var(--ui-space-64);color:var(--ui-text-secondary);text-align:center}.article-state h1{margin:0;color:var(--ui-text);font-size:var(--ui-text-22);font-weight:650;letter-spacing:-.01em}.article-state a{color:var(--ui-accent);text-decoration:none;font-size:var(--ui-text-14)}.article-state a:hover{text-decoration:underline}html[data-theme=obsidian-gold] .article-cover-img{filter:saturate(.62) brightness(.78) contrast(1.04)}@media(max-width:1080px){.article-layout{grid-template-columns:1fr;gap:0}.article-sidebar{display:none}.article-mobile-toc{display:block}.article-main{width:100%;max-width:760px;margin:0 auto}}@media(max-width:720px){.article-shell{padding:var(--ui-space-16) var(--ui-space-18) var(--ui-space-56)}.article-header{padding-top:var(--ui-space-24)}.article-title{font-size:clamp(var(--ui-text-28),7vw,var(--ui-text-36));line-height:1.28}.article-summary{font-size:var(--ui-text-15);line-height:var(--ui-line-height-loose)}.article-cover{height:220px;margin-top:var(--ui-space-24);border-radius:8px}.article-layout{margin-top:var(--ui-space-28)}.article-related{margin-top:var(--ui-space-48)}.article-related-list{grid-template-columns:1fr;border-top:0}.article-related-item{padding:var(--ui-space-14) 0;border-right:0;border-bottom:1px solid var(--ui-border-soft)}.article-related-item+.article-related-item{padding-left:0}.article-related-item:last-child{padding-bottom:0;border-bottom:0}}@media(max-width:640px){.article-shell{padding-inline:var(--ui-space-14)}.article-meta{font-size:var(--ui-text-12)}.article-cover{height:200px}.blog-detail-body p,.blog-detail-body li,.blog-detail-body td,.blog-detail-body th{font-size:var(--ui-text-15);line-height:1.85}.blog-detail-body h2{font-size:var(--ui-text-20)}.blog-detail-body pre{padding:var(--ui-space-16)}.blog-detail-body .blog-code-block pre{padding-top:2.4rem}}@media(max-width:400px){.article-shell{padding-inline:var(--ui-space-12)}.article-title{font-size:var(--ui-text-26)}}@media(prefers-reduced-motion:reduce){.article-back,.article-copy,.article-toc-link,.article-related-item strong{transition:none}}