/* blog: design CSS used by this page (tools/page_css.cjs), loaded only on this page */
a:not([class]):hover{color:inherit}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
@media (max-width: 760px){
  #blog{padding-bottom:72px !important}
}
@property --dent{syntax:'<length>';inherits:true;initial-value:0px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:#8e8e93}
.crumbs a{color:#a1a1a6;text-decoration:none}
.crumbs a:hover{color:#f5f4f1}
.crumbs [aria-current]{color:#f5f4f1}
.xa{background:#ffffff;color:#1d1d1f}
.xa .wrap{max-width:1180px}
.xb-h1{margin:0;font-size:clamp(44px,6vw,88px);line-height:.98;letter-spacing:-0.05em;font-weight:600;color:#f5f4f1}
.xb-card{display:flex;flex-direction:column;gap:12px;color:#1d1d1f;text-decoration:none}
.xb-card-img{display:block;overflow:hidden;border-radius:18px;aspect-ratio:3/2;margin-bottom:6px;background:#f5f5f7}
.xb-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.1,1)}
.xb-card:hover .xb-card-img img{transform:scale(1.06)}
.xb-card b{font-size:19px;line-height:1.3;letter-spacing:-0.02em;transition:color .25s}
.xb-card:hover b{color:#c2410c}
.motion .xb-card{animation:xbIn .8s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes xbIn{from{opacity:0;transform:translateY(24px)}}
.og-host{position:relative;overflow:hidden;isolation:isolate}
.og-host>.wrap{position:relative;z-index:1}
.og{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.og::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0b 0%,rgba(10,10,11,.85) 30%,rgba(10,10,11,.2) 70%,rgba(10,10,11,0) 100%)}
.og i{position:absolute;display:block;filter:blur(70px);opacity:.8;will-change:transform,border-radius}
.og i:nth-child(1){right:4%;top:-55%;width:560px;height:440px;background:radial-gradient(closest-side,#f26322,rgba(242,99,34,0));border-radius:42% 58% 63% 37% / 55% 39% 61% 45%}
.og i:nth-child(2){right:26%;top:10%;width:420px;height:340px;background:radial-gradient(closest-side,#ffb27a,rgba(255,178,122,0));opacity:.45;border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.og i:nth-child(3){right:-8%;bottom:-70%;width:640px;height:460px;background:radial-gradient(closest-side,#9a3412,rgba(154,52,18,0));opacity:.9;border-radius:50% 50% 38% 62% / 60% 44% 56% 40%}
.og i:nth-child(4){right:40%;bottom:-80%;width:520px;height:380px;background:radial-gradient(closest-side,#5b1d0a,rgba(91,29,10,0));opacity:.8;border-radius:63% 37% 54% 46% / 40% 55% 45% 60%}
.motion .og i:nth-child(1){animation:ogA 19s ease-in-out infinite alternate}
.motion .og i:nth-child(2){animation:ogB 23s ease-in-out infinite alternate}
.motion .og i:nth-child(3){animation:ogC 27s ease-in-out infinite alternate}
.motion .og i:nth-child(4){animation:ogB 31s ease-in-out infinite alternate-reverse}
@keyframes ogA{0%{transform:translate(0,0) rotate(0deg) scale(1);border-radius:42% 58% 63% 37% / 55% 39% 61% 45%}50%{transform:translate(-120px,60px) rotate(40deg) scale(1.15);border-radius:60% 40% 35% 65% / 40% 62% 38% 60%}100%{transform:translate(-40px,110px) rotate(80deg) scale(.95);border-radius:38% 62% 55% 45% / 62% 35% 65% 38%}}
@keyframes ogB{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(140px,-40px) rotate(-35deg) scale(1.2)}100%{transform:translate(60px,50px) rotate(-70deg) scale(.9)}}
@keyframes ogC{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-160px,-60px) rotate(30deg) scale(1.1)}100%{transform:translate(-60px,-120px) rotate(60deg) scale(1.05)}}
@media (prefers-reduced-motion: reduce){.og i{animation:none !important}}
.xbl{background:#ffffff;color:#1d1d1f}
.xbl-hero{padding:118px 0 48px;background:#0a0a0b;color:#f5f4f1}
.xbl-hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.xbl-eyebrow{font-size:15px;font-weight:600;color:#ff9a62}
.xbl-h1{margin:0;font-size:clamp(40px,4.8vw,64px);line-height:1;letter-spacing:-0.045em;font-weight:600}
.xbl-sub{margin:0;max-width:560px;font-size:18px;line-height:1.5;color:#a1a1a6}
.xbl-body{padding:64px 0 110px;overflow-x:clip}
.xbl-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:72px;align-items:start}
.xbl-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:14px}
.xbl-side-k{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#86868b}
.xbl-catl{display:flex;flex-direction:column}
.xbl-catl a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0 9px 16px;color:#6e6e73;font-size:15.5px;text-decoration:none;transition:color .2s}
.xbl-catl a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:transparent;transition:background .2s,transform .2s}
.xbl-catl small{font-size:13px;color:#aeaeb2}
.xbl-catl a:hover{color:#1d1d1f}
.xbl-catl a.on{color:#1d1d1f;font-weight:600}
.xbl-catl a.on::before{background:#f26322;transform:scale(1.3)}
.xbl-list{list-style:none;margin:0;padding:0;border-top:1px solid #e5e5ea}
.xbl-row a{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:center;padding:30px 0;border-bottom:1px solid #e5e5ea;color:#1d1d1f;text-decoration:none}
.xbl-date{font-size:14px;font-weight:500;color:#c2410c}
.xbl-row-t{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.xbl-row-t b{font-size:clamp(24px,2.2vw,30px);line-height:1.22;letter-spacing:-0.025em;font-weight:600;transition:color .25s}
.xbl-row-x{font-size:16px;line-height:1.55;color:#6e6e73;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xbl-stats{display:flex;flex-wrap:wrap;gap:18px;margin-top:4px;font-size:14px;color:#86868b}
.xbl-stats span{display:inline-flex;align-items:center;gap:6px}
.xbl-stats svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xbl-row-media{position:relative;display:block}
.xbl-row-img{position:relative;z-index:1;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:20px;background:#f5f5f7;transition:transform .7s cubic-bezier(.2,.7,.1,1),box-shadow .7s}
.xbl-blob{position:absolute;inset:-16% -12%;z-index:0;pointer-events:none}
.xbl-blob i{position:absolute;display:block;opacity:0;transform:scale(.4) rotate(-20deg);transition:opacity .45s ease,transform .8s cubic-bezier(.2,.9,.25,1.25)}
.xbl-blob i:nth-child(1){right:0;top:0;width:44%;aspect-ratio:1/1;background:linear-gradient(145deg,#ff9a5c,#f26322 55%,#c2410c);border-radius:42% 58% 63% 37% / 55% 39% 61% 45%}
.xbl-blob i:nth-child(2){left:0;bottom:0;width:42%;aspect-ratio:1/1;border:1.5px solid rgba(242,99,34,.65);border-radius:58% 42% 40% 60% / 45% 60% 40% 55%;transition-delay:.06s}
.xbl-blob i:nth-child(3){right:6%;bottom:4%;width:15%;aspect-ratio:1/1;background:#0a0a0b;border-radius:50% 50% 44% 56% / 52% 46% 54% 48%;transition-delay:.12s}
.xbl-blob.b0 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;right:4%;bottom:-3%;width:35%;background:linear-gradient(145deg,#ff9a5c,#f26322 55%,#c2410c);border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.xbl-blob.b0 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;right:2%;top:0%;width:32%;border:1.5px dashed rgba(242,99,34,0.47);background:none;border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.xbl-blob.b0 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;left:10%;bottom:8%;width:18%;background:linear-gradient(145deg,#ff9a5c,#f26322 55%,#c2410c);border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.motion .xbl-row a:hover .xbl-blob.b0 i:nth-child(1){animation-duration:8.8s;animation-direction:normal}
.motion .xbl-row a:hover .xbl-blob.b0 i:nth-child(2){animation-duration:11.0s;animation-direction:reverse}
.xbl-blob.b1 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;right:5%;top:-2%;width:51%;background:linear-gradient(120deg,#c2410c,#f26322);border-radius:50% 50% 38% 62% / 60% 44% 56% 40%}
.xbl-blob.b1 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;left:-3%;top:3%;width:34%;border:1.5px solid rgba(242,99,34,0.65);background:none;border-radius:63% 37% 54% 46% / 40% 55% 45% 60%}
.xbl-blob.b1 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;right:7%;bottom:3%;width:14%;background:linear-gradient(120deg,#c2410c,#f26322);border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.motion .xbl-row a:hover .xbl-blob.b1 i:nth-child(1){animation-duration:7.3s;animation-direction:normal}
.motion .xbl-row a:hover .xbl-blob.b1 i:nth-child(2){animation-duration:10.5s;animation-direction:reverse}
.xbl-blob.b2 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;right:-1%;bottom:-5%;width:45%;background:linear-gradient(120deg,#c2410c,#f26322);border-radius:36% 64% 48% 52% / 58% 42% 58% 42%}
.xbl-blob.b2 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;left:4%;bottom:1%;width:39%;border:1.5px solid rgba(242,99,34,0.76);background:none;border-radius:46% 54% 32% 68% / 52% 70% 30% 48%}
.xbl-blob.b2 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;left:6%;top:11%;width:13%;background:linear-gradient(145deg,#ff9a5c,#f26322 55%,#c2410c);border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.motion .xbl-row a:hover .xbl-blob.b2 i:nth-child(1){animation-duration:7.0s;animation-direction:normal}
.motion .xbl-row a:hover .xbl-blob.b2 i:nth-child(2){animation-duration:12.3s;animation-direction:normal}
.xbl-blob.b3 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;left:1%;top:5%;width:36%;background:radial-gradient(circle at 30% 30%,#f26322,#9a3412);border-radius:46% 54% 32% 68% / 52% 70% 30% 48%}
.xbl-blob.b3 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;left:5%;bottom:6%;width:47%;border:1.5px solid rgba(242,99,34,0.61);background:none;border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.xbl-blob.b3 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;right:6%;top:9%;width:19%;background:#ffb38a;border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.motion .xbl-row a:hover .xbl-blob.b3 i:nth-child(1){animation-duration:5.2s;animation-direction:reverse}
.motion .xbl-row a:hover .xbl-blob.b3 i:nth-child(2){animation-duration:11.5s;animation-direction:reverse}
.xbl-blob.b4 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;right:3%;bottom:-6%;width:45%;background:linear-gradient(160deg,#ffd2a8,#ff9a5c);border-radius:36% 64% 48% 52% / 58% 42% 58% 42%}
.xbl-blob.b4 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;left:-2%;top:5%;width:30%;border:1.5px dashed rgba(242,99,34,0.54);background:none;border-radius:70% 30% 46% 54% / 30% 50% 50% 70%}
.xbl-blob.b4 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;left:9%;bottom:3%;width:17%;background:linear-gradient(160deg,#ffd2a8,#ff9a5c);border-radius:46% 54% 32% 68% / 52% 70% 30% 48%}
.motion .xbl-row a:hover .xbl-blob.b4 i:nth-child(1){animation-duration:6.6s;animation-direction:reverse}
.motion .xbl-row a:hover .xbl-blob.b4 i:nth-child(2){animation-duration:13.2s;animation-direction:reverse}
.xbl-blob.b5 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;right:-1%;bottom:4%;width:45%;background:linear-gradient(160deg,#ffd2a8,#ff9a5c);border-radius:42% 58% 63% 37% / 55% 39% 61% 45%}
.xbl-blob.b5 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;left:3%;top:3%;width:42%;border:1.5px dashed rgba(242,99,34,0.51);background:none;border-radius:36% 64% 48% 52% / 58% 42% 58% 42%}
.xbl-blob.b5 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;left:2%;bottom:4%;width:13%;background:#3a1a0a;border-radius:55% 45% 70% 30% / 45% 35% 65% 55%}
.motion .xbl-row a:hover .xbl-blob.b5 i:nth-child(1){animation-duration:7.4s;animation-direction:reverse}
.motion .xbl-row a:hover .xbl-blob.b5 i:nth-child(2){animation-duration:13.7s;animation-direction:normal}
.xbl-blob.b6 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;left:-4%;top:-3%;width:46%;background:linear-gradient(145deg,#ff9a5c,#f26322 55%,#c2410c);border-radius:63% 37% 54% 46% / 40% 55% 45% 60%}
.xbl-blob.b6 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;right:3%;bottom:-4%;width:42%;border:1.5px dashed rgba(242,99,34,0.49);background:none;border-radius:42% 58% 63% 37% / 55% 39% 61% 45%}
.xbl-blob.b6 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;left:3%;bottom:2%;width:16%;background:linear-gradient(120deg,#c2410c,#f26322);border-radius:50% 50% 38% 62% / 60% 44% 56% 40%}
.motion .xbl-row a:hover .xbl-blob.b6 i:nth-child(1){animation-duration:7.1s;animation-direction:reverse}
.motion .xbl-row a:hover .xbl-blob.b6 i:nth-child(2){animation-duration:11.3s;animation-direction:normal}
.xbl-blob.b7 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;left:3%;bottom:-5%;width:38%;background:linear-gradient(145deg,#ff9a5c,#f26322 55%,#c2410c);border-radius:46% 54% 32% 68% / 52% 70% 30% 48%}
.xbl-blob.b7 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;right:3%;bottom:1%;width:50%;border:1.5px solid rgba(242,99,34,0.62);background:none;border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.xbl-blob.b7 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;left:4%;top:3%;width:14%;background:#ffb38a;border-radius:55% 45% 70% 30% / 45% 35% 65% 55%}
.motion .xbl-row a:hover .xbl-blob.b7 i:nth-child(1){animation-duration:8.0s;animation-direction:reverse}
.motion .xbl-row a:hover .xbl-blob.b7 i:nth-child(2){animation-duration:12.8s;animation-direction:normal}
.xbl-blob.b8 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;right:6%;top:-5%;width:38%;background:#ffb38a;border-radius:36% 64% 48% 52% / 58% 42% 58% 42%}
.xbl-blob.b8 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;left:4%;top:-1%;width:47%;border:1.5px solid rgba(242,99,34,0.77);background:none;border-radius:55% 45% 70% 30% / 45% 35% 65% 55%}
.xbl-blob.b8 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;left:14%;bottom:5%;width:10%;background:#2a1206;border-radius:63% 37% 54% 46% / 40% 55% 45% 60%}
.motion .xbl-row a:hover .xbl-blob.b8 i:nth-child(1){animation-duration:7.5s;animation-direction:normal}
.motion .xbl-row a:hover .xbl-blob.b8 i:nth-child(2){animation-duration:12.6s;animation-direction:reverse}
.xbl-blob.b9 i:nth-child(1){right:auto;left:auto;top:auto;bottom:auto;left:-1%;bottom:5%;width:45%;background:linear-gradient(120deg,#c2410c,#f26322);border-radius:55% 45% 70% 30% / 45% 35% 65% 55%}
.xbl-blob.b9 i:nth-child(2){right:auto;left:auto;top:auto;bottom:auto;right:3%;top:6%;width:30%;border:1.5px solid rgba(242,99,34,0.78);background:none;border-radius:55% 45% 70% 30% / 45% 35% 65% 55%}
.xbl-blob.b9 i:nth-child(3){right:auto;left:auto;top:auto;bottom:auto;left:7%;top:3%;width:10%;background:#1d1d1f;border-radius:58% 42% 40% 60% / 45% 60% 40% 55%}
.motion .xbl-row a:hover .xbl-blob.b9 i:nth-child(1){animation-duration:5.9s;animation-direction:normal}
.motion .xbl-row a:hover .xbl-blob.b9 i:nth-child(2){animation-duration:9.4s;animation-direction:reverse}
.xbl-row a:hover .xbl-blob i{opacity:1;transform:none}
.motion .xbl-row a:hover .xbl-blob i:nth-child(1){animation:xblMorph 6s ease-in-out infinite}
.motion .xbl-row a:hover .xbl-blob i:nth-child(2){animation:xblSpin 9s linear infinite}
.motion .xbl-row a:hover .xbl-blob i:nth-child(3){animation:xblBob 4s ease-in-out infinite}
@keyframes xblMorph{0%,100%{border-radius:42% 58% 63% 37% / 55% 39% 61% 45%;rotate:0deg}50%{border-radius:60% 40% 35% 65% / 40% 62% 38% 60%;rotate:40deg}}
@keyframes xblSpin{to{rotate:360deg}}
@keyframes xblBob{0%,100%{translate:0 0}50%{translate:-8px -10px}}
.xbl-row a:hover .xbl-row-img{transform:rotate(-1.5deg) scale(1.01);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.xbl-row-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.1,1)}
.xbl-row a:hover b{color:#c2410c}
.xbl-row a:hover .xbl-row-img img{transform:scale(1.06)}
.xbl-row a{padding:40px 0}

.motion .xbl-row{animation:xbIn .8s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(var(--i) * 50ms)}
.xbl-pag{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding-left:292px}
.xbl-pg-n{display:flex;align-items:center;gap:4px}
.xbl-pg-n a{display:grid;place-items:center;min-width:40px;height:40px;padding:0 6px;border-radius:999px;color:#515154;font-size:15px;font-weight:500;text-decoration:none;transition:background .25s,color .25s}
.xbl-pg-n a:hover{background:#f5f5f7;color:#1d1d1f}
.xbl-pg-n a.on{background:#0a0a0b;color:#f5f4f1;font-weight:600}
.xbl-pg-n a.gap{pointer-events:none;min-width:24px;color:#aeaeb2}
.xbl-pg-arrow{font-size:15px;font-weight:600;color:#c2410c;text-decoration:none}
.xbl-pg-arrow.off{color:#c7c7cc}
a.xbl-pg-arrow:hover{text-decoration:underline}
@media (max-width: 900px){
  .xbl-hero{padding:96px 0 34px}
  .xbl-body{padding:30px 0 70px}
  .xbl-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .xbl-side{position:static}
  .xbl-side-k{display:none}
  .xbl-catl{flex-direction:row;gap:18px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;border-bottom:1px solid #e5e5ea}
  .xbl-catl a{flex:none;padding:8px 0 10px}
  .xbl-catl a::before{left:50%;top:auto;bottom:-1px;width:100%;height:2px;margin:0;border-radius:0;transform:translateX(-50%)}
  .xbl-catl a.on::before{transform:translateX(-50%)}
  .xbl-catl small{display:none}
  .xbl-list{border-top:0}
  .xbl-row a{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 0}
  .xbl-row-media{order:-1}
  .xbl-blob{display:none}
  .xbl-pag{padding-left:24px}
  .xbl-pg-n a:not(.on):not(.first):not(.last):not(.gap){display:none}
  .xbl-stats{gap:14px;font-size:13px}
  .xbl-row-t b{font-size:21px}
  .xbl-row-x,.xbl-stats{display:flex;flex-wrap:wrap;gap:18px;margin-top:4px;font-size:14px;color:#86868b}
.xbl-stats span{display:inline-flex;align-items:center;gap:6px}
.xbl-stats svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}
.xa-rel{padding:60px 0 120px;background:#f5f5f7}
.xa-rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width: 1000px){
  .xa-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){.xa-rel-grid{grid-template-columns:minmax(0,1fr)}}
@keyframes count{from{--n:0}to{--n:var(--to)}}