@layer components{@property --home-blogging-progress{syntax:"<number>";inherits:true;initial-value:0}.home-blogging{--home-blogging-loop-duration:9.6s;--home-blogging-progress:0;--home-blogging-write-window:.06;width:100%;height:100%;padding-top:calc(var(--card-title-bar-height) + 1px);animation:home-blogging-progress var(--home-blogging-loop-duration) linear infinite;justify-content:center;display:flex}.home-blogging__content{flex-direction:column;flex:0 0 50%;gap:2px;height:max-content;padding:10px 4px;display:flex}.home-blogging__title{background-color:var(--grey-300);width:50%;height:4px;margin-bottom:4px}.home-blogging__line{--home-blogging-reveal-at:0;--home-blogging-write-progress:clamp(0, calc((var(--home-blogging-progress) - var(--home-blogging-reveal-at)) / var(--home-blogging-write-window)), 1);--home-blogging-cursor-visible:min(clamp(0, calc(var(--home-blogging-write-progress) * 1000), 1), clamp(0, calc((1 - var(--home-blogging-write-progress)) * 1000), 1));width:100%;height:8px;position:relative;overflow:hidden}.home-blogging__line:after{content:"";background-color:var(--grey-100);border-left:calc(var(--home-blogging-cursor-visible) * 2px) solid var(--grey-300);transform:translateX(calc(var(--home-blogging-write-progress) * 102%));pointer-events:none;will-change:transform;z-index:1;position:absolute;inset:0}.home-blogging__line:nth-child(4),.home-blogging__line:nth-child(8),.home-blogging__line:nth-child(11){margin-bottom:4px}.home-blogging__line:nth-child(2):before{content:"";background:var(--gradient);border-right:3px solid var(--grey-100);border-bottom:3px solid var(--grey-100);width:12px;height:12px;position:absolute;top:0;left:0}@keyframes home-blogging-progress{0%{--home-blogging-progress:0}to{--home-blogging-progress:1}}}