*{box-sizing:border-box}html,body{color:#252525;background:#fff;width:100%;min-height:100%;margin:0}.artwork{background:#fff;grid-template-rows:minmax(0,1fr);grid-template-columns:45% 55%;width:100%;height:100dvh;min-height:100svh;display:grid;overflow:hidden}.values{grid-area:1/1;align-self:center;min-width:0;padding:24px 0 24px 40px}code{letter-spacing:-.025em;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:clamp(10px,1vw,14px);font-weight:400;line-height:1.9}code>span{white-space:nowrap;display:block}code em{color:#858585;font-style:italic}code small{font-size:inherit;color:#929292}.string{color:#545454}.mobile-code{display:none}.crab-field{grid-area:1/2;min-width:0;min-height:0;position:relative}.crab-canvas{width:100%;height:100%;display:block}@media (width<=767px){.artwork{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.values{padding:max(18px, env(safe-area-inset-top)) 14px 0;grid-area:1/1;align-self:start}.desktop-code{display:none}.mobile-code{font-size:clamp(8px,2.35vw,11px);line-height:1.8;display:block}.crab-field{grid-area:1/1/-1;height:100%}.values{z-index:1;pointer-events:none}}.desktop-code>span:last-child{font-size:.85em}.crab-first-frame{pointer-events:none;width:min(512px,100% - 32px);height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-66.667%)}