.ss-blog-content{container:ss-blog/inline-size;--ss-blog-accent:var(--color-ss-blue);--ss-blog-accent-pale:var(--color-ss-blue-pale);--ss-blog-accent-bg:var(--color-ss-blue-bg);--ss-blog-warm:var(--color-ss-orange);--ss-blog-warm-pale:color-mix(in oklab,var(--color-ss-orange) 7%,#fff);--ss-blog-warm-line:color-mix(in oklab,var(--color-ss-orange) 30%,#fff);--ss-blog-ok:var(--color-ss-green);--ss-blog-ok-pale:color-mix(in oklab,var(--color-ss-green) 7%,#fff);--ss-blog-line:var(--color-ss-line);--ss-blog-surface:var(--color-ss-surface);--ss-blog-sub:var(--color-ss-muted);--ss-blog-on-warm:var(--color-ss-ink);--ss-blog-sub-tint:color-mix(in oklab,var(--color-ss-muted) 70%,var(--color-ss-text))}.ss-blog-content .ss-blog-article,.ss-blog-content .ss-blog-body,.ss-blog-content .ss-blog-main{max-width:none;margin:0;padding:0;background:transparent;box-shadow:none;border-radius:0;overflow:visible}.ss-blog-content .ss-blog-breadcrumb,.ss-blog-content .ss-blog-demo-label{display:none}.ss-blog-content .ss-blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.875rem;font-size:.8125rem;color:var(--ss-blog-sub)}.ss-blog-content .ss-blog-meta-cat{display:inline-block;padding:.1875rem .75rem;background:var(--ss-blog-accent);color:var(--color-base-100);font-size:.6875rem;font-weight:500;text-decoration:none}.ss-blog-content .ss-blog-title{margin:1rem 0 0;font-size:clamp(1.25rem,4vw,1.625rem);font-weight:700;line-height:1.5;color:var(--ss-blog-accent)}.ss-blog-content .ss-blog-aio{margin-bottom:1.75rem;padding:1.125rem 1.375rem;background:var(--ss-blog-accent-pale);border-left:4px solid var(--ss-blog-accent);font-size:.9375rem;line-height:1.75;color:var(--color-ss-text)}.ss-blog-content .ss-blog-wakaru{margin-bottom:2rem;border:2px solid var(--ss-blog-accent)}.ss-blog-content .ss-blog-wakaru-title{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:var(--ss-blog-accent);color:var(--color-base-100);font-size:.875rem;font-weight:700}.ss-blog-content .ss-blog-wakaru-title:before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;background:var(--color-base-100);color:var(--ss-blog-accent);border-radius:50%;font-size:.6875rem;font-weight:700}.ss-blog-content .ss-blog-wakaru ul{margin:0;padding:1rem 1.25rem;list-style:none}.ss-blog-content .ss-blog-wakaru li{position:relative;margin:0;padding:.375rem 0 .375rem 1.5rem;font-size:.875rem;line-height:1.7}.ss-blog-content .ss-blog-wakaru li:before{content:"";position:absolute;left:0;top:.8125rem;width:.5rem;height:.5rem;background:var(--ss-blog-accent);border-radius:50%}.ss-blog-content .ss-blog-toc{margin-bottom:2rem;background:var(--ss-blog-surface);border:1px solid var(--ss-blog-line)}.ss-blog-content .ss-blog-toc-toggle{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;font-size:.875rem;font-weight:700;color:var(--color-ss-text)}.ss-blog-content .ss-blog-toc-list{margin:0;padding:0 1.25rem 1rem;list-style:none;counter-reset:ss-blog-toc}.ss-blog-content .ss-blog-toc-list li{margin:0;padding:.3125rem 0;counter-increment:ss-blog-toc}.ss-blog-content .ss-blog-toc-list li::marker{content:none}.ss-blog-content .ss-blog-toc-list a{display:flex;align-items:baseline;gap:.5rem;font-size:.84375rem;color:var(--color-ss-text);text-decoration:none}.ss-blog-content .ss-blog-toc-list a:hover{color:var(--ss-blog-accent);text-decoration:underline}.ss-blog-content .ss-blog-toc-list a:before{content:counter(ss-blog-toc);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.375rem;height:1.375rem;background:var(--ss-blog-accent);color:var(--color-base-100);border-radius:50%;font-size:.6875rem;font-weight:700}.ss-blog-content .ss-blog-h2{margin:2.75rem 0 1.25rem;padding:.5rem 0 .5rem 1rem;border-left:4px solid var(--ss-blog-accent);font-size:1.25rem;font-weight:700;line-height:1.5;color:var(--color-ss-ink)}.ss-blog-content .ss-blog-h2:first-child{margin-top:0}.ss-blog-content .ss-blog-h3{position:relative;margin:1.75rem 0 1rem;padding:0 0 .5rem;border-bottom:2px solid var(--ss-blog-accent);font-size:1.0625rem;font-weight:700;color:var(--color-ss-ink)}.ss-blog-content .ss-blog-h3:after{content:"";position:absolute;left:0;bottom:-2px;width:5rem;height:2px;background:var(--ss-blog-warm)}.ss-blog-content .ss-blog-features{margin:0 0 1.5rem;padding:0;list-style:none}.ss-blog-content .ss-blog-features li{position:relative;margin:0;padding:.625rem 0 .625rem 1.625rem;border-bottom:1px dashed var(--ss-blog-line);font-size:.90625rem;line-height:1.75}.ss-blog-content .ss-blog-features li:last-child{border-bottom:none}.ss-blog-content .ss-blog-features li:before{content:"▶";position:absolute;left:0;top:.75rem;color:var(--ss-blog-accent);font-size:.5625rem}.ss-blog-content .ss-blog-features li strong{color:var(--ss-blog-accent)}.ss-blog-content .ss-blog-callout{margin:1.5rem 0 1.75rem;padding:1.25rem 1.375rem;background:var(--ss-blog-warm-pale);border:1px solid var(--ss-blog-warm-line)}.ss-blog-content .ss-blog-callout-title{display:inline-flex;align-items:center;gap:.375rem;margin-bottom:.75rem;padding:.25rem .875rem;background:var(--ss-blog-warm);color:var(--ss-blog-on-warm);font-size:.78125rem;font-weight:700}.ss-blog-content .ss-blog-callout p{margin:0 0 .5rem;font-size:.875rem;line-height:1.8}.ss-blog-content .ss-blog-callout p:last-child{margin-bottom:0}.ss-blog-content .ss-blog-info{margin:1.25rem 0 1.5rem;padding:1.25rem 1.375rem;background:var(--ss-blog-accent-pale)}.ss-blog-content .ss-blog-info-title{display:flex;align-items:center;gap:.375rem;margin-bottom:.625rem;font-size:.875rem;font-weight:700;color:var(--color-ss-ink)}.ss-blog-content .ss-blog-info-title:before{content:"i";display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;background:var(--ss-blog-accent);color:var(--color-base-100);border-radius:50%;font-size:.6875rem;font-style:italic;font-weight:700}.ss-blog-content .ss-blog-info>:last-child{margin-bottom:0}.ss-blog-content .ss-blog-table{width:100%;margin:1rem 0 1.5rem;border:1px solid var(--ss-blog-line);border-collapse:collapse;font-size:.84375rem}.ss-blog-content .ss-blog-table thead th{padding:.625rem .875rem;background:var(--ss-blog-accent);color:var(--color-base-100);font-size:.78125rem;font-weight:700;text-align:left}.ss-blog-content .ss-blog-table tbody td{padding:.625rem .875rem;border-bottom:1px solid var(--ss-blog-line);vertical-align:top;line-height:1.65}.ss-blog-content .ss-blog-table tbody tr:last-child td{border-bottom:none}.ss-blog-content .ss-blog-table tbody tr:nth-child(2n){background:var(--ss-blog-accent-pale)}.ss-blog-content .ss-blog-table caption,.ss-blog-content .ss-blog-table tbody td:first-child{font-weight:700;color:var(--color-ss-ink)}.ss-blog-content .ss-blog-table caption{caption-side:top;padding:0 0 .5rem;font-size:.8125rem;text-align:left}.ss-blog-content .ss-blog-table tbody tr.is-hl{background:var(--ss-blog-warm-pale)}.ss-blog-content .ss-blog-table tbody tr.is-hl td{font-weight:700;color:var(--color-ss-orange-text)}.ss-blog-content .ss-blog-alert{margin:0 0 1.5rem;padding:1rem 1.25rem;background:var(--ss-blog-warm-pale);border:1px solid var(--ss-blog-warm);font-size:.875rem;line-height:1.85}.ss-blog-content .ss-blog-alert strong{color:var(--color-ss-orange-text)}.ss-blog-content .ss-blog-figure{margin:.5rem 0 1.875rem}.ss-blog-content .ss-blog-figure,.ss-blog-content :has(>.ss-blog-mx,>.ss-blog-hadr,>.ss-blog-grid16,>.ss-blog-resp),.ss-blog-content:has(>.ss-blog-mx,>.ss-blog-hadr,>.ss-blog-grid16,>.ss-blog-resp){overflow-x:auto}.ss-blog-content .ss-blog-figure-title{margin-bottom:.875rem;padding-left:.75rem;border-left:3px solid var(--ss-blog-warm);font-size:.8125rem;font-weight:700;color:var(--ss-blog-accent)}.ss-blog-content .ss-blog-figure figcaption{margin-top:.75rem;font-size:.75rem;line-height:1.7;color:var(--ss-blog-sub);text-align:center}.ss-blog-content .ss-blog-chain{padding:1.125rem 1rem;background:var(--ss-blog-surface);border:1px solid var(--ss-blog-line)}.ss-blog-content .ss-blog-chain-item{margin-bottom:.5rem;padding:.6875rem .8125rem;background:var(--color-base-100);border:1px solid var(--ss-blog-line);border-left:4px solid var(--ss-blog-accent)}.ss-blog-content .ss-blog-chain-item:last-of-type{margin-bottom:0}.ss-blog-content .ss-blog-chain-item.d3{background:var(--ss-blog-warm-pale);border-left-color:var(--ss-blog-warm)}.ss-blog-content .ss-blog-chain-item.d4{border-left-color:var(--ss-blog-ok)}.ss-blog-content .ss-blog-chain-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin-bottom:.375rem}.ss-blog-content .ss-blog-chain-name{font-size:.78125rem;font-weight:700;color:var(--color-ss-ink)}.ss-blog-content .ss-blog-chain-dom{padding:.0625rem .5rem;background:var(--ss-blog-accent-pale);font-size:.625rem;font-weight:700;color:var(--ss-blog-sub-tint)}.ss-blog-content .ss-blog-chain-item.d3 .ss-blog-chain-dom{background:var(--ss-blog-warm);color:var(--ss-blog-on-warm)}.ss-blog-content .ss-blog-chain-tags{display:flex;flex-wrap:wrap;gap:.3125rem}.ss-blog-content .ss-blog-chain-tags span{padding:.1875rem .5625rem;background:var(--ss-blog-accent-pale);border:1px solid var(--ss-blog-line);font-size:.65625rem;line-height:1.5;color:var(--color-ss-text)}.ss-blog-content .ss-blog-chain-item.d3 .ss-blog-chain-tags span{background:var(--color-base-100)}.ss-blog-content .ss-blog-pair{padding:1.125rem 1rem;background:var(--ss-blog-surface);border:1px solid var(--ss-blog-line)}.ss-blog-content .ss-blog-pair-head,.ss-blog-content .ss-blog-pair-row{display:grid;grid-template-columns:minmax(0,1fr) 4.625rem minmax(0,1fr);gap:.5rem}.ss-blog-content .ss-blog-pair-head{margin-bottom:.5rem}.ss-blog-content .ss-blog-pair-head>div{padding:.375rem 0;background:var(--ss-blog-accent);color:var(--color-base-100);font-size:.71875rem;font-weight:700;text-align:center}.ss-blog-content .ss-blog-pair-head>div.mid{background:transparent;color:var(--ss-blog-sub-tint);font-size:.625rem}.ss-blog-content .ss-blog-pair-row{margin-bottom:.375rem;align-items:stretch}.ss-blog-content .ss-blog-pair-cell{display:flex;align-items:center;padding:.5rem .625rem;background:var(--color-base-100);border:1px solid var(--ss-blog-line);font-size:.6875rem;line-height:1.5;color:var(--color-ss-text)}.ss-blog-content .ss-blog-pair-use{display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;line-height:1.35;color:var(--ss-blog-sub-tint);text-align:center}.ss-blog-content .ss-blog-pair-base{margin-top:.75rem;padding:.75rem .875rem;background:var(--color-base-100);border:1px solid var(--ss-blog-line);border-top:3px solid var(--ss-blog-ok)}.ss-blog-content .ss-blog-pair-base-title{margin-bottom:.5rem;font-size:.75rem;font-weight:700;color:var(--ss-blog-ok);text-align:center}.ss-blog-content .ss-blog-pair-base-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.3125rem}.ss-blog-content .ss-blog-pair-base-tags span{padding:.1875rem .5625rem;background:var(--ss-blog-ok-pale);border:1px solid color-mix(in oklab,var(--color-ss-green) 25%,#fff);font-size:.65625rem;line-height:1.5;color:var(--color-ss-text)}.ss-blog-content .ss-blog-pair-note{margin-top:.75rem;padding:.6875rem .875rem;background:var(--ss-blog-warm-pale);border:1px solid var(--ss-blog-warm);font-size:.71875rem;line-height:1.75;color:var(--color-ss-text)}.ss-blog-content .ss-blog-pair-note b{color:var(--color-ss-orange-text)}.ss-blog-content .ss-blog-faq{margin:1rem 0 1.5rem;padding:.25rem 1.375rem;border:1px solid var(--ss-blog-line)}.ss-blog-content .ss-blog-faq-item{padding:1rem 0;border-bottom:1px dashed var(--ss-blog-line)}.ss-blog-content .ss-blog-faq-item:last-child{border-bottom:none}.ss-blog-content .ss-blog-faq-a,.ss-blog-content .ss-blog-faq-q{position:relative;padding-left:1.625rem}.ss-blog-content .ss-blog-faq-q{margin:0 0 .5rem;font-size:.90625rem;font-weight:700;line-height:1.7;color:var(--ss-blog-accent)}.ss-blog-content .ss-blog-faq-a{margin:0;font-size:.875rem;line-height:1.85;color:var(--color-ss-text)}.ss-blog-content .ss-blog-faq-a:before,.ss-blog-content .ss-blog-faq-q:before{position:absolute;left:0;top:.125rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;color:var(--color-base-100);font-size:.75rem;font-weight:700}.ss-blog-content .ss-blog-faq-q:before{content:"Q";background:var(--ss-blog-accent)}.ss-blog-content .ss-blog-faq-a:before{content:"A";background:var(--ss-blog-warm);color:var(--ss-blog-on-warm)}.ss-blog-content .ss-blog-refs{margin:0 0 1.5rem;padding:0;list-style:none}.ss-blog-content .ss-blog-refs li{position:relative;margin:0;padding:.625rem 0 .625rem 1.625rem;border-bottom:1px dashed var(--ss-blog-line);font-size:.875rem;line-height:1.7}.ss-blog-content .ss-blog-refs li:last-child{border-bottom:none}.ss-blog-content .ss-blog-refs li::marker{content:none}.ss-blog-content .ss-blog-refs li:before{content:"🔗";position:absolute;left:0;top:.625rem;font-size:.75rem}.ss-blog-content .ss-blog-refs-note{margin-bottom:1rem;font-size:.8125rem;line-height:1.8;color:var(--ss-blog-sub)}.ss-blog-content .ss-blog-numlist{margin:0 0 1.5rem;padding:0;list-style:none;counter-reset:ss-blog-num}.ss-blog-content .ss-blog-numlist li{position:relative;margin:0;padding:.875rem 0 .875rem 2.75rem;border-bottom:1px solid var(--ss-blog-line);counter-increment:ss-blog-num;font-size:.90625rem;line-height:1.8}.ss-blog-content .ss-blog-numlist li:last-child{border-bottom:none}.ss-blog-content .ss-blog-numlist li::marker{content:none}.ss-blog-content .ss-blog-numlist li:before{content:counter(ss-blog-num);position:absolute;left:0;top:.875rem;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;background:var(--ss-blog-accent);color:var(--color-base-100);border-radius:50%;font-size:.8125rem;font-weight:700}.ss-blog-content .ss-blog-numlist li strong{color:var(--ss-blog-accent)}.ss-blog-content .ss-blog-quiz{margin:1.75rem 0;border:2px solid var(--ss-blog-warm)}.ss-blog-content .ss-blog-quiz-header{padding:.625rem 1.25rem;background:var(--ss-blog-warm);color:var(--ss-blog-on-warm);font-size:.875rem;font-weight:700}.ss-blog-content .ss-blog-quiz-body{padding:1.25rem}.ss-blog-content .ss-blog-quiz-q{margin:0 0 .875rem;font-size:.90625rem;line-height:1.8}.ss-blog-content .ss-blog-quiz-options{margin:0 0 1rem;padding:0;list-style:none;counter-reset:ss-blog-opt}.ss-blog-content .ss-blog-quiz-options li{position:relative;margin:0 0 .375rem;padding:.5625rem .875rem .5625rem 2.375rem;border:1px solid var(--ss-blog-line);counter-increment:ss-blog-opt;font-size:.875rem}.ss-blog-content .ss-blog-quiz-options li::marker{content:none}.ss-blog-content .ss-blog-quiz-options li:before{content:counter(ss-blog-opt);position:absolute;left:.625rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;border:1.5px solid var(--ss-blog-line);border-radius:50%;font-size:.6875rem;font-weight:700;color:var(--ss-blog-sub)}.ss-blog-content .ss-blog-quiz-options li[data-num]:before{content:attr(data-num)}.ss-blog-content .ss-blog-quiz-toggle,.ss-blog-content details.ss-blog-quiz-answer>summary{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.625rem 1rem;background:var(--ss-blog-accent-pale);border:1px solid var(--ss-blog-line);font-size:.84375rem;font-weight:700;color:var(--color-ss-text);cursor:pointer;list-style:none}.ss-blog-content details.ss-blog-quiz-answer>summary::-webkit-details-marker{display:none}.ss-blog-content details.ss-blog-quiz-answer>summary:after{content:"▼";font-size:.625rem}.ss-blog-content details.ss-blog-quiz-answer[open]>summary:after{content:"▲"}.ss-blog-content .ss-blog-quiz-answer-inner{margin-top:.75rem;padding:.875rem 1.125rem;background:var(--ss-blog-ok-pale);border-left:4px solid var(--ss-blog-ok)}.ss-blog-content .ss-blog-quiz-answer-label{margin-bottom:.375rem;font-size:.8125rem;font-weight:700;color:var(--ss-blog-ok)}.ss-blog-content .ss-blog-quiz-answer-inner p{margin:0;font-size:.84375rem;line-height:1.75}.ss-blog-content .ss-blog-matome{margin:2rem 0 0;padding:1.5rem;background:var(--ss-blog-accent-pale)}.ss-blog-content .ss-blog-matome h2{margin:0 0 .75rem;padding:0;border:none;font-size:1.125rem;color:var(--color-ss-ink)}.ss-blog-content .ss-blog-matome h2:after{content:none}.ss-blog-content .ss-blog-matome>:last-child{margin-bottom:0}.ss-blog-content .ss-blog-cta{margin:1.75rem 0 0;padding:1.75rem 1.5rem;background:var(--ss-blog-warm-pale);border:2px solid var(--ss-blog-warm);text-align:center}.ss-blog-content .ss-blog-cta h3{margin:0 0 .625rem;padding:0;border:none;font-size:1.0625rem;color:var(--color-ss-ink)}.ss-blog-content .ss-blog-cta h3:after{content:none}.ss-blog-content .ss-blog-cta p{margin:0 0 1rem;font-size:.84375rem;line-height:1.7;color:var(--ss-blog-sub-tint)}.ss-blog-content .ss-blog-cta-btn{display:inline-block;padding:.875rem 2.5rem;background:var(--ss-blog-warm);color:var(--ss-blog-on-warm);font-size:.9375rem;font-weight:700;text-decoration:none}.ss-blog-content .ss-blog-cta-btn:hover{background:color-mix(in oklab,var(--ss-blog-warm) 88%,#000)}.ss-blog-content .ss-blog-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.ss-blog-content .ss-blog-related-card{display:block;border:1px solid var(--ss-blog-line);color:var(--color-ss-text);text-decoration:none}.ss-blog-content .ss-blog-related-thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:var(--ss-blog-accent-pale);border-bottom:1px solid var(--ss-blog-line);font-size:.75rem;color:var(--ss-blog-sub-tint)}.ss-blog-content .ss-blog-related-body{padding:.75rem}.ss-blog-content .ss-blog-related-date{margin-top:.375rem;font-size:.6875rem;color:var(--ss-blog-sub)}.ss-blog-content .ss-blog-footer-note{margin-top:2rem;padding:1.25rem 0;border-top:1px solid var(--ss-blog-line);font-size:.75rem;color:var(--ss-blog-sub);text-align:center}@container ss-blog (max-width: 640px){.ss-blog-content .ss-blog-related-grid{grid-template-columns:minmax(0,1fr)}.ss-blog-content .ss-blog-pair-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ss-blog-content .ss-blog-pair-head>div.mid{display:none}.ss-blog-content .ss-blog-pair-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"use use" "gh ad";margin-bottom:.625rem}.ss-blog-content .ss-blog-pair-row>.ss-blog-pair-use{grid-area:use;justify-content:flex-start;margin-bottom:.125rem}.ss-blog-content .ss-blog-pair-row>.ss-blog-pair-cell:first-child{grid-area:gh}.ss-blog-content .ss-blog-pair-row>.ss-blog-pair-cell:last-child{grid-area:ad}}