.preview-surface{--preview-surface-hatch-spacing:9px;--preview-surface-hatch-strength:.14;--preview-surface-hatch-peak-ratio:1.55;--preview-surface-hatch-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M-1 9L9 -1' stroke='currentColor' stroke-width='1' fill='none'/%3E%3C/svg%3E");--preview-surface-border-mix:42%;--preview-surface-border:color-mix(in oklch, var(--do-warning) var(--preview-surface-border-mix), var(--do-border));position:relative}:root[data-mantine-color-scheme=light] .preview-surface{--preview-surface-hatch-strength:.05;--preview-surface-border:color-mix(in oklch, var(--do-warning-on-soft) 36%, var(--do-warning))}:root[data-mantine-color-scheme=dark] .preview-surface{--preview-surface-hatch-color:var(--do-foreground-muted);--preview-surface-hatch-strength:.08;--preview-surface-hatch-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M-1 9L9 -1' stroke='%23fff' stroke-width='1' fill='none'/%3E%3C/svg%3E");--preview-surface-border:color-mix(in oklch, var(--do-warning) 20%, var(--do-border-strong))}.preview-surface--section,.preview-surface--stack{border-radius:var(--radius-xl);border:1px dashed var(--preview-surface-border);flex-direction:column;gap:1rem;padding:1rem;display:flex;overflow:hidden}.preview-surface--stack{contain:layout}.preview-surface__stack-toolbar{z-index:2;justify-content:flex-end;display:flex;position:relative}.preview-surface__stack-body{z-index:2;position:relative}.preview-surface__stack-content{flex-direction:column;gap:2rem;display:flex}.preview-surface--stack .preview-surface__hatch{inset:0}.preview-surface--card{height:100%}.preview-surface__header{z-index:2;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem 1rem;display:flex;position:relative}.preview-surface__heading{flex:16rem;min-width:0}.preview-surface__body{z-index:2;position:relative}.preview-surface__content{position:relative}.preview-surface__badge{border:1px solid color-mix(in oklch, var(--do-warning) 24%, var(--do-border));background:color-mix(in oklch, var(--do-warning-soft) 18%, transparent);color:color-mix(in oklch, var(--do-warning-on-soft) 62%, var(--do-foreground-muted));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:default;gap:.3125rem;padding:.25rem .5625rem}.preview-surface__hatch{pointer-events:none;z-index:0;border-radius:inherit;color:var(--do-foreground-muted);contain:paint;position:absolute}.preview-surface__hatch:before,.preview-surface__hatch:after{content:"";border-radius:inherit;color:var(--preview-surface-hatch-color,var(--do-foreground-muted));background-image:var(--preview-surface-hatch-image);background-size:var(--preview-surface-hatch-spacing) var(--preview-surface-hatch-spacing);position:absolute;inset:0}.preview-surface__hatch:before{opacity:var(--preview-surface-hatch-strength)}.preview-surface__hatch:after{opacity:calc(var(--preview-surface-hatch-strength) * (var(--preview-surface-hatch-peak-ratio) - 1));background-position:calc(var(--preview-surface-hatch-spacing) / 2) calc(var(--preview-surface-hatch-spacing) / 2)}:root[data-mantine-color-scheme=dark] .preview-surface__hatch:before,:root[data-mantine-color-scheme=dark] .preview-surface__hatch:after{background-color:var(--preview-surface-hatch-color);-webkit-mask-image:var(--preview-surface-hatch-mask);-webkit-mask-image:var(--preview-surface-hatch-mask);mask-image:var(--preview-surface-hatch-mask);-webkit-mask-size:var(--preview-surface-hatch-spacing) var(--preview-surface-hatch-spacing);-webkit-mask-size:var(--preview-surface-hatch-spacing) var(--preview-surface-hatch-spacing);mask-size:var(--preview-surface-hatch-spacing) var(--preview-surface-hatch-spacing);background-image:none;-webkit-mask-repeat:repeat;mask-repeat:repeat}:root[data-mantine-color-scheme=dark] .preview-surface__hatch:after{background-position:unset;-webkit-mask-position:calc(var(--preview-surface-hatch-spacing) / 2) calc(var(--preview-surface-hatch-spacing) / 2);-webkit-mask-position:calc(var(--preview-surface-hatch-spacing) / 2) calc(var(--preview-surface-hatch-spacing) / 2);mask-position:calc(var(--preview-surface-hatch-spacing) / 2) calc(var(--preview-surface-hatch-spacing) / 2)}.preview-surface--section .preview-surface__hatch{inset:0}.preview-surface__card-frame{border-radius:var(--radius-xl);border:1px dashed var(--preview-surface-border);flex-direction:column;height:100%;padding:.5rem;display:flex;position:relative;overflow:hidden}.preview-surface__card-frame .preview-surface__hatch{inset:0}.preview-surface__card-inset{z-index:1;flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.preview-surface__card-inset .preview-surface__content{flex-direction:column;flex:1;min-height:0;display:flex}.preview-surface__card-badge{z-index:3;position:absolute;top:.5rem;right:.5rem}.preview-surface--locked .preview-surface__content{opacity:.8;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity var(--do-duration-fast) var(--do-ease-standard)}.preview-surface--locked:hover .preview-surface__content{opacity:1}.preview-surface__hint-target{display:block}.preview-surface__hint-target--fill{height:100%}.preview-surface__hint-dropdown{padding:.75rem}.preview-surface__hint{flex-direction:column;gap:.625rem;display:flex}.preview-surface__hint-header{justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.preview-surface__hint-title{min-width:0;color:var(--do-foreground);align-items:center;gap:.4375rem;font-size:.8125rem;font-weight:600;line-height:1.25rem;display:flex}.preview-surface__hint-copy{color:var(--do-foreground-muted);margin:0;font-size:.8125rem;line-height:1.45}.preview-surface__hint-close.mantine-ActionIcon-root{color:var(--do-accent-strong);background-color:#0000;transition:background-color .14s,color .14s;--ai-size:calc(1.25rem * 1.05)!important;width:1.3125rem!important;min-width:1.3125rem!important;height:1.3125rem!important;min-height:1.3125rem!important;padding:.2625rem!important}.preview-surface__hint-close.mantine-ActionIcon-root:hover{background-color:color-mix(in oklch, var(--do-accent) 16%, var(--do-surface))!important;color:var(--do-accent-strong)!important}.preview-surface__hint-action.mantine-Button-root{--button-hover:var(--button-bg);border:1px solid var(--preview-surface-border);transition:opacity var(--do-duration-fast) var(--do-ease-standard);align-self:flex-start}.preview-surface__hint-action.mantine-Button-root:hover{opacity:.9}