body.gradient.template-article,body.template-article{--color-background:255,255,255!important;--gradient-background:#ffffff!important;background-color:#fff!important;background-image:none!important}body.template-article .article-template,body.template-article .article-template__content,body.template-article .blog-article-container,body.template-article .page-width,body.template-article .section-template--article,body.template-article main{--color-background:255,255,255;--gradient-background:#ffffff;background:#fff}body.template-article .background-secondary,body.template-article .color-background-1,body.template-article .color-background-2,body.template-article .shopify-section,body.template-article section{--color-background:255,255,255!important;--gradient-background:#ffffff!important;background-color:#fff!important;background-image:none!important}body.template-article .gradient{background:#fff!important}.blog-article-content{font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{scroll-behavior:smooth;scroll-padding-top:var(--header-height,160px)}:root{--blog-primary-color:#1a1a1a;--blog-primary-hover:#0066cc;--blog-primary-light:#f8f9fa;--blog-secondary-color:#4a4a4a;--blog-text-color:#1a1a1a!important;--blog-text-muted:#666666;--blog-heading-color:#000000!important;--blog-background:#ffffff;--blog-background-secondary:#ffffff;--blog-background-gradient:none;--blog-border-color:#e0e0e0;--blog-border-light:#f5f5f5;--blog-accent-primary:#5C6BC0;--blog-accent-secondary:#7986CB;--blog-accent-tertiary:#9FA8DA;--blog-link-color:#1976D2;--blog-link-hover:#1565C0;--blog-link-visited:#6A4C93;--blog-font-size-base:clamp(1.125rem, 1rem + 2vw, 1.6875rem);--blog-line-height:1.8;--blog-font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--blog-font-heading:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Georgia",serif;--blog-letter-spacing:.02em;--blog-content-max-width:720px;--blog-container-max-width:1400px;--blog-toc-width:280px;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--spacing-2xl:4rem;--shadow-sm:0 1px 2px rgba(0, 0, 0, .05);--shadow-md:0 2px 4px rgba(0, 0, 0, .06),0 1px 2px rgba(0, 0, 0, .04);--shadow-lg:0 4px 6px rgba(0, 0, 0, .07),0 2px 4px rgba(0, 0, 0, .04);--shadow-xl:0 8px 12px rgba(0, 0, 0, .08),0 4px 6px rgba(0, 0, 0, .04);--blog-transition:all .3s cubic-bezier(.4, 0, .2, 1);--blog-transition-fast:all .15s cubic-bezier(.4, 0, .2, 1)}@media (prefers-color-scheme:dark){:root{--blog-text-color:#f1f5f9;--blog-background:#0f172a;--blog-background-secondary:#1e293b;--blog-border-color:#334155}}body,body.template-article{--blog-background:#ffffff!important;--blog-text-color:#1a1a1a!important;--blog-heading-color:#000000!important;--blog-border-color:#e0e0e0!important;--blog-border-light:#f5f5f5!important;--blog-primary-light:#f8f9fa!important;--blog-background-secondary:#ffffff!important}body.template-article,body.template-article .blog-article-container,body.template-article .blog-article-content,body.template-article .blog-toc,body.template-article main{background:#fff!important}body.template-article .blog-article-content div,body.template-article .blog-article-content li,body.template-article .blog-article-content p,body.template-article .blog-article-content span{color:#1a1a1a!important}body.template-article .blog-article-content h2,body.template-article .blog-article-content h3,body.template-article .blog-article-content h4{color:#000!important}.article-template .blog-article-container,.blog-article-container{display:grid;grid-template-columns:1fr minmax(600px,var(--blog-content-max-width)) var(--blog-toc-width);gap:var(--spacing-xl);max-width:var(--blog-container-max-width);margin:0 auto;padding:var(--spacing-xl) var(--spacing-md);color:var(--blog-text-color);background:#fff!important;font-family:var(--blog-font-family);line-height:var(--blog-line-height);letter-spacing:var(--blog-letter-spacing);position:relative}.blog-article-left{grid-column:1}.blog-article-main{grid-column:2;min-width:0}@media (max-width:1024px){.blog-article-container{grid-template-columns:1fr;grid-template-rows:auto auto;gap:20px;padding:20px 15px}.blog-article-left{display:none}.blog-article-main{grid-column:1;grid-row:1}:root{--blog-font-size-base:1.5rem;--spacing-md:1.25rem;--spacing-lg:1.75rem;--spacing-xl:2.5rem}.blog-article-title{font-size:clamp(2.16rem,6.48vw,2.7rem)}.blog-article-content h2{font-size:clamp(1.875rem,6vw,2.25rem)}.blog-article-content{text-align:left}}.blog-progress-bar{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--blog-border-light);z-index:9999;box-shadow:0 1px #0000000d}.blog-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--blog-accent-primary) 0,var(--blog-accent-secondary) 100%);width:0%;transition:width .3s ease-out;box-shadow:0 0 8px #5c6bc066}.blog-skip-link{position:absolute;top:-40px;left:6px;background:var(--blog-primary-color);color:#fff;padding:8px;text-decoration:none;z-index:10000;border-radius:0 0 4px 4px}.blog-skip-link:focus{top:0}.blog-article-header{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--blog-border-light);position:relative}.blog-article-header:after{content:"";position:absolute;bottom:-1px;left:0;width:60px;height:2px;background:var(--blog-accent-primary);border-radius:1px;transition:width .6s}.blog-article-header:hover:after{width:120px}.blog-article-title{font-family:var(--blog-font-heading);font-size:clamp(2rem,3vw + 1rem,3.375rem);font-weight:700;line-height:1.3;margin-bottom:var(--spacing-md);color:var(--blog-heading-color)!important;letter-spacing:-.02em;font-feature-settings:"palt" 1}.blog-article-meta{display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:center;font-size:.875rem;color:var(--blog-text-muted)}.blog-article-author,.blog-article-date{display:flex;align-items:center;gap:.5rem;color:var(--blog-text-muted)!important}.blog-article-author svg,.blog-article-date svg{opacity:.7;color:var(--blog-text-muted)!important}.blog-reading-time{display:flex;align-items:center;gap:var(--spacing-xs);background:var(--blog-primary-light);padding:.375rem 1rem;border-radius:24px;border:1px solid var(--blog-border-color);font-size:.8125rem;font-weight:500;color:var(--blog-text-muted);transition:var(--blog-transition-fast)}.blog-reading-time:hover{background:var(--blog-background);border-color:var(--blog-primary-color);transform:translateY(-1px)}.blog-reading-time svg{color:var(--blog-text-muted)}.article-template__content .blog-article-content,.blog-article-content{font-size:var(--blog-font-size-base);line-height:var(--blog-line-height);color:var(--blog-text-color)!important;text-align:justify;text-justify:inter-ideograph;background:#fff}.blog-article-content div,.blog-article-content li,.blog-article-content p,.blog-article-content span{color:var(--blog-text-color)!important}.blog-article-content h2{font-family:var(--blog-font-heading);font-size:clamp(1.75rem,2vw + .5rem,2.8125rem);font-weight:700;margin:var(--spacing-2xl) 0 var(--spacing-md) 0;color:var(--blog-heading-color)!important;position:relative;padding-left:1rem}.blog-article-content h2:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:90%;background:var(--blog-accent-primary);border-radius:2px}.blog-article-content h3{font-size:clamp(1.5rem,1.5vw + .5rem,2.25rem);font-weight:600;margin:var(--spacing-xl) 0 var(--spacing-sm) 0;color:var(--blog-heading-color)!important;position:relative;padding-left:.875rem}.blog-article-content h3:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:90%;background:var(--blog-accent-secondary);border-radius:1.5px}.blog-article-content h4{font-size:clamp(1.25rem,1vw + .5rem,1.875rem);font-weight:600;margin:var(--spacing-lg) 0 var(--spacing-xs) 0;color:var(--blog-heading-color)!important;position:relative;padding-left:.75rem}.blog-article-content h4:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:90%;background:var(--blog-accent-tertiary);border-radius:1px}.blog-article-content p{margin-bottom:var(--spacing-md)}.blog-article-content>p:first-of-type{font-size:1.6875rem;line-height:1.8;color:var(--blog-text-color);margin-bottom:var(--spacing-lg)}.blog-article-content ol,.blog-article-content ul{margin-bottom:var(--spacing-md);padding-left:var(--spacing-lg)}.blog-article-content li{margin-bottom:var(--spacing-xs);line-height:1.8}.blog-article-content ul li::marker{color:var(--blog-primary-color)}.blog-article-content ol li::marker{color:var(--blog-primary-color);font-weight:600}.blog-article-content blockquote{margin:var(--spacing-xl) 0;padding:var(--spacing-md) var(--spacing-lg);background:var(--blog-primary-light);border-left:2px solid var(--blog-primary-color);border-radius:0;font-style:normal;position:relative}.blog-article-content a{color:var(--blog-link-color)!important;text-decoration:underline;text-decoration-color:#1976d24d;text-decoration-thickness:1px;text-underline-offset:3px;transition:var(--blog-transition-fast)}.blog-article-content a:hover{color:var(--blog-link-hover)!important;text-decoration-color:var(--blog-link-hover);text-decoration-thickness:2px}.blog-article-content a:visited{color:var(--blog-link-visited)!important}.blog-article-content strong{font-weight:600;color:var(--blog-text-color)}.blog-article-content img{max-width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow-md);margin:var(--spacing-lg) 0;transition:var(--blog-transition)}.blog-article-content img:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}.blog-article-content pre{background:var(--blog-background-secondary);border:1px solid var(--blog-border-color);border-radius:8px;padding:var(--spacing-md);overflow-x:auto;margin:var(--spacing-md) 0;font-size:.875rem;line-height:1.6}.blog-article-content code{background:var(--blog-primary-light);color:var(--blog-text-color);padding:.125rem .375rem;border-radius:3px;font-size:.875em;font-family:Consolas,Monaco,monospace}.blog-article-content pre code{background:0 0;color:inherit;padding:0}.blog-article-content table{width:100%;border-collapse:collapse;margin:var(--spacing-lg) 0;font-size:.9375rem;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm)}.blog-article-content th{background:var(--blog-background-secondary);padding:var(--spacing-sm);text-align:left;font-weight:600;border-bottom:2px solid var(--blog-border-color)}.blog-article-content td{padding:var(--spacing-sm);border-bottom:1px solid var(--blog-border-light)}.blog-article-content tr:last-child td{border-bottom:none}.blog-article-content tr:hover{background:var(--blog-background-secondary)}.blog-toc-container{grid-column:3;position:sticky;top:160px;height:calc(100vh - 260px);overflow-y:auto;align-self:start}@media (max-width:1024px){.blog-toc-container{display:none}}.blog-toc-container::-webkit-scrollbar{width:6px}.blog-toc-container::-webkit-scrollbar-track{background:0 0}.blog-toc-container::-webkit-scrollbar-thumb{background:var(--blog-border-color);border-radius:3px}.blog-toc-container::-webkit-scrollbar-thumb:hover{background:var(--blog-secondary-color)}.blog-toc{background:#fff;border-radius:0;padding:var(--spacing-md);border:1px solid var(--blog-border-color);box-shadow:none;transition:var(--blog-transition)}.blog-toc:hover{border-color:var(--blog-primary-color)}.blog-toc-title{font-size:1rem;font-weight:700;margin-bottom:var(--spacing-md);color:var(--blog-text-color);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--blog-border-light);position:relative}.blog-toc-title:after{content:"";position:absolute;bottom:-1px;left:0;width:40px;height:2px;background:var(--blog-accent-primary);border-radius:1px}.blog-toc-list{list-style:none;padding:0;margin:0}.blog-toc-item{margin:.5rem 0}.blog-toc-item--h2{font-weight:600}.blog-toc-item--h3{padding-left:1rem;font-size:.9rem}.blog-toc-item--h4{padding-left:2rem;font-size:.85rem}.blog-toc-link{display:block;padding:var(--spacing-xs) var(--spacing-sm);color:var(--blog-secondary-color)!important;text-decoration:none;border-radius:8px;transition:var(--blog-transition-fast);position:relative;font-size:1.3125rem;line-height:1.6}.blog-toc-link:hover{background:var(--blog-background);color:var(--blog-primary-color);transform:translate(2px);box-shadow:var(--shadow-sm)}.blog-toc-link.active{background:var(--blog-primary-light);color:var(--blog-primary-color);font-weight:600;box-shadow:var(--shadow-sm)}.blog-toc-link.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--blog-accent-primary);border-radius:1.5px}.blog-toc-progress{width:100%;height:2px;background:var(--blog-border-color);border-radius:1px;margin-top:.25rem;overflow:hidden}.blog-toc-progress-fill{height:100%;background:var(--blog-accent-primary);width:0%;transition:width .3s ease-out}.blog-toc-floating{display:none;position:fixed;bottom:20px;right:20px;z-index:9998}@media (max-width:1024px){.blog-toc-floating{display:block}}.blog-toc-floating-button{width:56px;height:56px;border-radius:50%;background:var(--blog-primary-color);color:#fff;border:none;cursor:pointer;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;transition:var(--blog-transition);position:relative}.blog-toc-floating-button:hover{transform:scale(1.05) translateY(-2px);box-shadow:var(--shadow-lg)}.blog-toc-floating-progress{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%}.blog-toc-floating-progress svg{width:100%;height:100%;transform:rotate(-90deg)}.blog-toc-floating-progress circle{fill:none;stroke-width:3}.blog-toc-floating-progress-bg{stroke:#fff3}.blog-toc-floating-progress-fill{stroke:#fff;stroke-dasharray:188.5;stroke-dashoffset:188.5;transition:stroke-dashoffset .3s ease-out}.blog-toc-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.blog-toc-modal.active{display:block;animation:.2s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.blog-toc-modal-content{position:absolute;bottom:0;left:0;right:0;background:var(--blog-background);border-radius:24px 24px 0 0;padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);max-height:75vh;overflow-y:auto;animation:.4s cubic-bezier(.34,1.56,.64,1) slideUp;box-shadow:0 -10px 30px #0000001a}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.blog-toc-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--blog-border-color)}.blog-toc-modal-header h2{margin:0;font-size:1.25rem;color:var(--blog-text-color)}.blog-toc-modal-close{background:0 0;border:none;font-size:1.5rem;cursor:pointer;color:var(--blog-secondary-color);padding:.5rem;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:var(--blog-transition)}.blog-toc-modal-close:hover{background:var(--blog-border-color);color:var(--blog-text-color)}.blog-fade-in{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}.blog-fade-in.visible{opacity:1;transform:translateY(0)}.blog-fade-in:first-child{transition-delay:.1s}.blog-fade-in:nth-child(2){transition-delay:.2s}.blog-fade-in:nth-child(3){transition-delay:.3s}.blog-fade-in:nth-child(4){transition-delay:.4s}@media print{.blog-progress-bar,.blog-toc-container,.blog-toc-floating{display:none!important}.blog-article-container{grid-template-columns:1fr;gap:0;padding:0}.blog-article-main{grid-column:1}}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}body.template-article #shopify-section-footer,body.template-article #shopify-section-header{background-color:#fff}body.template-article #MainContent,body.template-article .main-content,body.template-article [id*=shopify-section]{background-color:#fff;background-image:none}body.template-article{background:#fff!important}body.template-article *{background-color:inherit}body.template-article .background-secondary,body.template-article [class*=background-],body.template-article [class*=color-background]{background-color:#fff!important}
/*# sourceMappingURL=/cdn/shop/t/29/assets/optimized-blog-article.css.map */