.ds-frame-canvas{--ds-frame-line:var(--ds-color-border-subtle);--ds-frame-width:min(100% - 2 * var(--ds-gutter), var(--ds-container) - 2 * var(--ds-gutter))}.ds-frame-canvas[data-canvas=plain]{background:var(--ds-color-bg-subtle)}.ds-frame-canvas[data-canvas=grid]{--ds-frame-grid:color-mix(in oklab, var(--ds-color-border-subtle) 55%, transparent);background-color:var(--ds-color-bg-subtle);background-image:linear-gradient(to right, var(--ds-frame-grid) var(--ds-hairline), transparent var(--ds-hairline)), linear-gradient(to bottom, var(--ds-frame-grid) var(--ds-hairline), transparent var(--ds-hairline));background-size:var(--ds-space-6) var(--ds-space-6);background-position:top}.ds-frame-canvas[data-canvas=drafting]{--ds-frame-module:calc(var(--ds-space-24) + var(--ds-space-4));--ds-frame-drafting-line:light-dark(color-mix(in oklab, var(--ds-color-graphic) 35%, transparent),color-mix(in oklab, var(--ds-color-graphic) 20%, transparent));--ds-frame-drafting-grain:light-dark(color-mix(in oklab, var(--ds-color-graphic) 4.5%, transparent),color-mix(in oklab, var(--ds-color-graphic) 2%, transparent));--ds-frame-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Cpath d='M0 0h112v.5H0zM0 0h.5v7H0zM0 14h.5v7H0zM0 28h.5v7H0zM0 42h.5v7H0zM0 56h.5v7H0zM0 70h.5v7H0zM0 84h.5v7H0zM0 98h.5v7H0z'/%3E%3C/svg%3E");--ds-frame-grid-mirror:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Cpath d='M0 0h112v.5H0zM111.5 0h.5v7h-.5zM111.5 14h.5v7h-.5zM111.5 28h.5v7h-.5zM111.5 42h.5v7h-.5zM111.5 56h.5v7h-.5zM111.5 70h.5v7h-.5zM111.5 84h.5v7h-.5zM111.5 98h.5v7h-.5z'/%3E%3C/svg%3E");--ds-frame-ruler-start:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='112'%3E%3Cpath d='M2 7h11v.5H2zM2 14h11v.5H2zM2 21h11v.5H2zM2 28h16v.5H2zM2 35h11v.5H2zM2 42h11v.5H2zM2 49h11v.5H2zM2 56h21v.5H2zM2 63h11v.5H2zM2 70h11v.5H2zM2 77h11v.5H2zM2 84h16v.5H2zM2 91h11v.5H2zM2 98h11v.5H2zM2 105h11v.5H2z'/%3E%3C/svg%3E");--ds-frame-ruler-end:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='112'%3E%3Cpath d='M11 7h11v.5H11zM11 14h11v.5H11zM11 21h11v.5H11zM6 28h16v.5H6zM11 35h11v.5H11zM11 42h11v.5H11zM11 49h11v.5H11zM1 56h21v.5H1zM11 63h11v.5H11zM11 70h11v.5H11zM11 77h11v.5H11zM6 84h16v.5H6zM11 91h11v.5H11zM11 98h11v.5H11zM11 105h11v.5H11z'/%3E%3C/svg%3E");--ds-frame-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5 .25' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");isolation:isolate;background-color:var(--ds-color-bg-subtle);box-shadow:inset 0 calc(-1 * var(--ds-hairline)) 0 color-mix(in oklab, var(--ds-frame-drafting-line) 50%, transparent);position:relative}.ds-frame-canvas[data-canvas=drafting][data-strength=subtle]{--ds-frame-drafting-line:light-dark(color-mix(in oklab, var(--ds-color-graphic) 16%, transparent),color-mix(in oklab, var(--ds-color-graphic) 9%, transparent));--ds-frame-drafting-grain:light-dark(color-mix(in oklab, var(--ds-color-graphic) 2.5%, transparent),color-mix(in oklab, var(--ds-color-graphic) 1%, transparent));background-color:var(--ds-color-bg)}.ds-frame-canvas[data-canvas=drafting]:after{content:"";z-index:-1;pointer-events:none;background-color:var(--ds-frame-drafting-grain);mask-image:var(--ds-frame-grain);position:absolute;inset:0}.ds-frame-canvas__margin{z-index:-1;width:calc((100% - var(--ds-frame-width)) / 2 + var(--ds-hairline));pointer-events:none;background-color:var(--ds-frame-drafting-line);mask-size:var(--ds-frame-module) var(--ds-frame-module);position:absolute;inset-block:0}.ds-frame-canvas__margin[data-side=left]{mask-image:var(--ds-frame-grid-mirror);left:0;mask-position:100% 0}.ds-frame-canvas__margin[data-side=right]{mask-image:var(--ds-frame-grid);right:0;mask-position:0 0}@media (min-width:1024px){.ds-frame-canvas__margin{mask-size:var(--ds-space-6) var(--ds-frame-module), var(--ds-frame-module) var(--ds-frame-module);mask-repeat:repeat-y,repeat}.ds-frame-canvas__margin[data-side=left]{mask-image:var(--ds-frame-ruler-start), var(--ds-frame-grid-mirror);mask-position:0 0,100% 0}.ds-frame-canvas__margin[data-side=right]{mask-image:var(--ds-frame-ruler-end), var(--ds-frame-grid);mask-position:100% 0,0 0}}.ds-frame{--ds-frame-vertex:var(--ds-space-3);box-sizing:border-box;width:var(--ds-frame-width);border-inline:var(--ds-hairline) solid var(--ds-frame-line);border-bottom:var(--ds-hairline) solid var(--ds-frame-line);background:var(--ds-color-bg);margin-inline:auto;display:block;position:relative}.ds-frame__row{border-top:var(--ds-hairline) solid var(--ds-frame-line);position:relative}.ds-frame[data-vertices=true]>.ds-frame__row:before,.ds-frame[data-vertices=true]>.ds-frame__row:after,.ds-frame[data-vertices=true]:before,.ds-frame[data-vertices=true]:after{content:"";z-index:2;width:var(--ds-frame-vertex);height:var(--ds-frame-vertex);box-sizing:border-box;border:var(--ds-hairline) solid var(--ds-frame-line);background:var(--ds-color-bg);pointer-events:none;position:absolute}.ds-frame>.ds-frame__row:before{top:calc(var(--ds-hairline) / 2 - var(--ds-frame-vertex) / 2);left:calc(var(--ds-hairline) / -2 - var(--ds-frame-vertex) / 2)}.ds-frame>.ds-frame__row:after{top:calc(var(--ds-hairline) / 2 - var(--ds-frame-vertex) / 2);right:calc(var(--ds-hairline) / -2 - var(--ds-frame-vertex) / 2)}.ds-frame:before{bottom:calc(var(--ds-hairline) / -2 - var(--ds-frame-vertex) / 2);left:calc(var(--ds-hairline) / -2 - var(--ds-frame-vertex) / 2)}.ds-frame:after{bottom:calc(var(--ds-hairline) / -2 - var(--ds-frame-vertex) / 2);right:calc(var(--ds-hairline) / -2 - var(--ds-frame-vertex) / 2)}@media (max-width:639px){.ds-frame{border-inline:0;width:100%}.ds-frame-canvas__margin,.ds-frame-canvas[data-canvas=drafting]:after,.ds-frame[data-vertices=true]>.ds-frame__row:before,.ds-frame[data-vertices=true]>.ds-frame__row:after,.ds-frame[data-vertices=true]:before,.ds-frame[data-vertices=true]:after{display:none}}