.blog-index{max-width:680px;min-height:45vh;margin:0 auto}.blog-index-header{margin-bottom:32px}.blog-index-header h1{letter-spacing:-.025em;font-size:24px;font-weight:600;line-height:1.3}.blog-index-header p{color:var(--muted-foreground);margin-top:12px;font-size:16px;line-height:1.7}.blog-project-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.blog-list-link{border-radius:16px;align-items:center;gap:16px;margin:0 -8px;padding:8px;display:flex}.blog-list-link:hover,.blog-list-link:focus-visible{background:#ffffff8c}.blog-list-link:focus-visible{outline-offset:3px;outline:2px solid #69737c}.blog-thumbnail-frame{background:#f6f6f6;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding:3px;display:flex;box-shadow:0 0 0 1px #0000000d,0 1px 3px #00000012}.blog-thumbnail{background:#fff;border-radius:5px;justify-content:center;align-items:center;width:40px;height:48px;display:flex;box-shadow:0 0 0 1px #0000000f,0 1px 2px #0000000d}.blog-thumbnail svg{width:24px;height:24px}.blog-list-copy{flex-direction:column;gap:3px;min-width:0;display:flex}.blog-list-title{font-size:16px;font-weight:500;line-height:1.5}.blog-list-description{color:var(--muted-foreground);font-size:14px;line-height:1.6}.blog-list-link .blog-list-arrow{vertical-align:-.2em;opacity:0;width:17px;height:17px;margin-left:4px;display:inline-block;transform:translate(-3px)scale(.85);transition:opacity .18s,transform .18s!important}.blog-list-link:hover .blog-list-arrow,.blog-list-link:focus-visible .blog-list-arrow{opacity:1;transform:translate(0)scale(1)}.blog-article{max-width:626px;margin:0 auto}.blog-article-header{text-align:center;flex-direction:column;align-items:center;gap:28px;margin-bottom:56px;display:flex}.blog-breadcrumb{color:var(--muted-foreground);align-items:center;gap:6px;font-size:13px;line-height:22px;display:flex}.blog-breadcrumb [aria-current]{color:var(--foreground);font-weight:700}.blog-article-header h1{letter-spacing:-.035em;max-width:13.72em;margin-top:-16px;font-size:clamp(28px,3vw,36px);font-weight:700;line-height:1.16}.blog-article-meta{color:var(--muted-foreground);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 20px;font-size:14px;display:flex}.blog-reading-time{align-items:center;gap:5px;display:inline-flex}.blog-article-cover{aspect-ratio:626/340;background:#e5e7e9;border-radius:24px;place-items:center;width:100%;display:grid;position:relative;overflow:hidden}.blog-cover-grid{background-image:linear-gradient(#ccd1d544 1px,#0000 1px),linear-gradient(90deg,#ccd1d544 1px,#0000 1px);background-size:28px 28px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000,#0000 75%);mask-image:radial-gradient(#000,#0000 75%)}.blog-cover-paper{aspect-ratio:4/5;background:#fafafa;border:1px solid #fff;border-radius:12px;place-items:center;width:19%;display:grid;transform:rotate(-7deg);box-shadow:0 0 0 4px #eee,0 0 0 5px #d7dadd,0 8px 20px #0000000a}.blog-cover-paper svg{width:45%}.blog-cover-category,.blog-cover-number{color:#747e86;font-size:11px;line-height:1.4;position:absolute;bottom:22px}.blog-cover-category{left:24px}.blog-cover-number{letter-spacing:.08em;right:24px}.blog-article-body{color:var(--muted-foreground);margin-top:56px;font-size:16px;line-height:25px}.blog-article-body section{margin-top:56px}.blog-article-body h2{letter-spacing:-.025em;color:var(--foreground);margin-bottom:6px;font-size:24px;font-weight:700;line-height:1.3}.blog-article-body p{line-height:25px}.blog-article-end{border-top:1px solid #d3d7da;flex-wrap:wrap;justify-content:space-between;gap:20px;margin-top:56px;padding-top:24px;font-size:14px;font-weight:600;display:flex}@media (max-width:767px){.blog-article-header{margin-bottom:42px}.blog-article-body{margin-top:42px}.blog-cover-number{display:none}.blog-cover-category{bottom:14px;left:16px}}@media (prefers-reduced-motion:reduce){.blog-list-link .blog-list-arrow{transition:none!important}}
