/* Keep the editing workspace in three columns, independent of viewport width. */
body { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.app-header { flex-shrink:0; height:auto; min-height:72px; flex-wrap:wrap; padding:14px 16px; gap:12px; }
.header-actions { flex-wrap:wrap; }
.header-actions .tutorials-link { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; padding:8px 11px; color:var(--ink); text-decoration:none; font-size:11px; white-space:nowrap; }
.header-actions .tutorials-link:hover { background:var(--pale); }
.header-actions .tutorials-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.workspace-scroll { flex:1; min-height:0; overflow:auto; }
.workspace {
  --left-width:220px; --right-width:280px;
  display:grid; height:100%; width:100%;
  min-width:calc(var(--left-width) + var(--right-width) + 412px);
  grid-template-columns:var(--left-width) 6px minmax(400px,1fr) 6px var(--right-width);
}
.workspace > :is(.sidebar,.inspector) {
  position:static; display:flex; width:auto; min-width:0; height:100%;
  box-shadow:none; z-index:auto;
}
.workspace > .main { width:auto; min-width:0; height:100%; }
.workspace > .sidebar { border-right:0; }
.workspace > .inspector { border-left:0; }
.column-divider {
  position:relative; min-height:0; background:var(--bg); cursor:col-resize;
  touch-action:none; user-select:none; outline:none;
  border-inline:1px solid var(--line);
}
.column-divider::after {
  content:''; position:absolute; top:50%; left:1px; right:1px; height:36px;
  transform:translateY(-50%); border-radius:3px; background:var(--muted); opacity:.5;
}
.column-divider:hover,.column-divider:focus-visible,.column-divider.dragging { background:var(--accent); }
.column-divider:focus-visible { outline:2px solid var(--focus,var(--accent)); outline-offset:-2px; }
.column-divider:hover::after,.column-divider:focus-visible::after,.column-divider.dragging::after { background:#fff; opacity:1; }
body.resizing-columns,body.resizing-columns * { cursor:col-resize!important; user-select:none!important; }
@media(max-width:900px) {
  .app-header { min-height:64px; padding:12px; }
  .workspace .main-toolbar { padding:0 12px; }
  .workspace .tabs { gap:12px; }
  .header-actions .tutorials-link { padding:7px; font-size:10px; }
}