.bc{--bc-px:16px;--bc-py:12px;--bc-gap:10px;--bc-code:44px;--bc-code-em:3.05;--bc-aspect:1.2;isolation:isolate;background-color:rgb(var(--color-paper));background-image:linear-gradient(rgb(var(--color-grid) / .7) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--color-grid) / .7) 1px, transparent 1px);background-position:-1px -1px;background-size:16px 16px;position:relative;overflow:hidden;container-type:inline-size}.bc>.motif,.bc>.bc-code{--bc-font:min(var(--bc-code), 45cqw / var(--bc-code-em));--bc-code-top:calc(var(--bc-py) + 1.1 * var(--bc-font))}.bc .motif{right:var(--bc-px);top:var(--bc-py);width:auto;aspect-ratio:var(--bc-aspect);height:max(min(100% - 2 * var(--bc-py), (100cqw - 2 * var(--bc-px) - var(--bc-gap) - var(--bc-code-em) * var(--bc-font)) / var(--bc-aspect)), min(100% - var(--bc-py) - var(--bc-code-top) - var(--bc-gap), (100cqw - 2 * var(--bc-px)) / var(--bc-aspect)));position:absolute;overflow:visible}.bc .ink-spot{mix-blend-mode:multiply}.bc-code{left:var(--bc-px);bottom:var(--bc-py);letter-spacing:-.045em;font-family:DM Sans,system-ui,sans-serif;font-weight:700;line-height:.9;font-size:var(--bc-font);white-space:nowrap;color:rgb(var(--color-ink));text-shadow:2px 2px 0 var(--spot);position:absolute}.bc--card{border-bottom:1px solid rgb(var(--color-border));height:132px}.bc--row{height:100%;min-height:150px}.bc--hero{--bc-px:24px;--bc-py:18px;--bc-gap:14px;--bc-code:64px;border:1px solid rgb(var(--color-border-strong));border-radius:14px;height:200px}.bc--long{--bc-code:34px;--bc-code-em:4.2}.bc--hero.bc--long{--bc-code:48px}.bc--compact{--bc-px:10px;--bc-py:8px;--bc-gap:6px;--bc-code:24px;border-bottom:1px solid rgb(var(--color-border));height:66px}.bc--mini{--bc-px:5px;--bc-py:3px;--bc-gap:4px;--bc-code:15px;border:1px solid rgb(var(--color-border));border-radius:6px;flex:none;width:64px;height:44px}@media (width<=640px){.bc--hero{--bc-px:16px;--bc-py:12px;--bc-gap:10px;--bc-code:46px;height:150px}}.k-pop,.k-bar,.k-swipe{transform-box:fill-box}.k-pop{transform-origin:50%}.k-bar,.k-swipe{transform-origin:0}.bc-anim .k-draw{stroke-dasharray:1;stroke-dashoffset:1px}.bc-anim .k-pop{opacity:0;transform:scale(.4)}.bc-anim .k-bar,.bc-anim .k-swipe{transform:scaleX(0)}.bc-anim .k-fade{opacity:0}@media (prefers-reduced-motion:no-preference){.bc-anim.is-playing .k-draw{animation:k-draw .55s cubic-bezier(.3, .7, .3, 1) calc(var(--i,0) * .24s) both}.bc-anim.is-playing .k-pop{animation:k-pop .42s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i,0) * .24s) both}.bc-anim.is-playing .k-bar{animation:k-grow .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i,0) * .24s) both}.bc-anim.is-playing .k-swipe{animation:k-grow .5s cubic-bezier(.5, 0, .3, 1) calc(var(--i,0) * .24s) both}.bc-anim.is-playing .k-fade{animation:k-fade .5s ease-out calc(var(--i,0) * .24s) both}.bc.is-playing:not(.bc-anim) .k-pop,.bc.is-playing:not(.bc-anim) .k-draw{animation:k-nudge .5s ease-in-out calc(var(--i,0) * .18s);transform-box:fill-box;transform-origin:50%}.bc.is-playing:not(.bc-anim) .k-swipe{animation:.7s cubic-bezier(.5,0,.3,1) k-swipe-again}}@keyframes k-draw{0%{stroke-dasharray:1;stroke-dashoffset:1px}to{stroke-dasharray:1;stroke-dashoffset:0}}@keyframes k-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes k-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes k-fade{0%{opacity:0}to{opacity:1}}@keyframes k-nudge{50%{transform:scale(1.14)}}@keyframes k-swipe-again{0%{opacity:1;transform:scaleX(1)}45%{opacity:.25;transform:scaleX(1)}46%{opacity:1;transform:scaleX(0)}to{transform:scaleX(1)}}[data-countup]{font-variant-numeric:tabular-nums;position:relative}[data-countup].is-counting{color:#0000}[data-countup] .cu-run{color:var(--cu-color,rgb(var(--color-ink)));white-space:nowrap;position:absolute;inset:0}.blog-card{border:1px solid rgb(var(--color-border-strong));background:rgb(var(--color-surface));height:100%;color:inherit;border-radius:16px;flex-direction:column;text-decoration:none;transition:box-shadow .18s,transform .18s,opacity .25s;display:flex;position:relative;overflow:hidden}.blog-card:focus-visible{outline:2px solid rgb(var(--color-ring));outline-offset:3px}@media (hover:hover){.blog-card:hover{box-shadow:5px 5px 0 rgb(var(--color-accent));transform:translate(-1px,-1px)}.blog-card:hover .blog-card-title{text-decoration:underline;text-decoration-color:rgb(var(--color-accent));text-underline-offset:-.02em;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:.22em}}.blog-card-media{position:relative}.blog-card-body{flex-direction:column;flex:1;padding:16px 18px 18px;display:flex}.blog-card-kicker{color:rgb(var(--color-fg-muted));font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600}.blog-card-title{letter-spacing:-.02em;color:rgb(var(--color-ink));text-wrap:balance;margin-top:6px;font-size:1.28rem;font-weight:700;line-height:1.18}.blog-card-sub{color:rgb(var(--color-fg-muted));margin-top:8px;font-family:PT Serif,Georgia,serif;font-size:.98rem;line-height:1.5}.blog-card-act{color:rgb(var(--color-ink));margin-top:auto;padding-top:14px;font-size:.9rem;font-weight:600}.blog-card-readmark{border:2px solid rgb(var(--color-ink));background:rgb(var(--color-accent));border-radius:6px;width:26px;height:26px;display:none;position:absolute;top:10px;right:10px}.blog-card-readmark:after{content:"";border:solid rgb(var(--color-ink));border-width:0 3px 3px 0;width:7px;height:13px;position:absolute;top:2px;left:7px;transform:rotate(45deg)}.blog-card[data-read=true] .blog-card-readmark{display:block}.blog-card[data-dimmed=true]{border-color:rgb(var(--color-border))}.blog-card[data-dimmed=true] :is(.bc,.blog-tool-pic){opacity:.35;filter:grayscale()}.blog-card[data-hit=true]{border-color:rgb(var(--color-ink));box-shadow:4px 4px 0 rgb(var(--color-accent))}@media (prefers-reduced-motion:reduce){.blog-card{transition:none}}.blog-card--row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);display:grid}.blog-card--row .bc--row{border-right:1px solid rgb(var(--color-border))}.blog-card--row .blog-card-body{padding:22px 24px}.blog-card--row .blog-card-title{font-size:1.55rem}@media (width<=700px){.blog-card--row{grid-template-columns:1fr}.blog-card--row .bc--row{border-right:0;border-bottom:1px solid rgb(var(--color-border));height:132px;min-height:132px}.blog-card--row .blog-card-body{padding:16px 18px 18px}.blog-card--row .blog-card-title{font-size:1.3rem}}
