.blog-toc{--toc-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 28'%3E%3Cpath d='M3 0C4.4 7 4.4 7 3 14S1.6 21 3 28' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");--toc-ease:cubic-bezier(0.22,1,0.36,1);width:100%;border:1px solid color-mix(in srgb,var(--color-primary) 14%,transparent);border-radius:16px;background:#fff;box-shadow:0 6px 24px -12px rgba(30,30,90,.18);overflow:hidden}.blog-toc-head{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;cursor:pointer}.blog-toc-head:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:16px}.blog-toc-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-primary);color:#fff}.blog-toc-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}.blog-toc-title b{color:var(--color-primary);font-size:1rem}.blog-toc-title small{color:#6b7280;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.blog-toc-percent{flex:none;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,transparent);border-radius:999px;padding:.15rem .5rem}.blog-toc-chevron{flex:none;color:#6b7280;transition:transform .25s var(--toc-ease)}.blog-toc.is-open .blog-toc-chevron{transform:rotate(180deg)}.blog-toc-bar{height:3px;background:color-mix(in srgb,var(--color-primary) 10%,transparent)}.blog-toc-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transform-origin:left;transform:scaleX(var(--toc-progress,0));transition:transform .15s linear}.blog-toc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--toc-ease)}.blog-toc-body>.blog-toc-list{min-height:0}.blog-toc.is-open .blog-toc-body{grid-template-rows:1fr}.blog-toc-body,.blog-toc-list{overflow:hidden}.blog-toc-list{list-style:none;margin:0;padding:.5rem .5rem .75rem;transition:padding .3s var(--toc-ease)}.blog-toc:not(.is-open) .blog-toc-list{padding-block:0}.blog-toc-item a{position:relative;display:flex;align-items:flex-start;gap:.6rem;padding:.45rem .6rem;border-radius:10px;font-size:.8125rem;line-height:1.4;color:#4b5563;text-decoration:none;transition:background-color .2s,color .2s,transform .2s var(--toc-ease)}.blog-toc-item a:hover{background:color-mix(in srgb,var(--color-primary) 7%,transparent);color:var(--color-primary);transform:translateX(3px)}.blog-toc-item a:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.blog-toc-item.depth-1 a{padding-left:1.4rem}.blog-toc-item.depth-2 a{padding-left:2.2rem;font-size:.78rem}.blog-toc-dot{flex:none;position:relative;width:8px;height:8px;margin-top:.4rem;border-radius:50%;border:2px solid #cbd0e6;background:#fff;transition:border-color .2s,background-color .2s,transform .2s var(--toc-ease)}.blog-toc-item.is-read .blog-toc-dot{border-color:var(--color-primary);background:var(--color-primary);opacity:.45}.blog-toc-item.is-active a{background:color-mix(in srgb,var(--color-primary) 10%,transparent);color:var(--color-primary);font-weight:700}.blog-toc-item.is-active .blog-toc-dot{border-color:var(--color-primary);background:var(--color-primary);opacity:1;transform:scale(1.25);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 18%,transparent)}@media(min-width:1024px){.blog-toc{position:sticky;top:104px}.blog-toc-head{cursor:default;pointer-events:none}.blog-toc-chevron,.blog-toc-title small{display:none}.blog-toc-body{display:block;max-height:calc(100vh - 104px - 130px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.blog-toc-list,.blog-toc:not(.is-open) .blog-toc-list{overflow:visible;padding:.5rem .5rem .75rem}}@media(prefers-reduced-motion:reduce){.blog-toc *,.blog-toc-bar span{transition:none!important}}@media(min-width:1024px){.blog-toc{border:0;border-radius:0;background:rgba(0,0,0,0);box-shadow:none;overflow:visible}.blog-toc-head{padding:0 0 .75rem;gap:.6rem}.blog-toc-icon{width:28px;height:28px}.blog-toc-title b{font-size:.95rem;letter-spacing:.01em}.blog-toc-bar{display:none}.blog-toc-body{padding-left:2px}.blog-toc-list,.blog-toc:not(.is-open) .blog-toc-list{padding:0 0 .5rem}.blog-toc-item{position:relative}.blog-toc-item:not(:last-child):before{content:"";position:absolute;left:4px;width:2px;top:calc(.85rem + 5px);bottom:calc(-.85rem - 5px);border-radius:2px;background:#dde0f0;transition:background-color .3s}.blog-toc-item.is-read:not(:last-child):before{background:var(--color-primary)}.blog-toc-item a,.blog-toc-item.depth-1 a,.blog-toc-item.depth-2 a{padding:.45rem .25rem .45rem 1.5rem;border-radius:0;background:rgba(0,0,0,0)}.blog-toc-item.depth-1 a{padding-left:2.1rem}.blog-toc-item.depth-2 a{padding-left:2.7rem}.blog-toc-item a:hover{transform:translateX(2px)}.blog-toc-item a:hover,.blog-toc-item.is-active a{background:rgba(0,0,0,0)}.blog-toc-dot{position:absolute;left:0;top:.85rem;width:10px;height:10px;margin:0;border-width:2px;z-index:1}.blog-toc-item.is-read .blog-toc-dot{opacity:1}.blog-toc-head{padding-right:8px}.blog-toc-body{padding:6px 8px 6px 0}.blog-toc-item{text-align:right}.blog-toc-item:not(:last-child):before{left:auto;right:4px}.blog-toc-item a,.blog-toc-item.depth-1 a,.blog-toc-item.depth-2 a{flex-direction:row-reverse;padding:.45rem 1.5rem .45rem .25rem}.blog-toc-item.depth-1 a{padding-right:2.1rem}.blog-toc-item.depth-2 a{padding-right:2.7rem}.blog-toc-item a:hover{transform:translateX(-2px)}.blog-toc-dot{left:auto;right:0}.blog-toc-list{position:relative}.blog-toc-list:before{right:4px;width:2px;top:calc(.85rem + 5px);height:var(--toc-solid,0);border-radius:2px;transition:height .2s ease}.blog-toc-list:after,.blog-toc-list:before{content:"";position:absolute;background:var(--color-primary);pointer-events:none;z-index:1}.blog-toc-list:after{right:2px;width:6px;top:calc(.85rem + 5px + var(--toc-solid, 0px));height:var(--toc-fill,0);-webkit-mask:var(--toc-wave) 0 0/6px 28px repeat-y;mask:var(--toc-wave) 0 0/6px 28px repeat-y;animation:blog-toc-wave 1.6s linear infinite}.blog-toc-item.is-read:not(:last-child):before{background:#dde0f0}}@keyframes blog-toc-wave{0%{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:0 28px;mask-position:0 28px}}@media(prefers-reduced-motion:reduce){.blog-toc-list:after{animation:none!important}}@media(min-width:1024px){.blog-toc-head{border-bottom:1px solid color-mix(in srgb,var(--color-primary) 16%,transparent);margin-bottom:.5rem}}@property --toc-fade-top{syntax:"<length>";inherits:false;initial-value:0}@property --toc-fade-bottom{syntax:"<length>";inherits:false;initial-value:0}.blog-toc-body,.blog-toc-list{--toc-fade-top:0px;--toc-fade-bottom:0px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--toc-fade-top),#000 calc(100% - var(--toc-fade-bottom)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--toc-fade-top),#000 calc(100% - var(--toc-fade-bottom)),transparent 100%);transition:--toc-fade-top .25s ease,--toc-fade-bottom .25s ease;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0) rgba(0,0,0,0)}.blog-toc-body[data-more-top=true],.blog-toc-list[data-more-top=true]{--toc-fade-top:32px}.blog-toc-body[data-more-bottom=true],.blog-toc-list[data-more-bottom=true]{--toc-fade-bottom:40px}.blog-toc-body::-webkit-scrollbar,.blog-toc-list::-webkit-scrollbar{width:4px}.blog-toc-body::-webkit-scrollbar-track,.blog-toc-list::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.blog-toc-body::-webkit-scrollbar-thumb,.blog-toc-list::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(0,0,0,0);transition:background-color .2s}.blog-toc:focus-within .blog-toc-body,.blog-toc:focus-within .blog-toc-list,.blog-toc:hover .blog-toc-body,.blog-toc:hover .blog-toc-list{scrollbar-color:color-mix(in srgb,var(--color-primary) 35%,transparent) rgba(0,0,0,0)}.blog-toc:focus-within .blog-toc-body::-webkit-scrollbar-thumb,.blog-toc:focus-within .blog-toc-list::-webkit-scrollbar-thumb,.blog-toc:hover .blog-toc-body::-webkit-scrollbar-thumb,.blog-toc:hover .blog-toc-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-primary) 35%,transparent)}.blog-toc:focus-within .blog-toc-body::-webkit-scrollbar-thumb:hover,.blog-toc:focus-within .blog-toc-list::-webkit-scrollbar-thumb:hover,.blog-toc:hover .blog-toc-body::-webkit-scrollbar-thumb:hover,.blog-toc:hover .blog-toc-list::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--color-primary) 60%,transparent)}.blog-toc-list{transition:padding .3s var(--toc-ease),--toc-fade-top .25s ease,--toc-fade-bottom .25s ease}.blog-toc.is-open .blog-toc-list{max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain}@media(min-width:1024px){.blog-toc.is-open .blog-toc-list{max-height:none;overflow:visible}.blog-toc-list{-webkit-mask-image:none;mask-image:none}}@media(prefers-reduced-motion:reduce){.blog-toc-body,.blog-toc-list{scroll-behavior:auto}}