.sandbox-page{height:calc(100vh - var(--space-xl) * 2);flex-direction:column;display:flex}.sandbox-layout{gap:var(--space-md);flex:1;min-height:0;display:flex}.sandbox-sidebar{flex-direction:column;flex-shrink:0;gap:4px;width:200px;display:flex}.sandbox-doc-item{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;justify-content:space-between;align-items:center;font-size:.85rem;transition:all .15s;display:flex}.sandbox-doc-item:hover{background:var(--bg-elevated);color:var(--text-primary)}.sandbox-doc-item.active{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-active)}.sandbox-main{gap:var(--space-md);flex:1;grid-template-columns:1fr 1fr;min-height:0;display:grid}.sandbox-editor{flex-direction:column;min-height:0;display:flex}.sandbox-textarea{resize:none;flex:1;min-height:400px;font-size:.8rem;line-height:1.6}.sandbox-preview{flex-direction:column;min-height:0;display:flex}.sandbox-mermaid-container{background:var(--bg-void);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-md);flex:1;min-height:400px;overflow:auto}.mermaid-diagram{padding:var(--space-md);justify-content:center;display:flex}.mermaid-diagram svg{max-width:100%;height:auto}@media (max-width:900px){.sandbox-layout{flex-direction:column}.sandbox-sidebar{gap:var(--space-sm);flex-direction:row;width:100%;overflow-x:auto}.sandbox-main{grid-template-columns:1fr}}