@layer utils;@layer partials{.block-codeblock{position:relative;width:calc(100% + var(--g-padding-inline) * 2);margin-inline:calc(var(--g-padding-inline) * -1);margin-block:4rem;background-color:var(--g-color-gray-800);border-radius:var(--g-border-radius-default);overflow:hidden}@media(min-width:768px){.block-codeblock{margin-block:6.4rem}}@media(min-width:1024px){.block-codeblock{width:calc(100% + 12.8rem);margin-inline:-6.4rem}}.block-codeblock *{font-family:var(--g-font-tertiary)}.block-codeblock__nav{padding:1.2rem 1.6rem}.block-codeblock__nav-list{display:flex;align-items:center;gap:.4rem;margin:0;padding:0;list-style-type:none}.block-codeblock__nav-button{padding:.8rem;color:var(--g-color-gray-200);font-size:1.2rem;background-color:unset;border-radius:var(--g-border-radius-small)}.block-codeblock__nav-button.-active{color:var(--g-color-white);background-color:var(--g-color-gray-600)}@media(hover:hover)and (pointer:fine){.block-codeblock__nav-button.-active:hover{color:var(--g-color-white)}}@media(hover:hover)and (pointer:fine){.block-codeblock__nav-button:hover{color:var(--g-color-gray-100)}}.block-codeblock__content{padding:0 .4rem .4rem}.block-codeblock__panel{max-height:44rem;padding:2rem 1.6rem;background-color:var(--g-color-gray-700);border-radius:2rem;overflow:auto}.block-codeblock__panel .shiki{background-color:unset!important}.block-codeblock__panel pre{margin:0}.block-codeblock__panel code{font-size:1.3rem;line-height:1.5;counter-increment:step 0;counter-reset:step}.block-codeblock__panel code .line{position:relative;padding-left:3.2rem}.block-codeblock__panel code .line:before{content:counter(step);position:absolute;top:.1rem;left:0;color:var(--g-color-gray-500);line-height:1;counter-increment:step}}