.dev-grid-overlay{--dev-grid-unit:var(--layout-grid-unit);--dev-grid-major-unit:var(--layout-grid-block);--dev-grid-minor-color:color-mix(in oklch, var(--accent) 12%, transparent);--dev-grid-major-color:color-mix(in oklch, var(--accent) 34%, transparent);--dev-grid-active-color:color-mix(in oklch, var(--accent-strong) 82%, transparent);--dev-grid-margin-color:color-mix(in oklch, var(--accent) 12%, transparent);--dev-grid-margin-edge-color:color-mix(in oklch, var(--accent-strong) 72%, transparent);--dev-grid-margin-inline:var(--layout-hero-inset);--dev-grid-margin-top:var(--layout-hero-inset-top);--dev-grid-margin-bottom:var(--layout-hero-inset);--dev-grid-x:0px;--dev-grid-y:0px;z-index:1200;visibility:hidden;pointer-events:none;opacity:0;position:fixed;inset:0;overflow:hidden}.dev-grid-origin{background-image:linear-gradient(to right, var(--dev-grid-major-color) 1px, transparent 1px), linear-gradient(to bottom, var(--dev-grid-major-color) 1px, transparent 1px), linear-gradient(to right, var(--dev-grid-minor-color) 1px, transparent 1px), linear-gradient(to bottom, var(--dev-grid-minor-color) 1px, transparent 1px);background-size:var(--dev-grid-major-unit) var(--dev-grid-major-unit), var(--dev-grid-major-unit) var(--dev-grid-major-unit), var(--dev-grid-unit) var(--dev-grid-unit), var(--dev-grid-unit) var(--dev-grid-unit);background-position:0 0;height:50%;position:absolute;left:0;right:0}.dev-grid-origin-top{top:0}.dev-grid-layer{display:none}.dev-grid-origin-bottom{background-position:0 100%;bottom:0}.dev-grid-margin-guide{z-index:1;inset:var(--dev-grid-margin-top) var(--dev-grid-margin-inline) var(--dev-grid-margin-bottom);border:1px solid var(--dev-grid-margin-edge-color);box-shadow:0 0 0 100vmax var(--dev-grid-margin-color);position:absolute}.dev-grid-margin-label{color:var(--accent-strong);background:color-mix(in oklch, var(--background) 88%, transparent);font-family:var(--font-body);font-size:var(--text-label);font-weight:var(--weight-label);text-transform:uppercase;padding:.125rem .375rem .1875rem;line-height:1;position:absolute;top:0;left:0;transform:translateY(-100%)}.dev-grid-axis{z-index:3;color:color-mix(in oklch, var(--accent-strong) 88%, transparent);font-family:var(--font-body);font-size:.625rem;font-weight:var(--weight-label);letter-spacing:.08em;text-transform:uppercase;line-height:1;display:grid;position:absolute}.dev-grid-axis span{display:grid}.dev-grid-axis-x{grid-auto-columns:var(--dev-grid-major-unit);grid-auto-flow:column;grid-template-rows:var(--dev-grid-major-unit);top:0;left:0}.dev-grid-axis-x span{place-items:start center;padding-top:.375rem}.dev-grid-axis-y{grid-auto-rows:var(--dev-grid-major-unit);grid-template-columns:var(--dev-grid-major-unit);top:0;left:0}.dev-grid-axis-y span{place-items:center start;padding-left:.375rem}.dev-grid-overlay:before,.dev-grid-overlay:after{z-index:2;content:"";background:var(--dev-grid-active-color);opacity:0;position:absolute}.dev-grid-overlay:before{top:0;bottom:0;left:var(--dev-grid-x);width:1px}.dev-grid-overlay:after{top:var(--dev-grid-y);height:1px;left:0;right:0}.dev-grid-overlay[data-visible=true]{visibility:visible;opacity:1}.dev-grid-overlay[data-visible=true][data-pointer-active=true]:before,.dev-grid-overlay[data-visible=true][data-pointer-active=true]:after{opacity:1}@media print{.dev-grid-overlay{display:none}}.dev-grid-overlay[data-game=true]{--dev-grid-unit:4px;--dev-grid-major-unit:32px}.dev-grid-overlay[data-game=true] .dev-grid-origin-top{height:100%}.dev-grid-overlay[data-game=true] .dev-grid-origin-bottom,.dev-grid-overlay[data-game=true] .dev-grid-margin-guide{display:none}