[data-surface=paper]{--surface-img:var(--grain);--surface-size:auto}[data-surface=night]{--surface-img:var(--glow),var(--night-board);--surface-size:auto,cover;background-image:var(--surface-img);background-size:var(--surface-size);background-position:50%}[data-surface][data-edge]{isolation:isolate;background:0 0;position:relative}[data-surface][data-edge]:after{content:"";z-index:-1;pointer-events:none;background-color:var(--bg);background-image:var(--surface-img);background-size:var(--surface-size);background-position:50%;position:absolute;inset:0}[data-edge=bottom]:after{-webkit-mask:var(--mask-fill) top/100% calc(100% - var(--torn) + 1px) no-repeat,var(--torn-bottom) bottom/100% var(--torn) no-repeat;-webkit-mask:var(--mask-fill) top/100% calc(100% - var(--torn) + 1px) no-repeat,var(--torn-bottom) bottom/100% var(--torn) no-repeat;mask:var(--mask-fill) top/100% calc(100% - var(--torn) + 1px) no-repeat,var(--torn-bottom) bottom/100% var(--torn) no-repeat}[data-edge=top]:after{-webkit-mask:var(--torn-top) top/100% var(--torn) no-repeat,var(--mask-fill) bottom/100% calc(100% - var(--torn) + 1px) no-repeat;-webkit-mask:var(--torn-top) top/100% var(--torn) no-repeat,var(--mask-fill) bottom/100% calc(100% - var(--torn) + 1px) no-repeat;mask:var(--torn-top) top/100% var(--torn) no-repeat,var(--mask-fill) bottom/100% calc(100% - var(--torn) + 1px) no-repeat}[data-edge=top\ bottom]:after{-webkit-mask:var(--torn-top) top/100% var(--torn) no-repeat,var(--mask-fill) center/100% calc(100% - var(--torn) * 2 + 2px) no-repeat,var(--torn-bottom) bottom/100% var(--torn) no-repeat;-webkit-mask:var(--torn-top) top/100% var(--torn) no-repeat,var(--mask-fill) center/100% calc(100% - var(--torn) * 2 + 2px) no-repeat,var(--torn-bottom) bottom/100% var(--torn) no-repeat;mask:var(--torn-top) top/100% var(--torn) no-repeat,var(--mask-fill) center/100% calc(100% - var(--torn) * 2 + 2px) no-repeat,var(--torn-bottom) bottom/100% var(--torn) no-repeat}[data-edge=start]:after{-webkit-mask:var(--mask-fill) left/calc(100% - var(--torn) + 1px) 100% no-repeat,var(--torn-side) right/var(--torn) 100% no-repeat;-webkit-mask:var(--mask-fill) left/calc(100% - var(--torn) + 1px) 100% no-repeat,var(--torn-side) right/var(--torn) 100% no-repeat;mask:var(--mask-fill) left/calc(100% - var(--torn) + 1px) 100% no-repeat,var(--torn-side) right/var(--torn) 100% no-repeat}.dawn{z-index:1;height:calc(var(--torn) + var(--dawn-h));margin-top:calc(var(--torn) * -1);background:var(--dawn);-webkit-mask:var(--mask-fill) top/100% calc(100% - var(--torn) + 1px) no-repeat,var(--torn-bottom) bottom/100% var(--torn) no-repeat;-webkit-mask:var(--mask-fill) top/100% calc(100% - var(--torn) + 1px) no-repeat,var(--torn-bottom) bottom/100% var(--torn) no-repeat;mask:var(--mask-fill) top/100% calc(100% - var(--torn) + 1px) no-repeat,var(--torn-bottom) bottom/100% var(--torn) no-repeat;position:relative}.sfc-demo{padding:calc(var(--s6) + var(--torn)) var(--s6);font:var(--t-small);color:var(--ink2)}