/* webdevtoolsbase shared tools CSS: tool workspaces, panels, previews, result areas, grids/cards. */

.prevpanel .prevwrap{flex:1;width:100%;min-height:200px;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:auto;background:repeating-conic-gradient(#0000 0 25%,color-mix(in srgb,var(--ink) 6%,transparent) 0 50%) 50%/22px 22px}

.ruleout{flex:1;width:100%;min-height:240px;overflow:auto;padding:.6rem .8rem;font-family:var(--mono);font-size:.86rem;line-height:1.5}

.cssframe{flex:1;width:100%;min-height:240px;border:0;border-radius:0 0 var(--r) var(--r);background:#fff}

/* Pass 4 tool layout safety */
.workspace,.panel,.output,.preview-grid,.grid,.card,main.tool,main.xform,.hero,.cats,.content,.gobar,.single{min-width:0;max-width:100%}
pre,code,.out,.io pre{max-width:100%;overflow-wrap:anywhere}
@media (max-width:820px){main.xform,main.xform.gen{grid-template-columns:1fr}.related{grid-template-columns:1fr}}