.blog-art { display: block; width: 100%; height: 100%; color: var(--lg-text-3); }
.blog-k text { stroke: none; fill: var(--lg-text-2); font: 700 12px/1 var(--lg-font-mono); letter-spacing: .06em; }
.blog-k .k-bed { fill: var(--lg-surface); stroke: var(--lg-border-strong); stroke-width: 1.5; }
.blog-k .k-panel { fill: var(--lg-surface-2); stroke: var(--lg-border-strong); stroke-width: 1.25; }
.blog-k .k-ui { fill: var(--lg-track); stroke: none; }
.blog-k .k-ui2 { fill: color-mix(in srgb, var(--lg-text-3) 34%, transparent); stroke: none; }
.blog-k .k-line { stroke: var(--lg-border-strong); stroke-width: 1.5; }
.blog-k .k-dash { stroke-dasharray: 3 6; }
.blog-k .k-dot { fill: var(--lg-muted); stroke: none; }
.blog-k .k-gate { stroke: var(--lg-text-2); stroke-width: 5; }
.blog-k .k-curtain { fill: color-mix(in srgb, var(--lg-cyan) 9%, transparent); stroke: color-mix(in srgb, var(--lg-cyan) 35%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }
.blog-k .k-beam { stroke: var(--lg-cyan); stroke-width: 2.5; }
.blog-k .k-light { fill: var(--lg-cyan); stroke: none; }
.blog-k .k-risk { stroke: var(--lg-critical); }
.blog-k .k-risk-fill { fill: color-mix(in srgb, var(--lg-critical) 13%, var(--lg-surface)); stroke: var(--lg-critical); stroke-width: 1.5; }
.blog-k .k-risk-soft { fill: color-mix(in srgb, var(--lg-critical) 42%, transparent); stroke: none; }
.blog-k .k-ok { stroke: var(--lg-success); stroke-width: 2.25; }
.blog-k .k-ok-fill { fill: color-mix(in srgb, var(--lg-success) 11%, var(--lg-surface)); stroke: color-mix(in srgb, var(--lg-success) 70%, transparent); stroke-width: 1.5; }
.blog-k .k-rev { stroke: var(--lg-cyan); stroke-width: 2.25; }
.blog-k .k-rev-fill { fill: color-mix(in srgb, var(--lg-cyan) 11%, var(--lg-surface)); stroke: color-mix(in srgb, var(--lg-cyan) 70%, transparent); stroke-width: 1.5; }
.blog-k .k-ai { stroke: var(--lg-purple); }
.blog-k .k-ai-fill { fill: color-mix(in srgb, var(--lg-purple) 16%, var(--lg-surface)); stroke: var(--lg-purple); stroke-width: 1.5; }
.blog-k .t-risk { fill: var(--lg-critical); }
.blog-k .t-ok { fill: var(--lg-success); }
.blog-k .t-rev { fill: var(--lg-cyan); }
.blog-k .t-ai { fill: var(--lg-purple); }
.blog-k .t-hi { fill: var(--lg-text); }
.blog-k .t-dim { fill: var(--lg-text-3); }
.blog-k .t-sm { font-size: 10.5px; letter-spacing: .1em; }
.blog-k .t-md { font-size: 15px; }
.blog-k .t-lg { font-size: 22px; letter-spacing: 0; }
.blog-k .t-xl { font-size: 30px; letter-spacing: -.02em; font-family: var(--lg-font-sans); font-weight: 800; }
:root:not([data-theme="light"]) .blog-k .k-beam, :root:not([data-theme="light"]) .blog-k .k-light { filter: drop-shadow(0 0 4px var(--lg-cyan)); }
.blog-cat {
display: inline-flex; align-items: center; gap: 7px; min-width: 0;
font: 700 var(--lg-fs-label)/1.2 var(--lg-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-cyan);
}
.blog-cat .lg-icon { width: 15px; height: 15px; stroke-width: 2; }
.blog-cat[data-cat="ai-safety"] { color: var(--lg-purple); }
.blog-card {
container: blogcard / inline-size;
position: relative; height: 100%; overflow: hidden;
border: 1px solid var(--lg-border); border-radius: var(--lg-r-lg); background: var(--lg-card-bg); box-shadow: var(--lg-card-shadow);
transition: transform var(--lg-dur) var(--lg-ease), border-color var(--lg-dur), box-shadow var(--lg-dur);
}
.blog-card:hover { transform: translateY(-3px); border-color: var(--lg-border-hover); box-shadow: var(--lg-card-shadow), var(--lg-glow-soft); }
.blog-card__in { display: flex; flex-direction: column; height: 100%; }
.blog-card__media {
position: relative; aspect-ratio: 40 / 21; overflow: hidden; flex: none;
border-bottom: 1px solid var(--lg-border);
background-color: var(--lg-bg-2);
background-image: linear-gradient(var(--lg-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--lg-grid-line) 1px, transparent 1px);
background-size: 24px 24px;
}
.blog-card__media::after {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none; opacity: 0;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lg-cyan) 16%, transparent) 75%, color-mix(in srgb, var(--lg-cyan) 80%, transparent) 97%, transparent);
transform: translateX(-110%);
}
.blog-card:hover .blog-card__media::after { animation: blog-sweep 1.1s var(--lg-ease) 1; }
@keyframes blog-sweep { 0% { opacity: 1; transform: translateX(-110%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(340%); } }
.blog-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 20px 22px 22px; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0; }
.blog-card__time { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--lg-fs-label)/1.2 var(--lg-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lg-text-3); white-space: nowrap; }
.blog-card__time .lg-icon { width: 14px; height: 14px; }
.blog-card__title { margin: 0; font-size: 1.1875rem; line-height: 1.28; letter-spacing: -.012em; }
.blog-card__link { color: var(--lg-text); text-decoration: none; }
.blog-card__link:hover { color: var(--lg-text); }
.blog-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-card__desc { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--lg-text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.blog-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 0 0; padding-top: 6px; min-height: 30px; }
.blog-card__go { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 700 var(--lg-fs-label)/1 var(--lg-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-link); }
.blog-card__go .lg-icon { width: 16px; height: 16px; stroke-width: 2; transition: transform var(--lg-dur) var(--lg-ease); }
.blog-card:hover .blog-card__go .lg-icon { transform: translateX(4px); }
@supports selector(:has(*)) {
.blog-card__link:focus-visible { outline: none; }
.blog-card:has(.blog-card__link:focus-visible) { outline: 2px solid var(--lg-focus); outline-offset: 3px; border-color: var(--lg-border-hover); }
}
.blog-card--lead .blog-card__title { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; }
@container blogcard (min-width: 640px) {
.blog-card--lead .blog-card__in { display: grid; grid-template-columns: 1.15fr 1fr; }
.blog-card--lead .blog-card__media { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--lg-border); }
.blog-card--lead .blog-card__body { padding: 28px 30px; justify-content: center; }
}
@container blogcard (min-width: 520px) {
.blog-card--wide .blog-card__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.blog-card--wide .blog-card__media { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--lg-border); }
.blog-card--wide .blog-card__title { font-size: 1.3rem; }
}
.blog-card__media > .blog-art { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) {
.blog-card:hover { transform: none; }
.blog-card__media::after { display: none; }
}
@media (forced-colors: active) {
.blog-card { border: 1px solid CanvasText; }
}