.cg-page :is(h1,h2,h3){line-height:1}.cg-page code{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.9em}.cg-hero{margin-top:0;padding-top:clamp(6.5rem, 5rem + 5vw, 11rem)}.cg-crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin-bottom:clamp(1.25rem, 1rem + 1.25vw, 2.5rem);color:rgb(13 17 9 / .62);font-size:.9375rem}.cg-crumbs li+li::before{content:"/";margin-right:.5rem;color:rgb(13 17 9 / .3)}.cg-crumbs a{text-decoration:underline;text-decoration-color:#fff0;text-underline-offset:.2em;transition:text-decoration-color 0.2s ease,color 0.2s ease}.cg-crumbs a:hover{color:var(--color-black);text-decoration-color:currentColor}.cg-crumbs a:focus-visible{outline:2px solid var(--color-blue);outline-offset:2px;border-radius:4px}.cg-crumbs [aria-current]{color:var(--color-black);font-weight:500}.cg-heading{display:flex;flex-direction:column;gap:clamp(0.625rem, 0.375rem + 1.25vw, 1.5rem);max-width:60rem}.cg-title{font-size:clamp(2.75rem, 1.9rem + 4.25vw, 7rem);font-weight:500;letter-spacing:-.02em}.cg-accent{padding-inline:.04em;background-image:linear-gradient(var(--color-green),var(--color-green));background-repeat:no-repeat;background-position:0 88%;background-size:100% .26em}.cg-subtitle{max-width:46rem;margin-inline:0;font-size:clamp(1.125rem, 1rem + 0.5vw, 1.5rem);line-height:1.45;text-wrap:pretty}.cg-tags{margin-top:clamp(1.25rem, 1rem + 1.25vw, 2rem)}.cg-tool{margin-top:clamp(2rem, 1.5rem + 2.5vw, 4rem)}.cg-app{padding:clamp(1rem, 0.75rem + 1.25vw, 2.25rem);border-radius:var(--border-18);background-color:var(--color-white);box-shadow:var(--shadow-main)}.cg-app__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(1rem, 0.8rem + 1vw, 1.75rem)}.cg-app__title{font-size:clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);font-weight:500}.cg-settings{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}.cg-setting{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;font-weight:500}.cg-setting--range{gap:.875rem}.cg-setting--range .cg-setting__label{min-width:8.75rem;white-space:nowrap}.cg-setting--range .cg-range{width:clamp(9rem, 6rem + 8vw, 14rem)}.cg-setting output{font-variant-numeric:tabular-nums}.cg-range{width:100%;height:1.5rem;background:#fff0;cursor:pointer;appearance:none;-webkit-appearance:none}.cg-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgb(13 17 9 / .12)}.cg-range::-moz-range-track{height:4px;border-radius:4px;background:rgb(13 17 9 / .12)}.cg-range::-webkit-slider-thumb{width:1.25rem;height:1.25rem;margin-top:-.5rem;border:2px solid var(--color-black);border-radius:50%;background:var(--color-green);-webkit-appearance:none;transition:scale 0.2s var(--ease-out-soft)}.cg-range::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-black);border-radius:50%;background:var(--color-green)}.cg-range:active::-webkit-slider-thumb{scale:1.2}.cg-range:focus-visible{outline:2px solid var(--color-blue);outline-offset:4px;border-radius:4px}.cg-input{position:relative;display:flex;align-items:center}.cg-input input{width:100%;padding:.8125rem 2.5rem .8125rem 1rem;border:1px solid rgb(13 17 9 / .16);border-radius:var(--border-18) var(--border-12);background-color:rgb(13 17 9 / .03);font-size:1.0625rem;font-variant-numeric:tabular-nums;transition:border-color 0.2s ease,box-shadow 0.2s ease,border-radius 0.6s var(--ease-brand);-moz-appearance:textfield}.cg-input input::-webkit-inner-spin-button,.cg-input input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.cg-input input:hover{border-color:rgb(13 17 9 / .4)}.cg-input input:focus-visible{outline:none;border-color:var(--color-blue);border-radius:var(--border-12) var(--border-18);box-shadow:0 0 0 3px rgb(43 92 255 / .2)}.cg-input input[aria-invalid]{border-color:#D92D20}.cg-input--sm input{width:5.5rem;padding-block:.5rem}.cg-unit{position:absolute;right:1rem;color:rgb(13 17 9 / .64);font-size:.875rem;pointer-events:none}.cg-rows{display:grid;gap:.75rem;counter-reset:none}.cg-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(7rem, 5rem + 6vw, 11rem);grid-template-areas:"fields preview" "result preview";gap:.75rem clamp(0.75rem, 0.5rem + 1vw, 1.5rem);padding:clamp(1rem, 0.8rem + 1vw, 1.5rem);border-radius:var(--border-18);background-color:var(--color-gray)}@media (prefers-reduced-motion:no-preference){.cg-row{animation:cg-in 0.5s var(--ease-out-soft) both}}@keyframes cg-in{from{opacity:0;translate:0 12px}}.cg-fields{grid-area:fields;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;min-width:0;border:0}.cg-row__name{float:left;grid-column:1 / -1;width:100%;margin-bottom:.25rem;font-size:.875rem;font-weight:600;letter-spacing:.02em}.cg-field{display:flex;flex-direction:column;justify-content:space-between;gap:.375rem;min-width:0}.cg-field__label{color:rgb(13 17 9 / .7);font-size:.875rem;font-weight:500}.cg-result{grid-area:result;display:flex;align-items:stretch;gap:.5rem;min-width:0}.cg-code{display:flex;align-items:center;flex:1;min-width:0;padding:.8125rem 1rem;border-radius:var(--border-12) var(--border-18);background-color:var(--color-black);color:var(--color-green);font:500 clamp(0.875rem, 0.825rem + 0.25vw, 1.0625rem)/1.4 ui-monospace,"SFMono-Regular",Menlo,monospace;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.cg-row.is-invalid .cg-code{color:#FF8A80;font-family:inherit;white-space:normal}.cg-copy{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:6.5rem;padding:.625rem 1rem;border-radius:var(--border-18) var(--border-12);background-color:var(--color-white);box-shadow:inset 0 0 0 1px rgb(13 17 9 / .12);font-size:.9375rem;font-weight:500;transition:background-color 0.3s var(--ease-brand),border-radius 0.6s var(--ease-brand)}.cg-copy::before{content:"";width:1.125rem;height:1.125rem;background-color:currentColor;-webkit-mask:var(--cg-icon-copy) center / contain no-repeat;mask:var(--cg-icon-copy) center / contain no-repeat}.cg-copy:hover{border-radius:var(--border-12) var(--border-18)}.cg-copy.is-copied{background-color:var(--color-green)}.cg-copy.is-copied::before{-webkit-mask-image:var(--cg-icon-check);mask-image:var(--cg-icon-check)}.cg-copy:focus-visible,.cg-remove:focus-visible{outline:2px solid var(--color-blue);outline-offset:2px}.cg-page{--cg-icon-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");--cg-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}.cg-preview{grid-area:preview;position:relative;margin-top:1.75rem;display:grid;place-items:center;min-height:7rem;border-radius:var(--border-12);background-color:var(--color-white);overflow:hidden}.cg-preview__sample{font-weight:500;line-height:1;transition:font-size 0.25s var(--ease-out-soft)}.cg-preview__px{position:absolute;right:.625rem;bottom:.5rem;color:rgb(13 17 9 / .62);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}.cg-row.is-invalid .cg-preview{opacity:.4}.cg-remove{position:absolute;top:clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);right:clamp(1rem, 0.8rem + 1vw, 1.5rem);padding:.125rem .25rem;color:rgb(13 17 9 / .62);font-size:.875rem;font-weight:500;text-decoration:underline;text-decoration-color:#fff0;text-underline-offset:.2em;transition:color 0.2s ease,text-decoration-color 0.2s ease}.cg-remove:hover{color:#D92D20;text-decoration-color:currentColor}.cg-remove[hidden]{display:none}.cg-row:has(.cg-remove:not([hidden])) .cg-row__name{padding-right:5rem}.cg-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1rem, 0.8rem + 1vw, 1.75rem)}.cg-codeblock{margin-top:clamp(1.5rem, 1rem + 2.5vw, 3rem);border-radius:var(--border-18);background-color:var(--color-black);color:#E8EDE4;overflow:hidden}.cg-codeblock__bar{display:flex;align-items:center;justify-content:space-between;padding:.625rem .75rem .625rem 1.25rem;border-bottom:1px solid rgb(255 255 255 / .1);color:rgb(255 255 255 / .62);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.cg-copy--bar{min-width:0;padding:.375rem .875rem;background-color:rgb(255 255 255 / .1);box-shadow:none;color:var(--color-white);font-size:.875rem}.cg-copy--bar.is-copied{color:var(--color-black)}.cg-codeblock__pre{margin:0;padding:clamp(1rem, 0.8rem + 1vw, 1.75rem) clamp(1rem, 0.8rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.25vw, 2rem);font:400 clamp(0.8125rem, 0.775rem + 0.1875vw, 0.9375rem)/1.7 ui-monospace,"SFMono-Regular",Menlo,monospace;overflow-x:auto;tab-size:2}.cg-codeblock__pre:focus-visible{outline:2px solid var(--color-green);outline-offset:-4px}.cg-c{color:rgb(232 237 228 / .5)}.cg-a{color:#B69CFF}.cg-s{color:var(--color-green)}.cg-p{color:#7FB0FF}.cg-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem, 0.95rem + 0.25vw, 1.25rem);margin-top:clamp(2rem, 1.5rem + 2.5vw, 4rem)}.cg-step{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.25rem, 1rem + 1.25vw, 2.5rem);border-radius:var(--border-18);background-color:var(--color-white);box-shadow:var(--shadow-main)}.cg-step__num{color:var(--color-blue);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums}.cg-step code{display:block;padding:.625rem .75rem;border-radius:var(--border-12);background-color:var(--color-gray);font-size:.875rem;line-height:1.5;overflow-wrap:anywhere}.cg-step p:last-child{color:rgb(13 17 9 / .75)}.cta-banner{margin-top:clamp(1rem, 0.825rem + 0.875vw, 1.875rem)}.btn:focus-visible{outline:2px solid var(--color-blue);outline-offset:3px}@keyframes cg-underline{from{background-size:0% .26em}}@keyframes cg-rise{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}@media (prefers-reduced-motion:no-preference){.cg-accent{animation:cg-underline 1.1s var(--ease-brand) 0.4s both}@supports (animation-timeline:view()){.cg-steps>.cg-step,.cg-page .header-group,.cg-page .cta-banner,.cg-codeblock{animation:cg-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}}}@media (prefers-reduced-motion:reduce){.cg-preview__sample,.cg-input input,.cg-copy{transition:none}}@media (max-width:1105px){.cg-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:991px){.cg-steps{grid-template-columns:1fr}}@media (max-width:767px){.cg-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"fields" "preview" "result"}.cg-preview{min-height:5.5rem;margin-top:0}.cg-result{flex-direction:column}.cg-code{white-space:normal;overflow-wrap:anywhere}.cg-setting--range{flex:1 1 100%}.cg-setting--range .cg-range{flex:1;width:auto}}@media (max-width:359px){.cg-fields{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}header{view-transition-name:site-header}::view-transition-old(root){animation:vt-out 0.24s cubic-bezier(.4,0,1,1) both}::view-transition-new(root){animation:vt-in 0.42s cubic-bezier(.16,1,.3,1) 0.06s both}}@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}header:not(:has(>.nav)){view-transition-name:none}